:root{
  --rail:#1C211E; --rail-2:#272D29; --rail-ink:#C9D0CB; --rail-ink-2:#7C867F;
  --bg:#EDEFEC; --surface:#FFFFFF; --surface-2:#F5F6F3; --surface-3:#E9EBE7;
  --line:#DBDED8; --line-2:#C6CBC3;
  --ink:#161A17; --ink-2:#454C47; --muted:#727A74; --dica:#636B65;
  --accent:#C2600C; --accent-2:#8A4409; --accent-soft:#FDF1E0; --accent-line:#EBCFAE;
  --roder:#F2B01E; --roder-ink:#3A2A05; --tick:#3E8CD4;
  --mine:#F6E7D4; --mine-line:#E7CFAE;
  --good:#3B6E4B; --good-soft:#E2EDE4;
  --warn:#9A5B12; --warn-soft:#FBEEDC;
  --risk:#9C3527; --risk-soft:#F8E2DE;
  --info:#2F5872; --info-soft:#E3EBF1;
  --sh:0 1px 2px rgba(20,24,21,.06),0 10px 28px -22px rgba(20,24,21,.55);
  color-scheme:light;
}
/* TRAVADO NO TEMA CLARO (Jeferson, 12/09/2026): "vamos travar no tema
   claro, algo que o Atrelo foi projetado. No futuro, se me pedirem, eu
   venho aqui e peco."

   A paleta escura FICA INTEIRA, e nao foi apagada: religar e trocar
   `[data-theme="auto"]` de volta para `:not([data-theme="light"])` nas
   sete consultas de midia. Apagar economizaria umas linhas e custaria
   refazer tudo depois.

   O gatilho virou `data-theme="auto"`, que nenhuma pagina escreve hoje.
   Assim o modo escuro do celular deixa de mudar o Atrelo sozinho, que era
   o que acontecia: a equipe com o telefone no escuro via uma versao do
   sistema que nunca foi conferida de ponta a ponta, e onde a revisao de
   11/09 ja tinha achado dois pontos ilegiveis. */
@media (prefers-color-scheme:dark){:root[data-theme="auto"]{
  --rail:#121614; --rail-2:#1D2320; --rail-ink:#C9D0CB; --rail-ink-2:#7C867F;
  --bg:#101312; --surface:#181C1A; --surface-2:#1F2422; --surface-3:#272D2A;
  --line:#2C332F; --line-2:#3B433E;
  --ink:#E8ECE9; --ink-2:#BFC7C2; --muted:#8B948E; --dica:#949D97;
  --accent:#E39A3B; --accent-2:#F3B65E; --accent-soft:#2E2314; --accent-line:#4C3A20;
  --roder:#F2B01E; --roder-ink:#3A2A05; --tick:#6FB2E8;
  --mine:#2F2818; --mine-line:#4C3F22;
  --good:#7FBB90; --good-soft:#1A2820;
  --warn:#D9A05A; --warn-soft:#2C2315;
  --risk:#DE8878; --risk-soft:#2E1F1C;
  --info:#8FB6D0; --info-soft:#1A242C;
  --sh:0 1px 2px rgba(0,0,0,.5),0 10px 28px -22px rgba(0,0,0,.9);
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --rail:#121614; --rail-2:#1D2320; --rail-ink:#C9D0CB; --rail-ink-2:#7C867F;
  --bg:#101312; --surface:#181C1A; --surface-2:#1F2422; --surface-3:#272D2A;
  --line:#2C332F; --line-2:#3B433E;
  --ink:#E8ECE9; --ink-2:#BFC7C2; --muted:#8B948E; --dica:#949D97;
  --accent:#E39A3B; --accent-2:#F3B65E; --accent-soft:#2E2314; --accent-line:#4C3A20;
  --roder:#F2B01E; --roder-ink:#3A2A05; --tick:#6FB2E8;
  --mine:#2F2818; --mine-line:#4C3F22;
  --good:#7FBB90; --good-soft:#1A2820;
  --warn:#D9A05A; --warn-soft:#2C2315;
  --risk:#DE8878; --risk-soft:#2E1F1C;
  --info:#8FB6D0; --info-soft:#1A242C;
  --sh:0 1px 2px rgba(0,0,0,.5),0 10px 28px -22px rgba(0,0,0,.9);
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace}
.lbl{font-family:"IBM Plex Mono",monospace;font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* ---------- shell ---------- */
.app{display:grid;grid-template-columns:212px 1fr;height:100vh;min-height:640px}
@media (max-width:900px){.app{grid-template-columns:60px 1fr}}
.rail{background:var(--rail);color:var(--rail-ink);display:flex;flex-direction:column;gap:2px;padding:14px 10px;overflow:auto}
.brand{display:flex;align-items:center;gap:9px;padding:6px 8px 18px}
.brand .mark{width:28px;height:28px;border-radius:7px;background:var(--roder);display:grid;place-items:center;flex:none;box-shadow:0 0 0 1px rgba(0,0,0,.25) inset}
.brand .mark svg{width:15px;height:15px}
.brand b{font-size:17px;letter-spacing:-.02em;color:#fff;line-height:1.1;display:block}
.rlogo{display:block;width:104px;margin-top:5px;filter:brightness(0) invert(1);opacity:.62}
.navsec{font-family:"IBM Plex Mono",monospace;font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:var(--rail-ink-2);padding:14px 10px 6px}
.nav{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:7px;color:var(--rail-ink);font-size:14px;width:100%;text-align:left}
.nav svg{width:17px;height:17px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.nav:hover{background:var(--rail-2)}
.nav[aria-current="true"]{background:var(--rail-2);color:#fff;box-shadow:inset 2px 0 0 var(--roder)}
.nav .badge{margin-left:auto;background:var(--roder);color:var(--roder-ink);font-size:10.5px;font-weight:700;border-radius:9px;padding:1px 6px;font-family:"IBM Plex Mono",monospace}
.nav .badge.q{background:var(--risk);color:#fff}
@media (max-width:900px){.nav span.t,.brand div,.navsec{display:none}.nav{justify-content:center}.nav .badge{display:none}}
.demo{margin-top:auto}
.railfoot{padding:12px 8px 4px;border-top:1px solid var(--rail-2);display:grid;gap:8px}
.who{display:flex;align-items:center;gap:9px}
.who .av{width:30px;height:30px;border-radius:50%;background:var(--roder);color:var(--roder-ink);display:grid;place-items:center;font-weight:700;font-size:12px;flex:none}
.who b{font-size:13px;color:#fff;display:block;line-height:1.2}
.who small{font-size:11px;color:var(--rail-ink-2)}
.switch{display:flex;background:var(--rail-2);border-radius:6px;padding:2px;gap:2px}
.switch button{flex:1;font-size:11px;padding:5px 4px;border-radius:4px;color:var(--rail-ink-2)}
.switch button[aria-pressed="true"]{background:var(--rail);color:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.07)}
@media (max-width:900px){.railfoot .who b,.railfoot .who small,.switch{display:none}}

.main{overflow:hidden;display:flex;flex-direction:column;background:var(--bg)}
.screen{display:none;height:100%;overflow:hidden}
.screen.on{display:flex;flex-direction:column}

.pad{padding:22px 26px;overflow:auto}
.h1{font-size:22px;font-weight:600;letter-spacing:-.02em}
.sub{color:var(--muted);font-size:13.5px;margin-top:2px}
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}

/* ---------- conversas ---------- */
.conv{display:grid;grid-template-columns:296px 1fr 316px;height:100%;overflow:hidden}
@media (max-width:1280px){.conv{grid-template-columns:262px 1fr}.conv .aside{display:none}}
.mobback{display:none;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;color:var(--ink-2);flex:none;margin-right:-4px}
.mobback:hover{background:var(--surface-2)}
.mobback svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:820px){
  .conv{grid-template-columns:1fr;position:relative}
  .conv .list{display:none}
  .conv.showlist .list{display:flex;position:absolute;inset:0;z-index:6;border-right:0}
  .conv.showlist .thread{visibility:hidden}
  .mobback{display:inline-flex}
}

.list{background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column;overflow:hidden}
.listhead{padding:14px 14px 10px;border-bottom:1px solid var(--line);display:grid;gap:10px}
.srch{display:flex;align-items:center;gap:8px;background:var(--surface-2);border:1px solid var(--line);border-radius:7px;padding:7px 10px}
.srch input{border:0;background:none;outline:none;color:var(--ink);font:inherit;width:100%}
.srch svg{width:15px;height:15px;stroke:var(--muted);fill:none;stroke-width:1.8}
.tabs{display:flex;gap:4px;align-items:center}
/* O sino de mensagem nova, encostado a direita das abas. `margin-left:auto`
   e o que o empurra; sem ele ele ficava colado na aba "Aguardando". */
.tab.som{margin-left:auto;font-size:15px;line-height:1;padding:5px 8px}
.tab.som[aria-pressed="true"]{background:var(--good-soft);border-color:var(--good);color:var(--good)}
.tab{font-size:12px;padding:5px 9px;border-radius:6px;color:var(--muted);border:1px solid transparent}
.tab[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent-2)}
.items{overflow:auto;flex:1}
.item{display:grid;grid-template-columns:38px 1fr;gap:11px;padding:11px 14px;border-bottom:1px solid var(--line);width:100%;text-align:left;align-items:start}
.item:hover{background:var(--surface-2)}
.item[aria-current="true"]{background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--accent)}
.av{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:12.5px;color:#fff;flex:none;letter-spacing:.02em}
.item > span:last-child{min-width:0}
.item .top{display:flex;justify-content:space-between;gap:8px;align-items:baseline;min-width:0}
.item .top .nm{flex:1;min-width:0}
.item .nm{display:block;font-weight:600;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item .tm{font-size:10.5px;color:var(--muted);font-family:"IBM Plex Mono",monospace;flex:none}
.item .pv{display:block;font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:1px}
.item .mt{display:flex;gap:5px;align-items:center;margin-top:5px;flex-wrap:wrap}
.pill{font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;padding:2px 6px;border-radius:4px;border:1px solid var(--line-2);color:var(--muted);white-space:nowrap}
.pill.v{background:var(--info-soft);border-color:transparent;color:var(--info)}
.pill.p{background:var(--good-soft);border-color:transparent;color:var(--good)}
.pill.t{background:var(--warn-soft);border-color:transparent;color:var(--warn)}
.pill.hot{background:var(--risk-soft);border-color:transparent;color:var(--risk)}
.unread{background:var(--good);color:#fff;font-size:10px;font-weight:700;border-radius:9px;padding:1px 6px;font-family:"IBM Plex Mono",monospace}

.thread{display:flex;flex-direction:column;overflow:hidden;background:var(--surface-2)}
.thead{background:var(--surface);border-bottom:1px solid var(--line);padding:10px 16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;box-shadow:0 1px 0 rgba(20,24,21,.04)}
.thead .who2{display:flex;align-items:center;gap:11px;min-width:0}
.thead h3{margin:0;font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.thead .meta{font-size:11.5px;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.tact{margin-left:auto;display:flex;gap:7px;flex-wrap:wrap}
.btn{border:1px solid var(--line-2);border-radius:7px;padding:6px 11px;font-size:12.5px;background:var(--surface);display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.btn:hover{background:var(--surface-2)}
.btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round}
.btn.win{background:var(--good);border-color:var(--good);color:#fff}
.btn.lose{background:var(--surface);border-color:var(--risk);color:var(--risk)}
.btn.pri{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.pri:hover{filter:brightness(1.06)}

.msgs{flex:1;overflow:auto;padding:20px 26px;display:flex;flex-direction:column;gap:11px;
  background-color:var(--surface-2);
  background-image:
    radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--roder) 9%, transparent) 0 1.4px, transparent 1.6px),
    radial-gradient(circle at 62% 46%, color-mix(in srgb, var(--roder) 7%, transparent) 0 1.2px, transparent 1.4px),
    radial-gradient(circle at 34% 78%, color-mix(in srgb, var(--roder) 8%, transparent) 0 1.3px, transparent 1.5px),
    linear-gradient(135deg, transparent 0 calc(50% - .6px), color-mix(in srgb, var(--line-2) 26%, transparent) 50%, transparent calc(50% + .6px) 100%);
  background-size:140px 140px, 190px 190px, 230px 230px, 46px 46px;}
.day{align-self:center;font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.1em;color:var(--muted);background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:3px 12px}
.via{align-self:center;font-family:"IBM Plex Mono",monospace;font-size:10px;color:var(--muted);letter-spacing:.05em}
.b{max-width:min(620px,74%);border-radius:9px 9px 9px 2px;padding:8px 12px 6px;border:1px solid var(--line);background:var(--surface);position:relative;box-shadow:0 1px 1px rgba(20,24,21,.09)}
.b::after{content:"";position:absolute;bottom:-1px;left:-7px;width:9px;height:11px;background:inherit;border-left:1px solid var(--line);border-bottom:1px solid var(--line);clip-path:polygon(100% 0,100% 100%,0 100%)}
.b.me{align-self:flex-end;background:var(--mine);border-color:var(--mine-line);border-radius:9px 9px 2px 9px}
.b.me::after{left:auto;right:-7px;border-left:0;border-right:1px solid var(--mine-line);border-bottom-color:var(--mine-line);clip-path:polygon(0 0,100% 100%,0 100%)}
.b.note::after,.b.call::after,.b.mail::after,.b.file::after{display:none}
.b.note,.b.call,.b.mail{border-radius:9px}
.tick{color:var(--tick);font-size:11px;letter-spacing:-1px;margin-left:4px}
.b .au{font-size:10.5px;color:var(--muted);font-family:"IBM Plex Mono",monospace;margin-bottom:3px}
.b p{margin:0;font-size:14px;color:var(--ink);line-height:1.5}
.b .ts{font-family:"IBM Plex Mono",monospace;font-size:10px;color:var(--muted);text-align:right;margin-top:4px}
.b.note{align-self:center;max-width:min(640px,86%);background:var(--warn-soft);border-color:var(--accent-line)}
.b.call{align-self:center;max-width:min(660px,88%);background:var(--surface)}
.b.mail{align-self:center;max-width:min(660px,88%);background:var(--info-soft);border-color:transparent}
.b.file{display:flex;align-items:center;gap:10px;border-radius:9px}
.b.file .ic{width:34px;height:34px;border-radius:7px;background:var(--accent-soft);display:grid;place-items:center;flex:none}
.b.file .ic svg{width:16px;height:16px;stroke:var(--accent-2);fill:none;stroke-width:1.8}
.callhead{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:600}
.callhead svg{width:15px;height:15px;stroke:var(--good);fill:none;stroke-width:1.9}
.player{display:flex;align-items:center;gap:10px;margin:9px 0;background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:7px 10px}
.play{width:28px;height:28px;border-radius:50%;background:var(--good);display:grid;place-items:center;flex:none}
.play svg{width:12px;height:12px;fill:#fff;stroke:none;margin-left:2px}
.bar{flex:1;height:4px;background:var(--line-2);border-radius:3px;position:relative}
.bar i{position:absolute;left:0;top:0;bottom:0;width:22%;background:var(--good);border-radius:3px}
.sum{border-top:1px dashed var(--line-2);padding-top:8px;margin-top:6px}
.sum ul{margin:6px 0 0;padding-left:16px}
.sum li{font-size:13px;color:var(--ink-2);margin-bottom:2px}

.composer{background:var(--surface);border-top:1px solid var(--line);padding:10px 14px;display:grid;gap:8px}
.crow{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.conn{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--muted);background:var(--surface-2);border:1px solid var(--line);border-radius:7px;padding:5px 9px}
.dot{width:7px;height:7px;border-radius:50%;background:var(--good);flex:none}
.cbox{display:flex;align-items:flex-end;gap:9px;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.cbox textarea{flex:1;border:0;background:none;outline:none;resize:none;font:inherit;color:var(--ink);min-height:22px;max-height:110px}
/* O `<textarea>` acima tinha regra desde o comeco; o `<input>` nao tinha, e
   os 42 campos escritos como `<div class="cbox"><input></div>` sairam com o
   desenho NATIVO do navegador dentro da caixa do Atrelo: fundo branco,
   borda cinza de 2px e uma largura propria de 177px que nao encolhe nem
   estica (um `<input>` sem `size` pede ~20 caracteres, e `min-width:auto`
   de item flex nao deixa ir abaixo disso).
   Media no modal de "Novo lead", em 390px: o campo Telefone terminava em
   412px numa tela de 390, e o modal rolava 23px DE LADO (411 de conteudo
   em 388 de caixa); no SE, 12px. Na caixa da curva ABC era pior, porque a
   coluna e mais estreita: "Contato A" ocupava 177px numa coluna de 147 e
   escrevia POR CIMA de "Contato B", e "Maximo por dia" terminava em 388px
   de uma tela de 320, cortado pela borda.
   Os campos que ja traziam `style="flex:1;border:0;..."` escrito na mao
   ficam iguais: esta regra so dá aos outros o que eles ja deviam ter.
   Fora `checkbox` e `radio`, que sao quadradinhos de tamanho fixo. */
.cbox input:not([type=checkbox]):not([type=radio]){
  flex:1;width:100%;min-width:0;border:0;background:none;outline:none;
  font:inherit;color:var(--ink);
}
/* O `<select>` ja vem com `flex:1` escrito na mao em todos os nove lugares,
   mas nenhum tem `min-width:0`, e sem isso ele nao encolhe abaixo da opcao
   mais comprida da lista. No iPhone SE (320px) o seletor de vendedora
   interna do lead pedia 305px numa coluna de 290, por causa de "Heloisa
   Laira dos Santos Camargo (de férias)", e sozinho fazia o modal rolar
   12px de lado. Encolhendo, o nome fica cortado com reticencias, que e o
   preco certo: a lista aberta mostra o nome inteiro. */
.cbox select{min-width:0}
/* A DICA DENTRO DO CAMPO nunca teve cor no Atrelo: os 40 e tantos
   `placeholder` da aplicacao saiam com o cinza que o navegador escolhe,
   #757575, e ele nao passa na WCAG em tema nenhum. Medido: 4,25:1 no
   claro e 3,42:1 no escuro, contra os 4,5 exigidos.
   Ate hoje isso era chato; nos seis campos de Qualificacao da ficha do
   negocio passa a ser grave, porque eles nascem VAZIOS e a dica e a unica
   coisa que diz o que escrever ("Ex.: trator 130 cv, escavadeira 20 t").
   No escuro o cinza do navegador quase some no fundo da caixa.
   `--dica` fica entre `--muted` e o fundo: 5,07:1 no claro e 5,65:1 no
   escuro sobre `--surface-2`, e no pior fundo da aplicacao (`--surface-3`)
   ainda da 4,58 e 5,04. So cor: nenhuma caixa muda de tamanho nem de
   lugar. O `opacity:1` e por causa do Firefox, que por conta propria
   deixa a dica meio transparente e derrubaria a conta de novo. */
::placeholder{color:var(--dica);opacity:1}
.send{width:36px;height:36px;border-radius:50%;background:var(--good);display:grid;place-items:center;flex:none;box-shadow:0 2px 6px -1px rgba(0,0,0,.25)}
.send svg{width:15px;height:15px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- aside ---------- */
.aside{background:var(--surface);border-left:1px solid var(--line);display:flex;flex-direction:column;overflow:hidden}
.asidetabs{display:flex;border-bottom:1px solid var(--line);padding:0 10px;gap:2px}
.atab{padding:12px 12px 10px;font-size:12.5px;color:var(--muted);border-bottom:2px solid transparent;font-weight:500}
.atab[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--accent)}
.abody{overflow:auto;padding:16px;display:grid;gap:16px;align-content:start}
.blk{display:grid;gap:8px}
.blk > .lbl{padding-bottom:5px;border-bottom:1px solid var(--line)}
.kv{display:grid;grid-template-columns:96px 1fr;gap:6px 10px;font-size:13px}
.kv dt{color:var(--muted)}
.kv dd{margin:0;color:var(--ink)}
.mach{border:1px solid var(--line);border-radius:8px;padding:10px 12px;display:grid;gap:4px;background:var(--surface-2)}
.mach b{font-size:13px}
.mach .l{font-size:11.5px;color:var(--muted)}
.warr{display:inline-flex;align-items:center;gap:5px;font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:4px}
.warr.ok{background:var(--good-soft);color:var(--good)}
.warr.no{background:var(--surface-3);color:var(--muted)}
.tempo{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tempo div{border:1px solid var(--line);border-radius:8px;padding:8px 9px;background:var(--surface-2)}
.tempo b{display:block;font-size:14px;margin-top:2px}
.advice{background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:9px;padding:12px;display:grid;gap:8px}
.advice p{margin:0;font-size:13.5px;color:var(--ink-2);line-height:1.5}
.advice .q{font-size:13.5px;color:var(--ink);background:var(--surface);border:1px solid var(--accent-line);border-radius:7px;padding:9px 11px}
.ask{display:grid;gap:8px}
.ask .box{display:flex;gap:8px;background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:7px 9px}
.ask input{flex:1;border:0;background:none;outline:none;font:inherit;color:var(--ink)}
.qa{border:1px solid var(--line);border-radius:8px;padding:10px 12px;background:var(--surface-2);font-size:13.5px;color:var(--ink-2);line-height:1.5}
.chipbtn{font-size:12px;border:1px solid var(--line-2);border-radius:20px;padding:4px 10px;color:var(--ink-2)}
.chipbtn:hover{background:var(--surface-2)}

/* ---------- fila ---------- */
.fila{display:grid;gap:10px;max-width:900px}
.task{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:14px 16px;display:grid;grid-template-columns:64px 1fr auto;gap:14px;align-items:center;box-shadow:var(--sh)}
@media (max-width:700px){.task{grid-template-columns:1fr;gap:10px}}
.task.late{box-shadow:inset 3px 0 0 var(--risk),var(--sh)}
.task .hr{font-family:"IBM Plex Mono",monospace;font-size:16px;font-weight:600}
.task .hr small{display:block;font-size:9.5px;letter-spacing:.1em;color:var(--muted);text-transform:uppercase}
.task h4{margin:0;font-size:14.5px;font-weight:600}
.task .d{font-size:12.5px;color:var(--muted);margin-top:3px}
.task .mt{display:flex;gap:6px;margin-top:7px;flex-wrap:wrap}
.task .ac{display:flex;gap:7px}
.auto{display:inline-flex;align-items:center;gap:5px;font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-2);background:var(--accent-soft);border:1px solid var(--accent-line);padding:2px 7px;border-radius:4px}

/* ---------- funil ---------- */
.board{display:flex;gap:12px;overflow-x:auto;padding-bottom:8px;align-items:flex-start}
.col{background:var(--surface-2);border:1px solid var(--line);border-radius:10px;min-width:250px;width:250px;flex:none;display:grid;gap:9px;padding:11px}
.colh{display:grid;gap:3px}
.colh .t{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:600}
.colh .n{margin-left:auto;font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--muted)}
.colh .v{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--muted)}
.deal{background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:11px;display:grid;gap:7px;text-align:left;width:100%;box-shadow:var(--sh)}
.deal:hover{border-color:var(--accent-line)}
.deal .t{font-size:13px;font-weight:600;line-height:1.3}
.deal .c{font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.deal .v{font-family:"IBM Plex Mono",monospace;font-size:13px;font-weight:600}
.deal .f{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.stale{font-family:"IBM Plex Mono",monospace;font-size:10px;color:var(--risk);background:var(--risk-soft);padding:2px 6px;border-radius:4px}
.fresh{font-family:"IBM Plex Mono",monospace;font-size:10px;color:var(--muted);background:var(--surface-3);padding:2px 6px;border-radius:4px}

/* ---------- clientes ---------- */
.tw{overflow:auto;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
table{border-collapse:collapse;width:100%;min-width:720px;font-size:13.5px}
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
thead th{font-family:"IBM Plex Mono",monospace;font-size:9.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);background:var(--surface-2);position:sticky;top:0}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--surface-2)}
td.n{font-family:"IBM Plex Mono",monospace;text-align:right;white-space:nowrap}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}

/* Na visao de TABELA do funil, o seletor de etapa do celular nao faz
   sentido: a tabela mostra todas as etapas de uma vez, que e o ponto dela.
   A busca continua, porque ela filtra as duas visoes. */
#funilCelular.escondeetapas .etapasel{display:none}

/* ---------- painel ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:12px;margin-bottom:20px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:14px 16px;display:grid;gap:3px;box-shadow:var(--sh)}
.kpi b{font-family:"IBM Plex Mono",monospace;font-size:23px;font-weight:600;letter-spacing:-.02em}
.kpi .s{font-size:11.5px;color:var(--muted)}
.kpi.alert{box-shadow:inset 3px 0 0 var(--risk),var(--sh)}
.grid2{display:grid;gap:14px;grid-template-columns:1fr}
@media (min-width:1000px){.grid2{grid-template-columns:1fr 1fr}}
.panelbox{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:16px;display:grid;gap:12px;box-shadow:var(--sh)}
.panelbox h4{margin:0;font-size:14px;font-weight:600}
.rowbar{display:grid;gap:5px}
.rowbar .rl{display:flex;justify-content:space-between;font-size:12.5px}
.rowbar .rl span:last-child{font-family:"IBM Plex Mono",monospace;color:var(--muted)}
.track{height:6px;background:var(--surface-3);border-radius:4px;overflow:hidden}
.track i{display:block;height:100%;background:var(--accent);border-radius:4px}
.track i.g{background:var(--good)}
.track i.r{background:var(--risk)}

/* ---------- modal ---------- */
.ov{position:fixed;inset:0;background:rgba(12,15,13,.55);display:none;place-items:center;padding:20px;z-index:40}
.ov.on{display:grid}
.modal{background:var(--surface);border:1px solid var(--line);border-radius:12px;width:min(880px,100%);transition:none;max-height:88vh;overflow:auto;box-shadow:0 24px 70px -20px rgba(0,0,0,.6)}
.modal.wide{width:min(1200px,100%)}
.mhead{padding:18px 20px;border-bottom:1px solid var(--line);display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap;position:sticky;top:0;background:var(--surface);z-index:1}
.mhead h3{margin:0;font-size:18px;font-weight:600}
.mbody{padding:20px;display:grid;gap:18px}
.mfoot{padding:14px 20px;border-top:1px solid var(--line);display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;position:sticky;bottom:0;background:var(--surface)}
.x{margin-left:auto;width:30px;height:30px;border-radius:7px;display:grid;place-items:center;color:var(--muted)}
.x:hover{background:var(--surface-2)}
/* consultor ampliado */
.cgrid{display:grid;gap:14px;grid-template-columns:1fr}
@media (min-width:1080px){.cgrid{grid-template-columns:1fr 1fr}}
.kbox{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:16px;display:grid;gap:12px;box-shadow:var(--sh);align-content:start}
.kbox .kh{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.kbox h4{margin:0;font-size:14.5px;font-weight:600;flex:1}
.klist{display:grid;gap:8px;max-height:320px;overflow:auto}
.ensino{align-self:stretch;max-width:none;background:var(--surface-2);border:1px solid var(--roder);border-left:3px solid var(--roder);border-radius:10px;padding:11px 13px;display:grid;gap:7px}
.ensino .eh{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:12px;color:var(--ink-2)}
.ensino .eh b{color:var(--ink);font-size:13px}
.ensino .interno{font:600 10.5px/1 var(--mono,ui-monospace,monospace);letter-spacing:.06em;text-transform:uppercase;background:var(--roder);color:#1a1205;padding:3px 6px;border-radius:4px}
.ensino p{margin:0;font-size:13.5px;line-height:1.5}
.ensino .cita{font-size:12.5px;color:var(--ink-2);border-left:2px solid var(--line);padding-left:9px}
.ensino audio{width:100%;height:34px}
.autobar{display:flex;gap:9px;align-items:center;flex-wrap:wrap;padding:9px 12px;border:1px solid var(--roder);background:color-mix(in srgb, var(--roder) 12%, transparent);border-radius:9px;margin-bottom:9px}
.autobar.off{border-color:var(--line);background:var(--surface-2)}
.autobar .txt{font-size:12.5px;color:var(--ink-2);flex:1;min-width:220px}
.autobar .txt b{color:var(--ink)}
.pulse{width:9px;height:9px;border-radius:50%;background:var(--roder);box-shadow:0 0 0 0 var(--roder);animation:pl 2s infinite}
@keyframes pl{70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
.chipbtn.sug{border-color:var(--roder);color:var(--ink);font-weight:600}
.optrow{display:grid;gap:8px}
.optcard{border:1px solid var(--line);border-radius:9px;padding:11px 12px;display:grid;gap:8px;background:var(--surface-2)}
.optcard p{margin:0;font-size:13.5px;line-height:1.5}
.mem{display:grid;gap:7px}
.memrow{display:grid;grid-template-columns:22px 1fr;gap:9px;align-items:start;padding:9px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2)}
.memrow .ic2{width:22px;height:22px;display:grid;place-items:center;border-radius:6px;background:var(--roder);color:#1a1205;font-size:12px}
.memrow b{font-size:13px;display:block}
.memrow .l{font-size:12px;color:var(--ink-2);display:block;margin-top:2px;line-height:1.45}
.memrow .q2{font-size:12.5px;color:var(--ink);display:block;margin-top:5px;border-left:2px solid var(--roder);padding-left:8px}
.portras{font-size:11px;color:var(--ink-2);border-top:1px dashed var(--line);margin-top:7px;padding-top:6px}
.b{position:relative}
.ensinabtn{position:absolute;top:6px;right:7px;width:24px;height:24px;display:grid;place-items:center;
  background:var(--surface);border:1px solid var(--line);border-radius:50%;color:var(--ink-2);
  cursor:pointer;padding:0;opacity:0;transition:opacity .12s}
.b .au{padding-right:26px}
.b:hover .ensinabtn,.ensinabtn:focus-visible{opacity:1}
.ensinabtn:hover{border-color:var(--roder);color:var(--roder)}
.ensinabtn svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
@media (hover:none){.ensinabtn{opacity:.4}}
.klist.full{max-height:none;overflow:visible}
.krow{border:1px solid var(--line);border-radius:8px;padding:10px 12px;background:var(--surface-2);display:grid;gap:3px;position:relative}
/* O botao "Editar" do cartao de pessoa (Jeferson, 13/09/2026).
 * ABSOLUTO, e nao no fluxo: .krow e um grid de uma coluna, e um botao no
 * fluxo empurraria o nome para a segunda linha nos dez cartoes. O padding
 * a direita abre o espaco para ele nao sentar em cima das etiquetas. */
.krow.com-editar{padding-right:82px}
.krow-editar{position:absolute;top:8px;right:8px;padding:5px 12px;font-size:12.5px;min-height:auto}
@media (max-width:820px){
  /* 44px de alvo no celular, a regra do projeto. */
  .krow.com-editar{padding-right:98px}
  .krow-editar{padding:11px 14px;min-height:44px;font-size:13px}
}
.krow b{font-size:13.5px;font-weight:600}
.krow .l{font-size:11.5px;color:var(--muted)}
.krow .tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:4px}
.ptab{display:grid;gap:0;max-height:340px;overflow:auto;border:1px solid var(--line);border-radius:8px}
.prow{display:grid;grid-template-columns:1fr 92px auto;gap:10px;align-items:center;padding:9px 12px;border-bottom:1px solid var(--line);font-size:13px;background:var(--surface)}
.prow:last-child{border-bottom:0}
.prow .pv{font-family:"IBM Plex Mono",monospace;text-align:right;font-size:12.5px}
.prow .add{border:1px solid var(--line-2);border-radius:6px;padding:3px 9px;font-size:12px}
.bloq{font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);border:1px dashed var(--line-2);border-radius:6px;padding:4px 8px;white-space:nowrap}
.sug{border:1px solid var(--accent-line);background:var(--accent-soft);border-radius:9px;padding:12px 14px;display:grid;gap:9px}
.sug .sr{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:13.5px}
.sug .sr b{font-weight:600}
.sug .sr .btn{margin-left:auto}
.maqbadge{display:inline-flex;align-items:center;gap:6px;font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.06em;text-transform:uppercase;background:var(--info-soft);color:var(--info);padding:3px 8px;border-radius:5px}
.incomp{background:var(--risk-soft);color:var(--risk)}
.prow .add:hover{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent-2)}
.mini{font-size:12px;color:var(--muted)}
/* anotações */
.notefab{position:fixed;right:18px;bottom:18px;z-index:38;background:var(--roder);color:var(--roder-ink);border-radius:24px;padding:11px 16px;font-size:13.5px;font-weight:600;display:inline-flex;align-items:center;gap:8px;box-shadow:0 8px 22px -8px rgba(0,0,0,.45)}
.notefab svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.notefab .c{background:rgba(0,0,0,.22);border-radius:12px;padding:0 7px;font-family:"IBM Plex Mono",monospace;font-size:11.5px}
.rec{display:flex;align-items:center;gap:10px;background:var(--surface-2);border:1px solid var(--line);border-radius:9px;padding:10px 12px}
.recdot{width:11px;height:11px;border-radius:50%;background:var(--risk)}
@media (prefers-reduced-motion:no-preference){.recdot.on{animation:pulse 1.1s infinite}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
.notecard{border:1px solid var(--line);border-radius:9px;padding:11px 13px;background:var(--surface-2);display:grid;gap:6px}
.notecard .nh{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.notecard .nh b{font-size:13px}
.notecard audio{width:100%;height:34px}
.feat2{display:grid;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.feat2 > div{padding:12px 14px;border-bottom:1px solid var(--line);display:grid;gap:3px}
.feat2 > div:last-child{border-bottom:0}
.feat2 b{font-size:14px}
.feat2 span{font-size:13.5px;color:var(--ink-2);line-height:1.5}
.prod{display:grid;grid-template-columns:1fr 54px 1fr 66px;gap:8px;align-items:center;font-size:13px;padding:10px 0;border-bottom:1px solid var(--line)}
.prodh{display:none}
@media (min-width:720px){
 .prodh{display:grid;grid-template-columns:1fr 54px 116px 66px 118px 28px;gap:8px;padding:0 0 6px;border-bottom:1px solid var(--line-2)}
 .prodh span{font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
 .prodh span:nth-child(n+2){text-align:right}
 .prod{grid-template-columns:1fr 54px 116px 66px 118px 28px}
}
.prod .pv{font-family:"IBM Plex Mono",monospace;text-align:right;font-size:13px;font-weight:600}
.prod input.alerta{border-color:var(--risk);color:var(--risk);background:var(--risk-soft)}
.alertrow{font-size:12.5px;color:var(--risk);background:var(--risk-soft);border-radius:6px;padding:7px 10px;margin:-2px 0 8px}
.guard{border:1px solid var(--risk);background:var(--risk-soft);border-radius:8px;padding:11px 13px;font-size:13.5px;color:var(--ink)}
/* ---------- proposta do cliente ---------- */
.pwrap{display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:900px){.pwrap{grid-template-columns:268px 1fr;align-items:start}}
.pctl{display:grid;gap:14px;align-content:start}
/* A folha tem 190mm fixos (a largura util do A4). Numa janela estreita ela
   nao cabe na coluna, e sem isto ela empurrava o modal para fora da tela em
   vez de rolar dentro dele. */
#papel{overflow-x:auto;min-width:0}
/* `.grp` era so `.pctl .grp`, entao o quadro de "clientes esperando" na
   Minha fila e o de "comecar por um modelo" no orcamento saiam sem borda,
   sem fundo e sem espacamento: foram escritos como quadro e nao viravam
   quadro. Agora a classe vale sozinha, e `.pctl .grp` some por
   redundancia. Achado pela revisao independente de 11/09/2026.
   `position:relative` e o que ancora o balao de ajuda; sem ele o balao se
   estica pela janela inteira. */
.grp{border:1px solid var(--line);border-radius:9px;background:var(--surface-2);padding:12px 13px;display:grid;gap:9px;position:relative}

/* ---------------------------------------------------------------------
   A DICA: "o que este botao faz, e o que ele NAO faz".

   Jeferson, 11/09/2026: "deixe instrucoes explicadas, ou botoes que
   mostram o que sao. Explicitamente, quando clica voce mostra a informacao
   do que faz e o que nao faz. Cada botao, passando o mouse em cima."

   ABRE NO CLIQUE, E TAMBEM NO MOUSE. So no mouse seria invisivel para
   metade da equipe: o Atrelo e usado no celular o dia inteiro, e celular
   nao tem `hover`. O clique e a forma que funciona nos dois, e o hover e o
   atalho de quem esta no computador.

   NAO USA `title`. O balao nativo do navegador demora cerca de um segundo
   para aparecer, some sozinho, nao quebra linha e nao existe no celular.
   --------------------------------------------------------------------- */
.dica{display:inline-flex;vertical-align:middle;margin-left:6px}
.dica button{width:16px;height:16px;padding:0;border-radius:50%;border:1px solid var(--line);
  background:var(--surface);color:var(--muted);font:inherit;font-size:11px;font-weight:700;
  line-height:1;cursor:pointer;display:grid;place-items:center;position:relative}
/* ALVO DE TOQUE DE 44px no celular, sem inchar o circulo: a area clicavel
   cresce por fora, com pseudo-elemento. O projeto exige 44px e o botao
   tinha 16px em cinco telas. */
@media (max-width:820px){
  .dica button::after{content:"";position:absolute;top:50%;left:50%;
    transform:translate(-50%,-50%);width:44px;height:44px}
}
.dica button:hover{border-color:var(--accent);color:var(--accent)}
.dica button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* O balao fica SEMPRE no documento, invisivel, e nao `display:none`.
   `display` nao aceita transicao, e sem transicao nao ha como esperar os
   tres segundos que o Jeferson pediu. `visibility` aceita. */
/* O balao usa `--ink` como fundo e `--bg` como texto, que se invertem
   sozinhos nos dois temas. O `b` NAO pode ser branco cravado: no tema
   escuro `--ink` e quase branco, e o negrito sumia justamente nos rotulos
   ("O que faz:", "O que nao faz:") que sao a razao de o balao existir.
   Achado pela revisao independente de 11/09/2026. */
.balao{position:absolute;left:12px;right:12px;z-index:40;margin-top:22px;
  background:var(--ink);color:var(--bg);border-radius:8px;padding:10px 12px;
  font-size:12.5px;line-height:1.5;box-shadow:0 8px 24px -8px rgba(0,0,0,.5);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .14s ease, visibility 0s linear .14s}
.balao b{color:var(--bg);font-weight:700}
/* O clique abre na hora: quem clicou ja disse que quer ler. */
.balao.aberto{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s}

/* O atalho do computador, com ESPERA DE TRES SEGUNDOS.
   Jeferson, 11/09/2026: "se ficar abrindo toda hora que passo o mouse em
   cima fica ruim; tem que ficar parado por tres segundos, ai sim aparece".
   O atraso vale so na entrada: ao tirar o mouse o balao some em .14s, que
   e o comportamento que qualquer pessoa espera.
   No celular `hover` nunca dispara, e o clique continua sendo o caminho. */
@media (hover:hover){
  .dica:hover + .balao{opacity:1;visibility:visible;
    transition:opacity .14s ease 3s, visibility 0s linear 3s}
}
/* Quem pediu menos animacao continua tendo a espera, que e o que evita o
   balao pulando na tela, e perde so o esmaecer. */
@media (prefers-reduced-motion:reduce){
  .balao{transition:visibility 0s linear .14s}
  @media (hover:hover){ .dica:hover + .balao{transition:visibility 0s linear 3s} }
}
.chk{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;cursor:pointer;line-height:1.35}
.chk input{margin:2px 0 0;accent-color:var(--accent);width:15px;height:15px;flex:none}
.chk s{color:var(--muted)}
/* `overflow-wrap:anywhere` na folha inteira (a propriedade e herdada, entao
   vale para todo texto dentro dela). Sem isto, uma sequencia longa SEM
   espaco - um codigo de peca, uma URL, um numero de norma colado no texto
   de garantia - empurra a folha para fora da largura dela: medido no
   navegador, uma palavra de 100 caracteres levou a folha de 836 px para
   1126 px, e o campo de texto de regra aceita 8000 caracteres. A folha e o
   que o CLIENTE recebe; ela nao pode depender de ninguem lembrar de nao
   colar um codigo comprido. `anywhere` (e nao `break-word`) porque so ele
   tambem encolhe a largura minima da celula da tabela de itens - que e por
   onde a folha estava crescendo. Achado 12 da revisao critica de
   06/09/2026. */
/* ---------------------------------------------------------------------
   A FOLHA DA PROPOSTA: UMA PAGINA, SEMPRE.

   Jeferson, 11/09/2026, comparando os dois modelos que a Roder usa hoje:
   o padrao antigo do servidor "tinha bastante informacao mas era um visual
   muito sujo, dificil de visualizar, carregado demais sem separacoes"; o
   que foi montado dentro do Agendor "ficou melhor de visualizar, porem
   usa mais de uma pagina, e o ideal e que o orcamento seja formatado em
   somente uma pagina, pois orcamento grande o cliente nao le tudo".

   Entao a folha tem as duas coisas ao mesmo tempo: todo o conteudo do
   padrao antigo, em blocos separados por regua e etiqueta, dentro de uma
   folha A4 unica.

   COMO A UNICA PAGINA E GARANTIDA. A variavel --pescala e um multiplicador
   que o app calcula DEPOIS de desenhar (fitarEmUmaPagina, em app.js): ele
   mede a altura real, divide pela altura util do A4 e, se passou, encolhe.
   Sem isso, "uma pagina" seria uma promessa que a terceira garra do
   orcamento quebra em silencio.

   A4 util: 210mm menos 10mm de margem de cada lado = 190mm de largura;
   297mm menos 10mm de cada lado = 277mm de altura.

   overflow-wrap:anywhere fica: o nome do item vem da planilha e o corpo de
   um bloco de regra aceita 8000 caracteres. Uma palavra de 100 caracteres
   ja levou a folha de 836 px para 1126 px (achado 12 da revisao critica de
   06/09/2026). --------------------------------------------------------- */
.paper{--pescala:1;--pw:190mm;--pline:#d9ded8;--pmuted:#6b736d;--pink:#15181a;--pink2:#454c47;
  background:#fff;color:var(--pink);border:1px solid var(--pline);border-radius:10px;
  box-sizing:border-box;padding:11mm 10mm 9mm;margin:0 auto;
  display:grid;gap:5.5mm;align-content:start;
  box-shadow:0 10px 34px -18px rgba(0,0,0,.45);
  font-family:Archivo,Arial,sans-serif;font-size:11px;line-height:1.42;
  overflow-wrap:anywhere;
  /* zoom, e nao transform:scale. O scale desenha por cima do que esta em
     volta e nao muda a altura que o elemento ocupa, entao a folha
     encolhida deixaria um buraco branco do tamanho da folha inteira. O
     zoom refaz o layout de verdade, e e ele que a impressao respeita.
     A largura e dividida pela escala justamente para voltar aos 190mm
     depois do zoom: encolher sem isto deixaria a folha estreita, com
     tarja branca na direita da pagina. */
  zoom:var(--pescala);width:calc(var(--pw) / var(--pescala));max-width:100%}
/* No celular a folha nao cabe em 190mm; ela vira fluida e a garantia de uma
   pagina passa a valer so na impressao, que e onde ela importa. */
@media (max-width:760px){
  .paper{width:100%;padding:18px 16px;gap:16px}
  /* O colgroup fixa 85mm para quatro colunas, e num telefone de 360px nao
     sobra largura para a descricao: a tabela saia para fora da folha.
     Rolar na horizontal dentro do proprio quadro e o que o projeto ja faz
     com conteudo largo. */
  .pitens{overflow-x:auto}
  /* Letra miuda demais no celular: o projeto exige 12,5px minimo, e estes
     estavam em 8,6px e 9px. */
  .paper .pcli b,.paper table.pit th,.paper .pcond b,.paper .plab{font-size:11px}
  .paper .passin>div{font-size:11.5px}
}

/* Etiqueta de bloco: e ela que faz a separacao que faltava no modelo antigo. */
.paper .plab{font-family:"IBM Plex Mono",monospace;font-size:.82em;letter-spacing:.13em;
  text-transform:uppercase;color:var(--pmuted);font-weight:600;display:block;margin:0 0 1.6mm}

/* cabecalho */
.paper .ph{display:grid;grid-template-columns:1fr auto;gap:8mm;align-items:start;
  border-bottom:1.5px solid var(--pink);padding-bottom:3.5mm}
.paper .ph img{width:34mm;display:block;margin-bottom:2mm}
.paper .ph .pemp{font-size:.86em;color:var(--pmuted);line-height:1.55}
.paper .ph .pemp b{color:var(--pink2);font-weight:600}
.paper .pnum{text-align:right;line-height:1.5}
.paper .pnum .pn{font-family:"IBM Plex Mono",monospace;font-size:1.75em;font-weight:700;
  letter-spacing:-.01em;color:var(--pink);display:block}
.paper .pnum .pt{font-family:"IBM Plex Mono",monospace;font-size:.82em;letter-spacing:.13em;
  text-transform:uppercase;color:var(--pmuted);display:block;margin-bottom:.5mm}
.paper .pnum .pd{font-size:.86em;color:var(--pmuted);display:block;margin-top:1.5mm}
.paper .pnum .pd b{color:var(--pink2);font-weight:600}

/* dados do cliente: rotulo em cima, valor embaixo, tres por linha */
.pcli{display:grid;gap:3mm 6mm;grid-template-columns:repeat(3,minmax(0,1fr));
  background:#f4f6f3;border:1px solid #e8ece6;border-radius:7px;padding:3.5mm 4mm}
.pcli>div{display:grid;gap:.6mm;min-width:0}
.pcli b{font-family:"IBM Plex Mono",monospace;font-size:.78em;letter-spacing:.12em;
  text-transform:uppercase;color:var(--pmuted);font-weight:600}
.pcli span{font-size:1em;color:var(--pink);font-weight:500;line-height:1.35}

/* ITENS: um quadro proprio, como o dos dados do cliente.
   Jeferson, 11/09/2026: "gostaria que voce desse um destaque para o quadro
   onde tem todos os itens do orcamento, assim como voce fez com o quadro
   dos dados do cliente".
   Fundo BRANCO com borda mais firme, e nao a mesma tarja cinza do bloco de
   cliente: dois quadros cinza empilhados tem o mesmo peso e nenhum dos
   dois se destaca. Branco com borda forte le como o painel principal da
   folha, que e o que esta sendo vendido.
   O total mora DENTRO deste quadro, no jeito de nota fiscal: o numero
   pertence a lista que o produziu, e juntar os dois poupa 5mm de altura. */
.pitens{border:1px solid #c6cfc4;border-radius:7px;padding:3mm 4mm}
/* A ultima linha da tabela encostaria a risca dela na risca do total, e
   sairiam duas linhas coladas. */
.pitens table.pit tbody tr:last-child td{border-bottom:0;padding-bottom:1mm}

/* itens */
table.pit{width:100%;border-collapse:collapse;table-layout:fixed}
table.pit th{font-family:"IBM Plex Mono",monospace;font-size:.78em;letter-spacing:.12em;
  text-transform:uppercase;color:var(--pmuted);text-align:left;font-weight:600;
  padding:0 2mm 1.8mm 0;border-bottom:1px solid var(--pline);white-space:nowrap}
table.pit td{padding:2.6mm 2mm 2.6mm 0;border-bottom:1px solid #eceee9;vertical-align:top}
table.pit th:last-child,table.pit td:last-child{padding-right:0}
table.pit .nm{font-weight:600;font-size:1.02em;line-height:1.3}
table.pit .cd{font-family:"IBM Plex Mono",monospace;font-size:.8em;color:var(--pmuted);
  display:block;margin-top:.6mm}
/* A descricao tecnica e TEXTO PARA LER, nao legenda. Subiu de .88em para
   .93em com mais entrelinha depois que o Jeferson pediu "uma encorpada em
   alguma parte dos textos": a folha inteira estava no mesmo peso, e o que
   descreve a maquina e justamente o que convence. O titulo do bloco entra
   correndo na propria linha, para nao gastar uma linha so com rotulo. */
table.pit .di{font-size:.93em;color:var(--pink2);margin-top:1.8mm;line-height:1.5;white-space:pre-wrap}
table.pit .di b{color:var(--pink);font-weight:600}
table.pit .nu{text-align:right;font-family:"IBM Plex Mono",monospace;white-space:nowrap;
  font-variant-numeric:tabular-nums}
table.pit .vt{font-weight:700}
/* A FOTO DO EQUIPAMENTO. Jeferson, 11/09/2026: "e necessario pelo menos a
   foto dos equipamentos principais". Ela era um selo de 20x15mm, do
   tamanho de um icone, para um cabecote de R$ 109 mil.
   `contain`, e nao `cover`: as fotos vieram do WhatsApp, em enquadramentos
   diferentes, e recortar para preencher corta justamente a garra ou o
   sabre. Melhor a maquina inteira com folga em cima do que meia maquina
   preenchendo o quadro.
   QUEM TEM FOTO E QUEM TEM FOTO NO CADASTRO. Kit de instalacao, suporte e
   frete simplesmente nao tem foto cadastrada, entao nao abrem espaco. A
   folha nao adivinha qual item e o principal: quem decide e quem cadastra
   o produto. */
table.pit .fo{width:32mm;height:24mm;object-fit:contain;background:#fff;border-radius:4px;
  border:1px solid var(--pline);float:left;margin:.5mm 3mm 1.5mm 0}

/* total */
/* TOTAL: uma regua e o numero a direita, no jeito de nota fiscal.
   A primeira versao era uma faixa preta de ponta a ponta com o valor em
   1,85em branco. Jeferson, 11/09/2026: "achei que o valor total ficou com
   um destaque muito grande". Ele estava certo por dois motivos: a faixa
   gritava mais que o equipamento que esta sendo vendido, e comia 12mm de
   altura que fazem falta quando o orcamento tem quatro itens em vez de
   dois. O valor continua sendo a coisa mais pesada da folha, so que por
   peso de tipo, e nao por fundo preto. */
.ptot{display:flex;justify-content:flex-end;align-items:baseline;gap:4mm;
  border-top:1.5px solid var(--pink);padding-top:2.5mm}
.ptot .lb{font-family:"IBM Plex Mono",monospace;font-size:.82em;letter-spacing:.13em;
  text-transform:uppercase;color:var(--pmuted)}
.ptot b{font-family:"IBM Plex Mono",monospace;font-size:1.4em;font-weight:700;
  letter-spacing:-.01em;color:var(--pink);font-variant-numeric:tabular-nums}

/* condicoes comerciais */
.pcond{display:grid;gap:2.5mm 5mm;grid-template-columns:repeat(3,minmax(0,1fr))}
.pcond>div{display:grid;gap:.6mm;min-width:0;border-left:2px solid #e3e7e1;padding-left:2.8mm}
.pcond b{font-family:"IBM Plex Mono",monospace;font-size:.78em;letter-spacing:.12em;
  text-transform:uppercase;color:var(--pmuted);font-weight:600}
.pcond span{font-size:.94em;color:var(--pink);line-height:1.38}

/* blocos de regra que vem do cadastro do produto (garantia, condicoes) */
.pregra{display:grid;gap:2.5mm;border-top:1px solid var(--pline);padding-top:3.5mm}
.pregra .rg{display:grid;gap:1.2mm}
.pregra .rg>div{font-size:.88em;color:var(--pink2);line-height:1.42}
.pregra .rg>div b{color:var(--pink);font-weight:600}

/* observacao livre do vendedor */
.pobs{background:#fdf6ec;border-left:3px solid #C2600C;border-radius:0 6px 6px 0;
  padding:2.8mm 3.5mm;font-size:.94em;color:#3d443f;line-height:1.45;white-space:pre-wrap}

/* letra miuda: ICMS, banco */
.pfine{font-size:.8em;color:var(--pmuted);line-height:1.45;border-top:1px solid var(--pline);
  padding-top:3mm}
.pfine b{color:var(--pink2);font-weight:600}

/* assinatura */
.passin{display:grid;grid-template-columns:1fr 1fr;gap:12mm;margin-top:2mm}
.passin>div{border-top:1px solid var(--pink);padding-top:1.5mm;text-align:center;
  font-size:.82em;color:var(--pmuted);line-height:1.4}
.passin>div b{display:block;color:var(--pink);font-weight:600;font-size:1.05em}

/* rodape */
.pfoot{border-top:1px solid var(--pline);padding-top:2.5mm;display:flex;
  justify-content:space-between;gap:6mm;flex-wrap:wrap;font-size:.78em;
  color:var(--pmuted);line-height:1.5}

/* AVISO DE QUE NAO COUBE. Aparece so na tela, nunca no papel: e recado para
   o vendedor, e nao para o cliente. */
.pestourou{background:#fdecec;border:1px solid #e8b4b4;border-radius:7px;padding:3mm 4mm;
  font-size:.9em;color:#8a2b2b;line-height:1.45}

/* ---------------------------------------------------------------------
   IMPRESSAO. A folha sai sozinha, sem nada do sistema em volta, em A4 com
   10mm de margem, que e exatamente a caixa para a qual a largura e a
   escala foram calculadas.
   --------------------------------------------------------------------- */
@page{size:A4;margin:10mm}
@media print{
  html,body{background:#fff;margin:0;padding:0}
  /* A LARGURA PRECISA SER DIVIDIDA PELA ESCALA, igual a regra de tela.
     Fixando 190mm com `zoom` em 0,8 o papel saia com 152mm e sobrava tarja
     branca a direita, que e exatamente o que a regra de tela tem o cuidado
     de evitar. E o padding FICA: zera-lo mudava a largura util do texto,
     entao a quebra de linha no papel era outra e a altura medida na tela
     nao valia para o papel. Achado pela revisao independente de
     11/09/2026. */
  .paper{border:0;border-radius:0;box-shadow:none;margin:0;
    width:calc(var(--pw) / var(--pescala));
    break-inside:avoid;page-break-inside:avoid}
  .pestourou{display:none !important}
  /* Fundo escuro da faixa de total: sem isto o Chrome imprime a faixa em
     branco e o valor, que e branco, some. */
  .ptot,.pcli,.pobs{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}
/* Mesma quebra da folha da proposta, agora na ficha do produto: o titulo do
   modal e o nome do item (que veio da planilha e pode ser qualquer coisa) e
   o corpo dos blocos de texto de regra sao os mesmos 8000 caracteres. Um
   modal que estoura a largura empurra o botao de fechar para fora da tela. */
#modal .mhead h3,
#modal .mbody{overflow-wrap:anywhere}

.qgrp{display:grid;gap:10px}
.qgrp > .lbl{padding-bottom:5px;border-bottom:1px solid var(--line-2)}
.qcard{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:15px 17px;display:grid;gap:9px;box-shadow:var(--sh)}
.qcard.done{box-shadow:inset 3px 0 0 var(--good),var(--sh)}
.qcard h4{margin:0;font-size:15px;font-weight:600;line-height:1.35}
.qcard .qc{font-size:13px;color:var(--muted);line-height:1.45}
.qcard .qa2{font-size:13.5px;color:var(--ink-2);background:var(--good-soft);border-radius:7px;padding:9px 11px;line-height:1.5}
.qcard .row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.vers{display:grid;gap:0;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.vers > div{display:grid;gap:3px;padding:11px 13px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.vers > div:last-child{border-bottom:0}
.vers > div.now{background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--accent)}
.vers .vt{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;font-size:13.5px}
.vers .vt b{font-weight:600}
.vers .vt .vv{margin-left:auto;font-family:"IBM Plex Mono",monospace;font-weight:600}
.vers .vl2{font-size:11.5px;color:var(--muted)}
.props{display:grid;gap:0;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.props > div{display:grid;gap:3px;padding:11px 14px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.props > div:last-child{border-bottom:0}
@media (min-width:620px){.props > div{grid-template-columns:190px 1fr;gap:16px;align-items:baseline}}
.props b{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600}
.props span{font-size:13.5px;color:var(--ink-2);line-height:1.5}
.prod:last-of-type{border-bottom:0}
.prod .pn{font-weight:500}
.prod input{background:var(--surface-2);border:1px solid var(--line);border-radius:6px;padding:5px 7px;font:inherit;font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:var(--ink);width:100%;text-align:right}
.tot{display:flex;justify-content:flex-end;gap:14px;align-items:baseline;padding-top:10px;font-family:"IBM Plex Mono",monospace}
.tot b{font-size:19px}
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(16px);background:var(--rail);color:#fff;padding:11px 18px;border-radius:9px;font-size:13.5px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:60;box-shadow:0 12px 30px -10px rgba(0,0,0,.6)}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
@media (prefers-reduced-motion:reduce){.toast{transition:none}}
.demo{width:calc(100% - 16px);margin:0 8px 10px;cursor:pointer;background:rgba(242,176,30,.12);border:1px solid rgba(242,176,30,.4);color:var(--roder);font-family:"IBM Plex Mono",monospace;font-size:9px;letter-spacing:.09em;text-transform:uppercase;padding:6px 9px;border-radius:6px;line-height:1.5;text-align:center}
@media (max-width:900px){.demo{display:none}}

/* ---- olho de ver a senha (src/public/olho-senha.js) -------------------
   Vale para os tres lugares onde existe campo de senha: os modais da
   aplicacao (o campo mora dentro de um `.cbox`, que e flex), a tela de
   entrar e a tela de redefinir senha (o campo mora solto dentro de um
   <label>). Por isso o embrulho e flex e ocupa a largura toda nos dois
   casos. O `padding-right` abre espaco para o botao nao ficar por cima do
   texto digitado. */
.campo-senha{position:relative;display:flex;align-items:center;flex:1;width:100%;min-width:0}
.campo-senha > input{flex:1;width:100%;min-width:0;padding-right:38px;box-sizing:border-box}
.campo-senha .olho-senha{position:absolute;right:4px;top:50%;transform:translateY(-50%);
  display:grid;place-items:center;width:30px;height:30px;padding:0;margin:0;border:0;border-radius:7px;
  background:none;color:var(--muted);cursor:pointer;line-height:0}
.campo-senha .olho-senha:hover{color:var(--ink);background:var(--surface-3)}
.campo-senha .olho-senha:focus-visible{outline:2px solid var(--accent);outline-offset:1px;color:var(--ink)}
.campo-senha .olho-senha[aria-pressed="true"]{color:var(--accent)}

/* ---- caixa de codigo para copiar (tela de Chaves de API) --------------
   Usada para mostrar a chave recem-criada e o exemplo pronto que o dono
   repassa para quem mexe no site. `white-space:pre-wrap` mais
   `word-break:break-all` porque uma chave de 50 caracteres sem espaco
   nenhum, num modal estreito, sairia da tela. `overflow-x:auto` segura o
   exemplo de curl, que tem linhas longas. */
.codigo{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;line-height:1.6;
  background:var(--surface-3);border:1px solid var(--line);border-radius:8px;padding:10px 12px;
  margin:0;white-space:pre-wrap;word-break:break-word;overflow-x:auto;color:var(--ink)}
.codigo.chave{word-break:break-all;font-size:13px;background:var(--accent-soft);border-color:var(--accent-line)}

/* =====================================================================
   O ATRELO NO CELULAR
   =====================================================================
   Ate aqui o layout so encolhia: em 900px o menu lateral virava uma
   fileira de 60px com icones sem nome, comendo espaco justamente na tela
   mais estreita. Abaixo de 700px ele deixa de ser coluna e vira gaveta.

   A barra de cima (.topo) so existe no celular, e e ela que abre a gaveta.
   No computador nada disso aparece e o layout continua exatamente igual.
   ===================================================================== */

.topo{display:none}
.railfundo{display:none}

@media (max-width:700px){
  /* Uma coluna so: a tela de trabalho fica com a largura inteira. */
  .app{grid-template-columns:1fr}

  /* A AREA DO RELOGIO DO CELULAR FICA NO `.main`, e nao no cabecalho.
     Jeferson, 12/09/2026, com foto: a tarja laranja de "WhatsApp ainda nao
     conectado" saia POR BAIXO do relogio e da bateria, ilegivel.
     A margem estava no `.topo`, que e o cabecalho escuro. So que a tarja e
     inserida ACIMA dele (primeiro filho de `.main`, em app.js), entao ela
     nao ganhava margem nenhuma e ainda sobrava um vao preto embaixo dela.
     Agora a margem e do `.main`, que e o que de fato encosta no topo da
     tela. Vale para quem estiver na frente, tarja ou cabecalho, e some o
     vao duplicado. `.main` nao rola (tem `overflow:hidden`), entao a
     margem nao vai embora com a rolagem.
     O `box-shadow` interno pinta essa faixa com o escuro do cabecalho, que
     e a mesma cor do `theme-color` do manifest: faixa clara deixaria os
     icones brancos do celular invisiveis. */
  .main{
    padding-top:env(safe-area-inset-top);
    box-shadow:inset 0 env(safe-area-inset-top) 0 var(--rail);
  }
  .topo{
    display:flex;align-items:center;gap:10px;flex:none;
    background:var(--rail);color:#fff;
    padding:8px 14px;
  }
  .topo b{font-size:16px;letter-spacing:-.02em}
  .topo .mark{width:26px;height:26px;border-radius:7px;background:var(--roder);
    display:grid;place-items:center;flex:none}
  .topo .mark svg{width:14px;height:14px}

  .hamb{
    width:40px;height:40px;margin-left:-8px;border-radius:9px;flex:none;
    display:grid;place-items:center;color:#fff;
  }
  .hamb svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
  .hamb:active{background:var(--rail-2)}

  /* A gaveta. Fica fora da tela e entra por cima, sem empurrar o conteudo. */
  .rail{
    position:fixed;top:0;bottom:0;left:0;width:272px;max-width:86vw;z-index:60;
    padding-top:calc(14px + env(safe-area-inset-top));
    /* Sem isto o "Sair" fica embaixo da barrinha de gestos do iPhone. */
    padding-bottom:calc(14px + env(safe-area-inset-bottom));
    transform:translateX(-100%);
    transition:transform .22s ease;
    box-shadow:0 0 40px rgba(0,0,0,.4);
  }
  .app.menu-aberto .rail{transform:translateX(0)}

  .railfundo{
    display:block;position:fixed;inset:0;z-index:55;
    background:rgba(0,0,0,.45);
    opacity:0;transition:opacity .22s ease;
  }
  .app.menu-aberto .railfundo{opacity:1}

  /* Na gaveta cabe tudo de novo: nome do item, secoes e a pessoa logada.
     Isto desfaz o que a regra de 900px tinha escondido. */
  .nav span.t,.brand div,.navsec{display:block}
  .nav{justify-content:flex-start}
  .nav .badge{display:grid}
  .railfoot .who b,.railfoot .who small{display:block}
  .switch{display:flex}

  /* Alvo de dedo: 44px e o minimo que a Apple recomenda, e o vendedor usa
     isto de pe, no ptio, com luva as vezes. */
  .nav{padding:11px 12px;font-size:15px}
}

@media (max-width:700px) and (prefers-reduced-motion:reduce){
  .rail,.railfundo{transition:none}
}

/* ---------------------------------------------------------------------
   CONVERSA NO CELULAR
   ---------------------------------------------------------------------
   Tres correcoes de espaco, todas so no telefone. No computador nada
   muda: la sobra largura e a lista de clientes ja fica sempre a vista.

   1. O cabecalho da conversa quebrava em tres linhas (voltar, depois nome
      e telefone, depois os quatro botoes) e comia um terco da tela antes
      da primeira mensagem.
   2. Os seis botoes em cima do campo de escrever ocupavam mais tres
      linhas. Agora vivem atras do "+ Mais".
   3. A lista de clientes sumia inteira. Com o botao de fixar ela volta
      como uma faixa estreita de rostos, com a bolinha de nao lida, e o
      vendedor troca de cliente sem sair da conversa.
   --------------------------------------------------------------------- */

/* Fora do celular os botoes do "+" ficam todos soltos na linha, como antes. */
.acoes{display:contents}
.btn.mais{display:none}

@media (max-width:820px){
  .thead{padding:7px 12px;gap:8px}
  .thead h3{font-size:14.5px}
  .thead .meta{font-size:11px;flex-wrap:nowrap;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* Os quatro botoes de acao numa faixa que rola de lado, em vez de
     quebrarem em mais uma linha. */
  .tact{margin-left:auto;flex-wrap:nowrap;overflow-x:auto;gap:6px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;max-width:100%}
  .tact::-webkit-scrollbar{display:none}
  .tact .btn{white-space:nowrap;padding:6px 10px;font-size:12.5px}

  /* O "+ Mais" aparece e os seis botoes se escondem atras dele. */
  .btn.mais{display:inline-flex}
  .acoes{display:none}
  .crow.aberto .acoes{display:flex;flex-wrap:wrap;gap:7px;width:100%;margin-top:2px}

  .autobar{padding:7px 10px;gap:7px}
  .autobar .txt{min-width:0;font-size:12.5px}
  /* A explicacao longa do Consultor some SO no celular. No computador ela
     continua inteira, exatamente como antes. */
  .soLargura{display:none}

  /* Faixa de clientes fixa. Reaproveita a MESMA lista da tela cheia, so
     que estreita: um rosto por cliente, com a bolinha de nao lida presa
     no canto. Reaproveitar em vez de desenhar outra lista significa que o
     clique, a busca e o destaque do cliente aberto ja funcionam. */
  .conv.fixa{grid-template-columns:66px 1fr}
  .conv.fixa .list{display:flex;position:static;border-right:1px solid var(--line)}
  .conv.fixa .listhead{display:none}
  .conv.fixa .thread{visibility:visible}
  .conv.fixa #mobback{display:none}
  .conv.fixa .item{grid-template-columns:1fr;justify-items:center;
    gap:0;padding:9px 0;position:relative}
  .conv.fixa .item .av{width:40px;height:40px;font-size:13px}
  .conv.fixa .item[aria-current="true"]{box-shadow:inset 3px 0 0 var(--accent)}
  /* O bloco de texto continua no HTML, mas sem ocupar espaco: e dentro
     dele que vive a bolinha de nao lida, que precisa continuar visivel. */
  .conv.fixa .item > span:last-child{width:0;height:0;overflow:visible}
  .conv.fixa .item .top,
  .conv.fixa .item .pv,
  .conv.fixa .item .mt .pill{display:none}
  .conv.fixa .item .unread{position:absolute;top:5px;right:10px;z-index:2}
}

/* No computador o botao de fixar nao serve para nada: a lista ja esta la. */
@media (min-width:821px){
  #btnFixarLista{display:none}
}
#btnFixarLista[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent-2)}

/* ---------------------------------------------------------------------
   CELULAR, SEGUNDA PASSADA
   ---------------------------------------------------------------------
   Medido com navegador de verdade em 390x844 (iPhone 13), 320x568
   (iPhone SE) e 390x430 (teclado aberto). Tudo aqui e dentro de media
   query: no computador, em 1440x900, as medidas nao mudam um pixel.
   --------------------------------------------------------------------- */

/* 1. A CAIXA DE ESCREVER SUMIA DA TELA.
      `.app` tem `min-height:640px`. Num iPhone SE, que tem 568px de
      altura, o app fica 72px mais alto que a tela e o campo de escrever
      com o botao de enviar param 62px ABAIXO da borda. Com o teclado
      aberto (sobram ~430px) o desvio vira 210px. E por isso que parecia
      que "sumiu o botao de enviar".
      `100dvh` resolve tambem a barra do Safari do iPhone, que encolhe a
      tela ao rolar e empurrava o compositor para fora. */
@media (max-width:700px){
  .app{min-height:0;height:100vh;height:100dvh}
}

/* 2. Cabecalho da conversa: de TRES linhas para DUAS.
      A primeira linha tinha so o "voltar" e o "fixar", sozinhos, e a
      conversa comecava a 136px do topo.
      `.who2` sem `flex` usava o tamanho do nome inteiro como base e por
      isso pulava de linha. Com `flex:1 1 0` ele encolhe e sobe.
      O telefone e o responsavel NAO sao escondidos: a ficha lateral ja
      e `display:none` abaixo de 1280px, entao no celular esta linha e o
      unico lugar onde essa informacao existe. */
@media (max-width:820px){
  .thead{padding:6px 12px;gap:8px;align-items:center}
  .thead .who2{flex:1 1 0;min-width:0;gap:9px}
  .thead .av{width:32px;height:32px;font-size:11.5px}
  .thead h3{font-size:14.5px;line-height:1.25}
  .thead .meta{line-height:1.25}
  .tact{flex:0 0 auto}

  /* 8. Mais largura para o texto da mensagem: a bolha era 250px de 390
        (64% da tela), porque `.msgs` gastava 26px de cada lado e a bolha
        parava em 74%. */
  .msgs{padding:12px}
  .b{max-width:92%}
  .b.note,.b.call,.b.mail{max-width:96%}
}

/* 3. O compositor por baixo da barrinha de gestos do iPhone.
      `env(safe-area-inset-bottom)` so existia na gaveta. O manifest e
      `display:standalone` e o viewport e `viewport-fit=cover`: instalado
      na tela de inicio, o campo e o botao de enviar ficavam por baixo da
      barra de gestos. */
@media (max-width:700px){
  .composer{padding-bottom:calc(10px + env(safe-area-inset-bottom))}
}

/* 4. Consultor no iPhone SE: o botao "Perguntar" ficava fora da tela.
      Um `<input>` tem largura minima propria (~173px) que nao encolhe
      sozinha, e somada ao botao empurrava a coluna para 356px numa tela
      de 320. */
.ask .box input{min-width:0}
.cgrid{grid-template-columns:minmax(0,1fr)}

/* 5. Modal no celular vira folha de baixo.
      No SE o cabecalho do orcamento ocupava 266px de um modal de 500px:
      sobravam 34px de conteudo, ou seja, abria o orcamento e nao via
      nenhum item. */
@media (max-width:700px){
  .ov{padding:0;place-items:end stretch}
  .modal,.modal.wide{width:100%;max-height:94vh;border-radius:14px 14px 0 0}
  .mhead{padding:11px 14px;gap:10px;flex-wrap:nowrap;align-items:center}
  .mhead h3{font-size:16px}
  .mhead .sub{display:none}
  .mbody{padding:14px}
  .mfoot{padding:10px 14px;padding-bottom:calc(10px + env(safe-area-inset-bottom))}
}

/* 6. Na tarja do Consultor o texto ficava pintado POR BAIXO do botao:
      `min-width:0` deixava a caixa encolher para 26px enquanto o texto
      continuava ocupando 63px, e `overflow` seguia visivel. */
@media (max-width:820px){
  .autobar{flex-wrap:wrap}
  .autobar .txt{flex:1 1 100%}
  .autobar .btn{flex:1;justify-content:center}
}

/* 9. Funil e Painel: os cartoes de numero empilhavam um embaixo do
      outro. No Funil isso dava 438px de cartoes e o primeiro negocio so
      comecava a 731px de 844: abria a tela e nao via funil nenhum. */
@media (max-width:700px){
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:14px}
  .kpi{padding:10px 12px}
  .kpi b{font-size:18px}
}

/* 11. Alvo de dedo. O minimo da Apple e 44px, e isto e usado de pe, no
       patio. O pior era a caixinha de "mostrar desativados", com 13px. */
@media (max-width:820px){
  .mobback{width:40px;height:40px}
  .send{width:42px;height:42px}
  .send svg{width:17px;height:17px}
  .chipbtn,.tab{min-height:34px;display:inline-flex;align-items:center;padding:7px 12px;font-size:12.5px}
  .modal .x,.mhead .x{width:42px;height:42px}
  .srch{padding:9px 10px}
  input[type=checkbox]{width:20px;height:20px}
}

/* 13. Letra miuda demais no celular. Tudo que estava em 9,5 a 11,5px
       sobe para 12 a 12,5px. */
@media (max-width:820px){
  .pill{font-size:11px}
  .lbl{font-size:11px}
  .b .ts{font-size:11px}
  .thead .meta{font-size:12px}
  .conn{font-size:12px}
  thead th{font-size:11px}
}

/* 12. Modo escuro: o "Ganhar" era branco sobre verde claro, contraste
       2,23:1 - abaixo ate do minimo de 3:1. E o botao mais importante do
       cabecalho. Texto escuro resolve sem trocar a cor do botao. */
@media (prefers-color-scheme:dark){
  :root[data-theme="auto"] .btn.win{color:#0F1712}
}
:root[data-theme="dark"] .btn.win{color:#0F1712}

/* 14. Os itens do orcamento no celular viravam uma pilha de campos sem
       dizer qual era quantidade, valor e desconto: `.prodh` so aparece a
       partir de 720px. Aqui cada campo ganha o proprio rotulo. */
@media (max-width:719px){
  .prod{grid-template-columns:1fr;gap:6px;padding:12px 0}
  .prod input{text-align:left}
  .prod > *[data-rot]::before{
    content:attr(data-rot);display:block;
    font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.1em;
    text-transform:uppercase;color:var(--muted);margin-bottom:3px;
  }
  .prod .pv{text-align:left}
}

/* 17. As caixas de explicacao comiam a primeira tela inteira em
       Produtos, Equipe e Consultor antes de qualquer conteudo. */
@media (max-width:820px){
  .soLargura{display:none}
}

/* O rotulo de cada campo do item do orcamento. Um `::before` nao pinta
   dentro de um `<input>`, entao cada campo vai dentro de um `<span>` que
   carrega o rotulo. No computador o rotulo fica escondido: la a linha de
   cabecalho `.prodh` ja diz o que e cada coluna. */
.prod .pc{display:block;min-width:0}
.prod .pc::before{display:none}
@media (max-width:719px){
  .prod .pc::before{display:block}
}

/* 10. A tabela de clientes no celular: 805px de tabela dentro de uma
       caixa de 338px. Rolava de lado, mas mostrava DUAS colunas de oito,
       sem nenhum sinal de que existiam mais seis.
       Escondo as tres que menos decidem alguma coisa no telefone:
       Maquina (o resumo cabe na ficha), Ultimo contato e "Em aberto",
       que hoje e sempre um traco. Ficam Cliente, Cidade, Situacao, Quem
       atende e o botao - e ai a tabela cabe na tela sem rolar de lado. */
@media (max-width:700px){
  table{min-width:0;font-size:13px}
  th,td{padding:9px 10px}
  /* So a tabela de clientes. O relatorio (#relTabela) monta as colunas
     na hora, conforme o que a pessoa pediu, e esconder a quarta la
     esconderia uma coluna diferente a cada relatorio. */
  #tabelaClientes tr > *:nth-child(4),
  #tabelaClientes tr > *:nth-child(6),
  #tabelaClientes tr > *:nth-child(7){display:none}
  #clientes .chipbtn{font-size:11.5px;padding:6px 9px}
}

/* ---------------------------------------------------------------------
   CELULAR, TERCEIRA PASSADA: FUNIL E BUSCAS
   ---------------------------------------------------------------------
   Medido em 390x844, 320x568 e 1440x900. Todo bloco daqui para baixo que
   mexe em layout esta dentro de media query de celular: em 1440x900 as
   caixas continuam com os mesmos numeros de antes.
   --------------------------------------------------------------------- */

/* 18. Campos e blocos que existem SO no telefone.
       O padrao do projeto e o contrario (`.soLargura`, que some no
       celular). Aqui e um bloco que so nasce no celular: a busca de lista
       e o seletor de etapa do funil. No computador ele nao ocupa um pixel,
       entao nenhuma tela de 1440 muda de altura por causa dele.
       `[hidden]` precisa vencer o `display:grid` de baixo: regra de autor
       ganha da regra do navegador, e sem esta linha o aviso de "nada
       encontrado" ficaria visivel sempre. */
.socelular{display:none}
.socelular[hidden]{display:none}
@media (max-width:820px){
  .socelular{display:grid;gap:9px;margin-bottom:12px}
}

/* 19. Uma etapa por vez no funil do celular.
       Antes: `#board` tinha 1036px de conteudo dentro de 338px de caixa e
       rolava de lado. A pessoa via a primeira etapa e um pedaco da segunda,
       e nada na tela dizia que existiam mais duas. Alem disso a unica forma
       de mover um negocio era arrastar, que em tela de toque nao acontece:
       o dedo rola a pagina antes de o `dragstart` sair.
       Agora: os chips escolhem a etapa, a coluna dessa etapa ocupa a
       largura toda, e mover de etapa e um botao dentro do negocio. */
.etapasel{display:flex;gap:7px;overflow-x:auto;padding-bottom:4px}
.etapasel::-webkit-scrollbar{height:0}
.etapasel .chipbtn{flex:0 0 auto;white-space:nowrap}
.etapasel .chipbtn .n{font-family:"IBM Plex Mono",monospace;opacity:.65;margin-left:5px}

/* 820 e nao 700 de proposito: o seletor de etapa (`#funilCelular`) nasce em
   820. Se o quadro so virasse uma coluna em 700, entre 701 e 820 os chips
   apareceriam com quatro colunas na tela e escolher uma etapa nao mudaria
   nada - um botao que nao faz nada. As duas regras andam juntas. */
@media (max-width:820px){
  .board{display:block;overflow-x:visible;padding-bottom:0}
  /* Sem `.ativa` nenhuma coluna aparece. Quem carimba a classe e
     pintarFunil(), que tambem pinta os chips: as duas coisas saem do
     mesmo lugar e nao tem como uma escolher uma etapa e a outra outra. */
  .board .col{display:none}
  .board .col.ativa{display:grid;width:auto;min-width:0;padding:9px;background:none;border:0}
  .board .col.ativa .colh{padding:0 2px}
  .board .col.ativa .deal{padding:12px}

  /* Os quatro cartoes de numero somavam 197px ANTES do quadro: o primeiro
     negocio comecava a 430px de uma tela de 844, metade da tela gasta em
     numero antes de aparecer trabalho. Eles nao somem, descem: quem abre o
     funil no telefone vem trabalhar negocio, e a soma da etapa ja esta no
     cabecalho da coluna. `order` so funciona em container flex, por isso o
     `.pad` desta tela vira coluna flex - e so desta tela. */
  #s-funil .pad{display:flex;flex-direction:column}
  #s-funil .head,#s-funil #funilCelular{order:0}
  #s-funil #board{order:1}
  #s-funil #funilKpis{order:2;margin:18px 0 0 !important}
  /* A frase manda arrastar, e no telefone arrastar nao existe. */
  #s-funil .head .sub{display:none}
}

/* 20. Mover de etapa sem arrastar.
       Os chips ficam dentro do negocio aberto, entao servem igual no
       computador (onde arrastar funciona) e no telefone (onde nao). */
.moveretapa{display:flex;gap:7px;flex-wrap:wrap;margin-top:8px}
.moveretapa .chipbtn[aria-pressed="true"]{cursor:default}

/* 21. A tabela de clientes AINDA nao cabia no telefone.
       A passada anterior escondeu tres colunas e mesmo assim sobraram
       538px de conteudo dentro de uma caixa de 338px: a situacao sozinha
       pede 148px ("Cliente efetivo" nao quebra linha) e o botao de
       historico ficava sempre fora da tela, do lado direito, sem nada
       indicando que existia. Aqui a linha da tabela vira cartao: nome na
       primeira linha, cidade / situacao / quem atende na segunda, botao na
       terceira. As tres colunas que a passada anterior escondeu continuam
       escondidas - o motivo delas nao mudou. */
@media (max-width:700px){
  #tabelaClientes{display:block}
  #tabelaClientes thead{display:none}
  #tabelaClientes tbody{display:block}
  #tabelaClientes tbody tr{
    display:flex;flex-wrap:wrap;align-items:center;gap:5px 10px;
    padding:12px 12px 11px;border-bottom:1px solid var(--line);
  }
  #tabelaClientes tbody tr:last-child{border-bottom:0}
  #tabelaClientes td{display:block;padding:0;border:0;width:auto;min-width:0}
  /* Nome e botao ocupam a linha inteira; o resto se acomoda no meio. */
  #tabelaClientes td:nth-child(1){flex:1 1 100%;line-height:1.3}
  #tabelaClientes td:nth-child(8){flex:1 1 100%;margin-top:3px}
  #tabelaClientes td:nth-child(8) .chipbtn{width:100%;justify-content:center}
  /* A linha de "nenhum cliente encontrado" e um td com colspan: como
     cartao ela precisa ocupar a largura toda, senao vira um risco. */
  #tabelaClientes td[colspan]{flex:1 1 100%;padding:0}
}

/* 22. O chip escolhido nao parecia escolhido.
       `.chipbtn` nunca teve regra para `aria-pressed="true"`: nas situacoes
       de Clientes, nas abas de Minha fila, na escolha de etapa do Novo
       negocio e agora no seletor de etapa do celular, o chip LIGADO ficava
       com exatamente a mesma cara do desligado. A lista filtrava e nada na
       tela dizia por qual filtro - no telefone, onde a lista inteira nao
       cabe, isso vira "sumiram meus clientes".
       So cor e borda: nenhuma caixa muda de tamanho nem de lugar, nem no
       telefone nem no computador. */
.chipbtn[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent-2)}

/* 23. As caixas do Consultor saiam pela direita no iPhone SE.
       `.kbox` e `.panelbox` sao grid sem `grid-template-columns`: o unico
       trilho e dimensionado pelo filho mais largo. Num iPhone SE o campo de
       perguntar mede 281px de min-content dentro de uma caixa de 268, e o
       trilho vira 281: a caixa fica do tamanho certo mas o conteudo pinta
       13px alem da borda, cortado. `minmax(0,1fr)` prende o trilho na
       largura da caixa e obriga o filho a encolher. E o mesmo remedio que a
       passada anterior deu ao `.cgrid`. Num monitor as caixas ja sao mais
       largas que o conteudo, entao la a regra nao teria efeito nenhum - por
       isso mesmo ela fica dentro da media query. */
@media (max-width:820px){
  .kbox,.panelbox,.ask{grid-template-columns:minmax(0,1fr)}
  /* Um nome de arquivo ou uma URL sem espaco nao quebra sozinho e
     empurraria a caixa de novo. */
  .qa,.kbox .mini{overflow-wrap:anywhere}
}

/* 24. As tabelinhas do Painel da gerencia cortavam o numero.
       "51 dias além" com `white-space:nowrap` pede 106px de largura fixa,
       e a tabela de recompra ficava com 316px dentro de uma caixa de 234:
       o vendedor via o nome do cliente e nao via o numero, que e a unica
       razao de aquela linha existir. No computador continua nowrap, que la
       e o certo: sobra largura e o numero alinhado na direita se le melhor. */
@media (max-width:700px){
  .panelbox td.n{white-space:normal}
  .panelbox th,.panelbox td{padding:8px 6px}
}

/* 25. "Mostrar desativados" ainda era um alvo de 20px de altura.
       A passada anterior aumentou a caixinha de 13 para 20px, mas quem
       recebe o toque e o rotulo inteiro, e ele continuava rasteiro. Dar
       altura ao rotulo aumenta a area de acerto sem mexer na caixinha. */
@media (max-width:820px){
  #s-equipe .head label.mini{min-height:44px}
}

/* 26. A ficha do negocio aberto no iPhone SE.
       `abrirNegocioModal` escreve `style="grid-template-columns:140px 1fr"`
       na lista de dados. Numa tela de 320 sobram 130px para o valor, e o
       nome de um cliente de razao social longa desce por seis linhas: a
       ficha inteira vira uma coluna de nome. O 96px que ja e o padrao do
       `.kv` cabe melhor. O `!important` existe porque o 140 vem de um
       `style=` no app.js - mexer la mudaria tambem o computador, que e
       justamente onde o 140 esta certo. */
@media (max-width:700px){
  .modal .kv{grid-template-columns:minmax(0,96px) minmax(0,1fr) !important}
  /* Mesmo trilho de max-content do `.kbox`: um anexo com nome comprido
     esticaria o corpo do modal para fora da tela. */
  .mbody{grid-template-columns:minmax(0,1fr)}
}

/* ---------------------------------------------------------------------
   COMPUTADOR, QUARTA PASSADA
   ---------------------------------------------------------------------
   Medido com navegador de verdade em 1024x768, 1366x768, 1440x900,
   1920x1080 e 2560x1440, sempre com getBoundingClientRect. Toda regra de
   layout daqui para baixo esta dentro de `min-width:821px` ou de uma
   faixa maior: em 390x844 e em 320x568 nenhuma caixa muda de tamanho nem
   de lugar. As poucas regras que ficam fora de media query sao de COR, e
   cor nao mexe em caixa nenhuma.
   --------------------------------------------------------------------- */

/* 27. O QUADRO DO FUNIL ROLAVA DE LADO NO NOTEBOOK ESTREITO.
       `.col` era `width:250px;min-width:250px;flex:none`, ou seja, quatro
       colunas de tamanho fixo. Em 1024x768 o `#board` tem 760px de caixa e
       1036px de conteudo: a quarta etapa ficava inteira fora da tela (a
       borda direita da ultima coluna caia em 1274 numa janela de 1024) e
       nada na tela dizia que ela existia. Em 821px o buraco e maior ainda.
       Do outro lado, num monitor de 1920 as quatro colunas continuavam com
       250px cada e sobravam 620px de vazio na direita; em 2560, 1260px.
       Com `flex:1 1 250px` a coluna encolhe quando falta largura e estica
       quando sobra. O piso de 170px existe para o caso de um funil com
       muitas etapas: ai o quadro volta a rolar de lado, que e o certo,
       em vez de espremer oito colunas ilegiveis.
       Medido depois: 1024 -> 4 colunas de 181px, sem rolagem; 1920 -> 405px
       cada, quadro cheio. O celular nao entra aqui: abaixo de 820px vale a
       regra 19, que mostra uma etapa por vez. */
@media (min-width:821px){
  .board .col{width:auto;min-width:170px;flex:1 1 250px}
}

/* 28. A TABELA DE CLIENTES NAO CABIA ENTRE 821 E ~1070px.
       A tabela pede 805px de conteudo (a coluna "Situacao" sozinha leva
       140px porque "Cliente efetivo" nao quebra linha) e em 1024x768 a
       caixa `.tw` tem 758px: o botao de historico, que e a unica acao da
       linha, ficava cortado na direita e so aparecia rolando a tabela de
       lado - coisa que ninguem descobre com mouse.
       Escondo a coluna "Maquina" (102px), a mesma que a passada do celular
       ja esconde e pelo mesmo motivo: o resumo das maquinas esta na ficha
       do cliente, e aqui ele so serve de enfeite. Sem ela sao 703px, que
       cabem ate em 821px de janela (onde a barra lateral encolhe para 60px
       e a caixa fica com 707px). */
@media (min-width:821px) and (max-width:1099px){
  #tabelaClientes tr > *:nth-child(4){display:none}
}

/* 29. AS TABELINHAS DO PAINEL CORTAVAM O NUMERO EM 1024.
       `.grid2` vira duas colunas a partir de 1000px. Em 1024 cada caixa
       fica com 339px e a tabela de recompra pede 350: "51 dias alem" tem
       `white-space:nowrap` e empurra. E o mesmo defeito que a regra 24
       corrigiu no celular, so que na faixa de cima. Acima de 1180px cada
       caixa passa de 450px e o nowrap volta a ser o certo, porque numero
       alinhado na direita se le melhor. */
@media (min-width:1000px) and (max-width:1179px){
  .panelbox td.n{white-space:normal}
  .panelbox th,.panelbox td{padding:9px 8px}
}

/* 30. AS BUSCAS SO EXISTIAM NO TELEFONE.
       `#buscaFila`, `#buscaFunil`, `#buscaClientes` e `#buscaEquipe` vivem
       dentro de `.socelular`, que e `display:none` fora do celular. O
       filtro em si e JavaScript e nao olha o tamanho da tela: quem estava
       no computador simplesmente nao tinha campo nenhum para digitar. Numa
       carteira de centenas de clientes, ou num funil de dezenas de
       negocios, achar alguem no computador era rolar no escuro - o mesmo
       problema que motivou o campo no celular.
       No computador o campo fica estreito (340px) porque a lista inteira ja
       esta na tela: ele e atalho, nao a unica porta.
       O `[hidden]` continua vencendo: `[hidden]{display:none!important}` no
       topo do arquivo segura os avisos de "nada encontrado". */
@media (min-width:821px){
  .socelular{display:grid;gap:9px;margin-bottom:12px;max-width:340px}
  .socelular .srch{padding:6px 10px}
  /* Os chips de etapa NAO: no computador as quatro colunas estao todas na
     tela, entao escolher uma etapa nao mudaria nada. Seriam quatro botoes
     que nao fazem nada. */
  #funilCelular .etapasel{display:none}
}

/* 31. CONVERSA NUM MONITOR LARGO: AS BOLHAS NOS DOIS EXTREMOS.
       Em 2560x1440 a area de mensagens fica com 1736px de largura e a
       bolha para em 620px (`max-width:min(620px,74%)`). O que entra encosta
       na esquerda, o que sai encosta na direita, e sobra meio metro de
       fundo quadriculado no meio: ler a conversa vira virar a cabeca de um
       lado para o outro.
       O `max()` prende o texto numa coluna de 1100px no centro sem tocar em
       tela nenhuma menor: em 1920 a area de mensagens tem 1096px, a conta
       da (1096-1100)/2 e negativa e o padding continua sendo os mesmos
       26px de sempre. Por isso a faixa comeca em 1441px, e nao antes. */
@media (min-width:1441px){
  .msgs{padding-left:max(26px,calc((100% - 1100px) / 2));
        padding-right:max(26px,calc((100% - 1100px) / 2))}
}

/* 32. ACIMA DE 2000px O CONTEUDO VIRAVA UMA FAIXA COLADA NA ESQUERDA.
       Em 2560x1440 o `.pad` tem 2348px de largura util. A fila de tarefas
       (`max-width:900px`) ficava numa tira de 900px encostada na esquerda,
       com 1400px de nada do lado, e a linha da tabela de clientes ficava
       tao comprida que o olho perdia a linha voltando para a esquerda.
       Prender em 1780px e centralizar da a mesma tela de um monitor de
       1920 bem aproveitado. Comeca em 2000px de proposito: em 1920 o `.pad`
       mede 1708px e nao encosta no teto, entao la nada muda.
       A tela de conversa nao entra: ela nao usa `.pad`, e as tres colunas
       dela ganham espaco na regra 33. */
@media (min-width:2000px){
  .pad{max-width:1780px;margin-left:auto;margin-right:auto;width:100%}
  /* A fila de tarefas tambem pode respirar: dentro de 1780px uma coluna de
     1120px ainda e uma linha de leitura confortavel e cabe muito mais
     titulo de tarefa sem quebrar. */
  .fila{max-width:1120px}
}

/* 33. NUM MONITOR MUITO LARGO, A LISTA E A FICHA FICAVAM MAGRAS.
       `.conv` e `296px 1fr 316px`: em 2560 as duas laterais continuavam do
       mesmo tamanho de um notebook e todo o espaco extra ia para o meio,
       que a regra 31 acabou de limitar em 1100px. Aqui o espaco sobrando
       vai para onde rende: nome de cliente inteiro na lista (razao social
       de verdade tem 60 caracteres) e a ficha lateral com as maquinas
       cabendo sem quebrar. */
@media (min-width:2000px){
  .conv{grid-template-columns:360px 1fr 400px}
}

/* 34. NOTEBOOK BAIXO: A PRIMEIRA TELA ERA QUASE SO CABECALHO.
       Medido em 1366x768, que e o notebook mais comum aqui e o mais
       apertado em altura:
         Painel   - a faixa de oito cartoes de numero quebrava em DUAS
                    linhas (213px) e o primeiro quadro util so comecava em
                    326px de 768: 43% da tela gasta antes do conteudo.
         Produtos - a caixa de explicacao levava 123px e a lista comecava
                    em 276px.
         Equipe   - explicacao de 103px, lista em 214px.
         Funil    - cartoes de numero de 101px, quadro em 210px.
       Nada disso e erro em 1440x900 para cima, entao a regra e presa a
       `max-height:820px`: e a altura, nao a largura, que aperta.
       O `min-width:1000px` existe para nenhum telefone deitado entrar
       aqui (o maior iPhone deitado tem 932px). */
@media (min-width:1000px) and (max-height:820px){
  .pad{padding:16px 26px}
  .h1{font-size:19.5px}
  .head{margin-bottom:13px}
  .kpis{gap:10px;margin-bottom:14px}
  .kpi{padding:10px 13px}
  .kpi b{font-size:19px}
  .advice{padding:11px 13px;gap:6px}
  .advice p{font-size:13px;line-height:1.42}
}

/* 35. O MODAL DESPERDICAVA 92px DE ALTURA JUSTO NA TELA MAIS BAIXA.
       `max-height:88vh` numa janela de 768px da 676px de modal dentro de
       728px disponiveis. No orcamento, que tem 1015px de conteudo e e o
       maior modal do sistema, esses 52px sao mais uma linha e meia de item.
       O rodape ja e `position:sticky;bottom:0`, entao os botoes continuam
       alcancaveis em qualquer altura - isso foi medido e estava certo. */
@media (min-width:1000px) and (max-height:860px){
  .ov{padding:16px}
  .modal,.modal.wide{max-height:calc(100vh - 32px)}
}

/* ---------------------------------------------------------------------
   COMPUTADOR, QUARTA PASSADA: CONTRASTE
   ---------------------------------------------------------------------
   Medido com a conta da WCAG (razao de luminancia relativa) em cima da
   cor que o navegador realmente pinta, nos dois temas, em nove telas.
   Nada aqui e media query e nada aqui muda uma caixa de lugar: e so cor.
   Vale igual no telefone e no computador, que e como contraste deve ser.
   --------------------------------------------------------------------- */

/* 36. NO TEMA ESCURO A BOLINHA DE NAO LIDAS ERA ILEGIVEL.
       Branco sobre `--good` escuro (#7FBB90) da 2,23:1. O minimo da WCAG
       para texto pequeno e 4,5:1, e essa bolinha e o numero que diz quantas
       mensagens o cliente mandou sem resposta - o sinal mais importante da
       lista. Tinta escura sobre o mesmo verde da 8,17:1, sem trocar a cor
       do aviso. E o mesmo remedio que a regra 12 deu ao botao "Ganhar".
       O mesmo verde carrega o icone de enviar e o de tocar o audio: icone
       tambem tem minimo (3:1 na WCAG 1.4.11) e branco sobre esse verde nao
       chegava la. */
@media (prefers-color-scheme:dark){:root[data-theme="auto"]{
  .unread{color:#0F1712}
  .send svg{stroke:#0F1712}
  .play svg{fill:#0F1712}
}}
:root[data-theme="dark"] .unread{color:#0F1712}
:root[data-theme="dark"] .send svg{stroke:#0F1712}
:root[data-theme="dark"] .play svg{fill:#0F1712}

/* 37. O BOTAO PRINCIPAL FALHAVA NOS DOIS TEMAS.
       `.btn.pri` e "+ Novo negocio", "+ Nova pessoa", "Salvar", "Enviar
       orcamento" - o botao que fecha cada tela. Era branco sobre
       `--accent`, e `--accent` muda com o tema:
         claro  #C2600C com texto branco -> 4,22:1 (precisa de 4,5)
         escuro #E39A3B com texto branco -> 2,35:1
       No claro nao da para clarear a letra (ja e branca), entao escurece o
       laranja um tom so no botao: 4,93:1. No escuro o laranja e claro, e
       quem tem que mudar e a letra: tinta escura da 7,54:1.
       Ficam dois tokens proprios em vez de mexer em `--accent`, que
       tambem pinta o contorno de foco, a barrinha do painel e a marca da
       aba escolhida - lugares onde a cor de hoje esta certa. */
:root{--pri:#B25708;--pri-ink:#FFFFFF}
@media (prefers-color-scheme:dark){:root[data-theme="auto"]{--pri:#E39A3B;--pri-ink:#231603}}
:root[data-theme="dark"]{--pri:#E39A3B;--pri-ink:#231603}
.btn.pri{background:var(--pri);border-color:var(--pri);color:var(--pri-ink)}

/* 38. OS DOIS TIQUINHOS DE "LIDO" QUASE NAO APARECIAM.
       `--tick` #3E8CD4 em cima da bolha de mensagem enviada (`--mine`,
       #F6E7D4) da 2,93:1. E o unico jeito de saber se o cliente leu.
       Um azul mais fundo da 4,59:1 na bolha e 5,57:1 no fundo branco, e
       continua sendo o mesmo azul de "lido" de sempre. No tema escuro o
       `--tick` claro sobre bolha escura ja passava e nao muda. */
:root{--tick:#1F6BAE}

/* 39. TEXTO SECUNDARIO 0,1 ABAIXO DO MINIMO, EM TODA PARTE.
       `--muted` #727A74 sobre branco da 4,42:1 - falta pouco, mas e a cor
       de quase todo texto de apoio do sistema: a previa da conversa na
       lista, a hora da mensagem, o cabecalho da tabela, o nome do cliente
       no cartao do funil, "3 negocios", os rotulos da ficha. Foram 20 e
       poucos elementos reprovados em nove telas, sempre por esta mesma cor.
       #666E68 sobe para 5,28:1 no branco, 4,57:1 no fundo da tela e
       4,74:1 na linha da conversa escolhida, e continua sendo claramente
       um cinza de apoio, bem mais claro que `--ink-2`.
       So o tema claro muda: no escuro `--muted` ja passava. */
:root{--muted:#666E68}

/* 40. O RODAPE DA BARRA LATERAL ERA CINZA DEMAIS PARA O PRETO DELA.
       `--rail-ink-2` #7C867F pinta "Dia a dia", "Gerencia comercial" e os
       dois botoes de perfil. Sobre o preto da barra dava 3,73:1 no botao
       escolhido e 4,34:1 no resto. Um cinza um tom mais claro leva para
       4,67:1 e 5,42:1 sem clarear a barra. */
:root{--rail-ink-2:#8E978F}
@media (prefers-color-scheme:dark){:root[data-theme="auto"]{--rail-ink-2:#8E978F}}
:root[data-theme="dark"]{--rail-ink-2:#8E978F}

/* 41. "7 D PARADO" E "FORA DE GARANTIA" EM CINZA SOBRE CINZA.
       `.fresh` (no cartao do funil) e `.warr.no` (na ficha do cliente) sao
       `--muted` em cima de `--surface-3`, que e o fundo mais escuro do tema
       claro: 3,68:1 antes, 4,40:1 mesmo com o `--muted` novo. Sao os dois
       unicos lugares onde texto de apoio cai nesse fundo, entao a correcao
       e neles e nao na cor de todo mundo: `--ink-2` da 7,36:1. */
.fresh,.warr.no{color:var(--ink-2)}

/* 42. O CARIMBO DE HORA DENTRO DA PROPRIA MENSAGEM ENVIADA.
       `.b.me` tem fundo `--mine` (#F6E7D4), o unico fundo bege do sistema.
       O nome de quem enviou e a hora sao `--muted`, e mesmo com o `--muted`
       novo a conta da 4,33:1 ali - falta 0,17. Sao os dois unicos textos de
       apoio que caem nesse fundo, entao a correcao e neles: um cinza um
       pouco mais fundo da 4,73:1 e continua mais leve que o texto da
       mensagem. No tema escuro a bolha e escura e o `--muted` de la ja
       passa, por isso a regra e presa ao tema claro. */
.b.me .au,.b.me .ts{color:#616963}
@media (prefers-color-scheme:dark){:root[data-theme="auto"] .b.me .au,
  :root[data-theme="auto"] .b.me .ts{color:var(--muted)}}
:root[data-theme="dark"] .b.me .au,:root[data-theme="dark"] .b.me .ts{color:var(--muted)}

/* 43. O "X" DE FECHAR CAIA NUMA LINHA SO DELE NO MODAL DO ORCAMENTO.
       `.mhead` e `flex-wrap:wrap` e o bloco do titulo nao tem `min-width:0`.
       Quando o subtitulo e longo (no orcamento e a razao social inteira
       mais "responsavel Wanderson Caires de Oliveira") o bloco do titulo
       nao cabe na linha, vai sozinho para uma linha e empurra o botao de
       fechar para a linha de baixo: o cabecalho do modal fica com 160px de
       altura para 79px de titulo, e sobram 46px de nada bem no topo do
       modal mais alto do sistema, justo na tela de 768px onde falta altura.
       Com `min-width:0` o bloco encolhe e o texto quebra dentro dele, que e
       o que ja devia acontecer. Mesmo remedio da regra 2, que endireitou o
       cabecalho da conversa no celular.
       Abaixo de 700px a regra 5 ja faz `flex-wrap:nowrap`, entao o celular
       nao passa por aqui. */
@media (min-width:821px){
  .mhead{flex-wrap:nowrap}
  .mhead > div:first-child{min-width:0;flex:1 1 auto}
  /* Sem `flex:none` o proprio botao de fechar encolhia 2px para caber. */
  .mhead .x{flex:none}
}

/* 44. A REGRA 27 SOZINHA AINDA DEIXAVA UMA FRESTA ROLANDO DE LADO.
       Medindo de 10 em 10 pixels apareceu um degrau que nao e obvio: a
       barra lateral encolhe de 212px para 60px em `max-width:900px`, entao
       ao passar de 899 para 900 a janela ganha 1px mas o quadro PERDE
       152px de caixa. Em 900x768 o `#board` fica com 636px, e quatro
       colunas com o piso de 170px pedem 716: rolava 80px de lado. Em 821px
       exatos faltavam 7px pelo mesmo motivo.
       Nesta faixa estreita a coluna pode ser mais magra (152px em 900px de
       janela ainda mostra titulo, cliente, valor e o "parado ha"), o vao
       entre colunas cai de 12 para 9 e o cartao aperta o forro. Assim as
       quatro etapas cabem em qualquer largura de 821 a 1023, que e onde o
       layout de computador ja vale mas a tela ainda e de notebook pequeno.
       O piso de 140px continua existindo: um funil com cinco etapas ou mais
       volta a rolar de lado nesta faixa, e rolar e melhor que espremer. */
@media (min-width:821px) and (max-width:1023px){
  .board{gap:9px}
  .board .col{min-width:140px;padding:9px}
  .board .col .deal{padding:9px}
}

/* Campo de formulario solto, fora de modal.
   Ate aqui todo campo era escrito como `<div class="cbox"><input
   style="border:0;background:none;outline:none;font:inherit;..."></div>`,
   com o estilo repetido em cada um. Uma classe so faz a mesma coisa e
   deixa o proximo campo nascer certo sem ninguem copiar linha. */
.campo{
  background:var(--surface-2);border:1px solid var(--line);border-radius:8px;
  padding:8px 10px;font:inherit;color:var(--ink);min-width:0;max-width:100%;
}
.campo:focus{outline:2px solid var(--accent);outline-offset:-1px}
select.campo{cursor:pointer}

/* 45. ALVO DE DEDO NOS CAMPOS DE FORMULARIO.
       A regra 11 subiu para 44px o botao de voltar, o de enviar, os chips,
       o "x" do modal e a caixinha de marcar, mas deixou de fora o campo de
       digitar. Medido em 390x844: o `.cbox` fecha em 39px de altura e o
       `<input>` dentro dele em 21px. Como o rotulo e um `<span class="lbl">`
       solto, e nao um `<label for>`, tocar no rotulo ou na sobra da caixa
       nao coloca o cursor em lugar nenhum: o alvo real e a faixa de 21px.
       No modal de "Novo lead" sao treze campos assim, um embaixo do outro,
       usados de pe no patio.
       Cinco pixels de altura no proprio campo levam a caixa de 39 para 44,
       que e o minimo da Apple. So no celular: no computador o mouse acerta
       21px sem esforco e a caixa continua com a altura de sempre. */
@media (max-width:820px){
  .cbox input:not([type=checkbox]):not([type=radio]),
  .cbox select{min-height:26px}
  /* A caixa de "Quem esta fora" nao usa `.cbox`: os quatro campos dela sao
     `.campo`, que fecha em 36px no seletor de pessoa, 38,3px no motivo e
     40,3px nas duas datas. Como `.campo` ja e a caixa inteira, o piso vai
     nela mesma. Quem marca ferias e a Gislene ou a Luana, quase sempre do
     celular, no dia em que a colega avisa que vai sair. */
  .campo{min-height:44px}
}

/* =====================================================================
   A FOLHA DO CONTRATO
   =====================================================================

   DIFERENTE DA PROPOSTA, e de proposito. A proposta e UMA pagina A4
   medida, porque o Jeferson disse que orcamento grande o cliente nao le. O
   contrato tem quatro a cinco paginas: espremer seria ilegivel e, pior,
   pareceria que alguem cortou clausula.

   Impresso pelo proprio navegador, em PDF, que e o mesmo caminho da
   proposta. Ver verFolhaDoContrato() em app.js.
   ===================================================================== */

body.folhacontrato {
  background: #fff;
  color: #1a1a1a;
  font-family: Georgia, 'Times New Roman', serif;
  margin: 0;
}

.folhacontrato .contrato {
  max-width: 170mm;
  margin: 0 auto;
  padding: 18mm 0 24mm;
  font-size: 10.5pt;
  line-height: 1.55;
  text-align: justify;
}

.folhacontrato .cabeca {
  text-align: center;
  border-bottom: 2px solid #1a1a1a;
  padding-bottom: 8px;
  margin-bottom: 18px;
}
.folhacontrato .cabeca .numero {
  text-align: right;
  font-size: 9.5pt;
  letter-spacing: 0.4px;
}
.folhacontrato .cabeca .marca {
  font-weight: 700;
  font-size: 13pt;
  letter-spacing: 0.5px;
}
.folhacontrato .cabeca .mini { font-size: 8.5pt; }

.folhacontrato h1 {
  font-size: 11.5pt;
  text-align: center;
  text-transform: uppercase;
  line-height: 1.35;
  margin: 18px 0 16px;
}
.folhacontrato h2 {
  font-size: 10.5pt;
  text-transform: uppercase;
  margin: 16px 0 6px;
}
.folhacontrato p { margin: 0 0 9px; }
.folhacontrato p.sub { margin-top: 10px; }
.folhacontrato ul { margin: 0 0 9px; padding-left: 20px; }
.folhacontrato li { margin-bottom: 7px; }

/* A clausula nao pode comecar no pe da pagina e continuar sozinha na
   seguinte: contrato com titulo orfao parece que falta pedaco. */
.folhacontrato .clausula { break-inside: auto; }
.folhacontrato h2 { break-after: avoid; break-inside: avoid; }

.folhacontrato .abertura { text-indent: 0; }
.folhacontrato .fecho { margin-top: 18px; }
.folhacontrato .local { margin: 22px 0 30px; text-align: right; }

.folhacontrato .assinaturas {
  display: flex;
  gap: 26px;
  justify-content: space-between;
  margin-top: 30px;
  break-inside: avoid;
}
.folhacontrato .ass {
  flex: 1;
  text-align: center;
  font-size: 9.5pt;
  display: grid;
  gap: 2px;
}
.folhacontrato .ass .linha {
  border-top: 1px solid #1a1a1a;
  margin-bottom: 5px;
}
.folhacontrato .ass .papel { font-size: 8.5pt; color: #555; }

.folhacontrato .testemunhas { margin-top: 34px; break-inside: avoid; }
.folhacontrato .testemunhas .duas { display: flex; gap: 26px; margin-top: 22px; }

/* --- O Anexo I --- */
.folhacontrato .quebra { break-after: page; }

.folhacontrato table.itens {
  width: 100%;
  border-collapse: collapse;
  margin: 14px 0;
  font-size: 9.5pt;
}
.folhacontrato table.itens th,
.folhacontrato table.itens td {
  border: 1px solid #999;
  padding: 5px 7px;
  text-align: left;
  vertical-align: top;
}
.folhacontrato table.itens th { background: #f0f0f0; font-size: 9pt; }
.folhacontrato table.itens .n { text-align: right; white-space: nowrap; }
.folhacontrato table.itens tfoot td { background: #f7f7f7; font-weight: 700; }
.folhacontrato table.itens .cod {
  display: block;
  font-size: 8pt;
  color: #666;
  font-family: 'Courier New', monospace;
}

.folhacontrato .condicoes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 18px;
  margin: 14px 0;
  font-size: 9.5pt;
}
.folhacontrato .condicoes div { display: grid; gap: 1px; }
.folhacontrato .condicoes b { font-size: 8.5pt; text-transform: uppercase; color: #555; }
.folhacontrato .mini { font-size: 8.5pt; color: #555; }

@media print {
  .folhacontrato .contrato { padding: 0; max-width: none; }
  @page { size: A4; margin: 18mm 20mm; }
}


/* =====================================================================
   BOTAO DESLIGADO
   =====================================================================

   NAO EXISTIA NENHUMA REGRA PARA `[disabled]` no projeto inteiro, achado
   por auditoria de usabilidade em 12/09/2026. O botao desligado ficava
   IDENTICO ao ligado: laranja, texto branco, cursor de mao. A pessoa
   tocava, nada acontecia, e nada dizia por que.

   E o caso do "Está certo, gerar contrato", que nasce desligado enquanto
   falta informacao. Sem esta regra, o unico jeito de descobrir que ele
   estava desligado era tocar varias vezes.
   ===================================================================== */

.btn[disabled],
.btn[disabled]:hover {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(1);
}

/* =====================================================================
   ALVO DE TOQUE NO CELULAR
   =====================================================================

   A regra do projeto (CLAUDE.md, secao 11) e 44px. `.btn` tem
   `padding:6px 11px` e fonte 12,5px, o que da cerca de 30px de altura.
   No computador o mouse acerta; no celular, com luva, na cabine de uma
   escavadeira, nao.

   Vale para TODO botao, e nao so para os do contrato: o achado foi no
   contrato, mas o alvo pequeno e o mesmo em toda tela.
   ===================================================================== */

@media (max-width: 820px) {
  .btn {
    min-height: 44px;
    padding: 10px 14px;
  }
  /* O X de fechar o modal e o caso mais tocado de todos. */
  .mhead .x {
    min-width: 44px;
    min-height: 44px;
  }
  /* O sino e um botao de ICONE so: sem texto para acertar em volta, ele
     precisa dos 44px nas duas medidas. As outras abas tem palavra e
     continuam nos 34px, que e o que cabe nas tres lado a lado. */
  .tab.som {
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
  }
}


/* ---------------- a tarja do "ver como" ----------------
 *
 * DE PROPOSITO CHAMATIVA. Ela e a unica coisa que separa "o Atrelo da
 * Heloisa" de "o Atrelo quebrou", e quem esta com ela ligada esta olhando
 * para uma tela que nao e a dele, de proposito, e precisa lembrar disso a
 * cada segundo. Cor propria, e nao o accent do tema: o accent aparece em
 * dezenas de lugares e viraria mais um.
 *
 * A altura e medida em JavaScript e vira --altura-vercomo, porque no
 * celular o texto quebra em duas linhas e um valor fixo cortaria o menu.
 */
#barraVerComo{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:#5B3A1E;color:#FFF3E2;padding:8px 14px;font-size:13.5px;font-weight:600;
  border-bottom:2px solid #C8862F}
#barraVerComo .olho{display:grid;place-items:center;flex:none}
#barraVerComo .olho svg{width:18px;height:18px}
#barraVerComo #barraVerComoTexto{flex:1;min-width:180px}
#barraVerComo .btn{background:#FFF3E2;color:#3B2410;border:0;font-weight:700;
  padding:7px 14px;border-radius:8px;min-height:34px}
body.vercomo .app{height:calc(100vh - var(--altura-vercomo, 40px))}
@media (max-width:700px){
  #barraVerComo{font-size:12.5px;padding:8px 12px}
  #barraVerComo .btn{min-height:44px;padding:10px 14px}
}

/* Preco corrigivel na propria lista de opcionais (Jeferson, 13/09/2026:
 * "vi que tem alguns que estao com o valor errado"). Parece texto ate
 * receber o foco: a lista continua sendo uma lista de precos, e nao um
 * formulario de dez campos. */
.precoinline{width:120px;text-align:right;font:inherit;font-variant-numeric:tabular-nums;
  border:1px solid transparent;border-radius:6px;padding:5px 8px;background:transparent;color:var(--ink)}
.precoinline:hover{border-color:var(--line);background:var(--surface-2)}
.precoinline:focus{border-color:var(--accent-line);background:var(--surface);outline:none}
.precoinline::placeholder{color:var(--muted);font-style:italic}
@media (max-width:820px){ .precoinline{min-height:44px;width:110px} }