/* =============================================================================
   BETTER SALES — componentes do padrão do ecossistema (missão 10)

   A ESTRUTURA e o COMPORTAMENTO são os do CRM Alumni (padrão Salesforce/
   Lightning: src/components/alumni/{shell,lists,record,ui,ui-client,
   notification-bell}.tsx e alumni-v2.css). A IDENTIDADE é a da Better: só
   tokens de brand.css — verde lima, grafite, Space Grotesk. Nada de azul ou
   vermelho da Alumni; o "gradiente" do CRM aqui é o da rampa Better.

   Prefixo `ui-` em tudo, para não colidir com as classes antigas do painel
   (card, chip, btn, tabela…), que continuam valendo e são reaproveitadas.
   Carregado depois de brand.css. Funciona nos dois temas (claro/escuro).

   Mapa:  casca (topo, ambiente, busca ⌘K, sino, menu em grupos)
          cabeçalho de página · métricas · painel · propriedades
          lista (barra de visões, ferramentas, filtros, colunas, tabela,
                 seleção em massa, paginação, cards no celular)
          registro (cabeçalho, destaques, etapas, abas, relacionados, inline)
          gaveta · paleta ⌘K · toast · atalhos · carregamento
   ============================================================================= */
:root{
  --ui-gradiente:linear-gradient(90deg,var(--better-300),var(--better-500) 55%,var(--better-700));
  --ui-filete:var(--ui-gradiente) left bottom/100% 3px no-repeat;
  --ui-linha-suave:var(--linha);
  --ui-r:var(--r);
  --ui-r-ctl:var(--r-sm);
}
:root[data-theme="dark"]{--ui-gradiente:linear-gradient(90deg,var(--better-700),var(--better-500) 55%,var(--better-300))}

.ui-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ui-acoes{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center}
.ui-linkbtn{
  display:inline-flex;align-items:center;gap:4px;font:inherit;font-size:13px;font-weight:var(--fw-semi);
  color:var(--marca-txt);background:none;border:0;padding:4px;cursor:pointer;border-radius:6px;
}
.ui-linkbtn:hover{text-decoration:underline}
.ui-linkbtn:focus-visible,.ui-chipbtn:focus-visible,.ui-iconbtn:focus-visible{outline:2px solid var(--marca-txt);outline-offset:2px}
.ui-iconbtn{
  position:relative;display:inline-grid;place-items:center;width:36px;height:36px;padding:0;
  border-radius:var(--ui-r-ctl);border:1px solid var(--linha);background:var(--card);color:var(--txt2);cursor:pointer;
  transition:background-color var(--t-fast),border-color var(--t-fast),color var(--t-fast);
}
.ui-iconbtn:hover{background:var(--card2);color:var(--txt);border-color:var(--linha-forte)}
.ui-iconbtn .ico{width:17px;height:17px}
.ui-iconbtn[aria-disabled="true"],.ui-iconbtn:disabled{opacity:.4;cursor:default;pointer-events:none}
kbd,.ui-kbd{
  font-family:inherit;font-size:11px;font-weight:var(--fw-bold);line-height:1.5;
  border:1px solid var(--linha-forte);border-bottom-width:2px;border-radius:4px;
  padding:0 5px;background:var(--card);color:var(--txt2);
}

/* ============================================================
   CASCA — topo: migalha, ambiente, busca ⌘K, sino, usuário
   ============================================================ */
.topo-acoes{display:flex;align-items:center;gap:var(--s3);min-width:0}
.ui-ambiente{
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  font-size:var(--text-xs);font-weight:var(--fw-semi);
  color:var(--warn);background:var(--warn-dim);border:1px solid var(--warn-borda);
  border-radius:var(--r-full);padding:3px 10px;
}
.ui-ambiente::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.ui-ambiente[data-amb="local"]{color:var(--info);background:var(--info-dim);border-color:var(--info-borda)}
.ui-busca-global{
  display:inline-flex;align-items:center;gap:10px;font:inherit;font-size:var(--text-sm);
  color:var(--txt3);background:var(--card2);border:1px solid var(--linha);
  border-radius:var(--ui-r-ctl);padding:7px 10px;min-width:280px;cursor:pointer;
  transition:border-color var(--t-fast);
}
.ui-busca-global:hover{border-color:var(--marca-borda)}
.ui-busca-global:focus-visible{outline:2px solid var(--marca-txt);outline-offset:2px}
.ui-busca-global .ico{width:16px;height:16px}
.ui-busca-global kbd{margin-left:auto}
.ui-busca-global .rot{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* sino */
.ui-sino{position:relative}
.ui-sino-n{
  position:absolute;top:-6px;right:-7px;min-width:18px;height:18px;padding:0 5px;
  border-radius:var(--r-full);background:var(--err);color:#fff;
  font-size:11px;font-weight:var(--fw-bold);line-height:18px;text-align:center;
  box-shadow:0 0 0 2px var(--bg2);
}
.ui-pop{
  position:absolute;right:0;top:calc(100% + 8px);z-index:70;
  background:var(--card);border:1px solid var(--linha);border-radius:var(--r);
  box-shadow:var(--sh-3);padding:var(--s3) var(--s4);min-width:220px;display:grid;gap:var(--s2);
}
.ui-sino-pop{width:min(380px,calc(100vw - 24px));max-height:min(70vh,520px);overflow-y:auto;padding:var(--s3) 0;gap:0}
.ui-sino-topo{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);padding:0 var(--s4) var(--s2)}
.ui-sino-pop>p{margin:var(--s1) var(--s4);color:var(--txt2);font-size:var(--text-sm)}
.ui-sino-lista{list-style:none;margin:0;padding:0}
.ui-sino-lista li{display:flex;gap:var(--s3);align-items:flex-start;padding:var(--s3) var(--s4);border-top:1px solid var(--linha)}
.ui-sino-lista li[data-lido="false"]{background:var(--marca-dim)}
.ui-sino-lista li .ico-av{flex:none;margin-top:2px;width:16px;height:16px}
.ui-sino-lista li[data-grav="erro"] .ico-av{color:var(--err)}
.ui-sino-lista li[data-grav="atencao"] .ico-av{color:var(--warn)}
.ui-sino-lista li[data-grav="info"] .ico-av{color:var(--info)}
.ui-sino-lista li .txt{flex:1;min-width:0}
.ui-sino-lista li a,.ui-sino-lista li b{font-weight:var(--fw-bold);font-size:var(--text-sm);color:var(--txt);text-decoration:none}
.ui-sino-lista li a:hover{text-decoration:underline}
.ui-sino-lista li p{margin:2px 0;font-size:13px;color:var(--txt2);overflow-wrap:anywhere}
.ui-sino-lista li small{font-size:var(--text-xs);color:var(--txt3)}

/* menu lateral: grupos recolhíveis (como o CRM). O rótulo vira botão; recolhido,
   o grupo continua mostrando o item da tela atual — o ativo nunca some. */
button.grupo-menu{
  display:flex;align-items:center;gap:6px;width:100%;
  background:none;border:0;font-family:inherit;cursor:pointer;text-align:left;
}
button.grupo-menu .seta{width:14px;height:14px;margin-left:auto;transition:transform var(--t)}
button.grupo-menu[aria-expanded="false"] .seta{transform:rotate(-90deg)}
button.grupo-menu:hover{opacity:1}
button.grupo-menu:focus-visible{outline:2px solid var(--side-ativo);outline-offset:-2px;border-radius:6px}
:root.lateral-colapsada button.grupo-menu .seta{display:none}
.nav .ui-badge{
  margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:var(--r-full);
  background:var(--err);color:#fff;font-size:11px;font-weight:var(--fw-bold);line-height:20px;text-align:center;
}

@media(max-width:1100px){.ui-busca-global{min-width:0}.ui-busca-global .rot{display:none}}
@media(max-width:860px){
  .topbar{flex-wrap:wrap;height:auto;min-height:64px;padding-top:var(--s2);padding-bottom:var(--s2)}
  .topo-acoes{gap:var(--s2)}
  .ui-busca-global kbd{display:none}
  .ui-ambiente{order:10}
}
@media(max-width:640px){
  /* .topbar na frente: o <style> do index.html redefine .trilha depois deste arquivo */
  .topbar .trilha{display:none}
  .ui-ambiente{font-size:11px;padding:2px 8px}
}

/* ============================================================
   CABEÇALHO DE PÁGINA (page-head do V2) e MÉTRICAS
   ============================================================ */
.ui-head{
  display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s4);flex-wrap:wrap;
  margin-bottom:var(--s5);padding-bottom:var(--s4);background:var(--ui-filete);
}
.ui-head>div:first-child{min-width:0}
.ui-rotulo{font-size:var(--text-sm);font-weight:var(--fw-semi);color:var(--marca-txt);display:inline-flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.ui-head h1{font-size:30px;line-height:1.15;letter-spacing:-.02em;margin-top:4px;font-weight:var(--fw-bold);overflow-wrap:anywhere}
.ui-head p{margin-top:6px;color:var(--txt2);max-width:760px;font-size:var(--text-sm);overflow-wrap:anywhere}

.ui-metricas{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  background:var(--ui-filete),var(--card);border:1px solid var(--linha);border-radius:var(--r-lg);
  padding:var(--s5) 0 22px;margin-bottom:22px;box-shadow:var(--sh-1);
}
.ui-metrica{display:flex;flex-direction:column;padding:0 22px;border-right:1px solid var(--linha);color:inherit;text-decoration:none;min-width:0}
.ui-metrica:last-child{border-right:0}
a.ui-metrica:hover .ui-metrica-val{color:var(--marca-txt)}
a.ui-metrica:focus-visible{outline:2px solid var(--marca-txt);outline-offset:-2px;border-radius:6px}
.ui-metrica-rot{display:flex;justify-content:space-between;align-items:center;gap:var(--s2);font-size:var(--text-xs);font-weight:var(--fw-semi);color:var(--txt2);margin-bottom:10px}
.ui-metrica-rot .ico{width:15px;height:15px;color:var(--marca-txt)}
.ui-metrica[data-tom="warn"] .ui-metrica-rot .ico{color:var(--warn)}
.ui-metrica[data-tom="err"] .ui-metrica-rot .ico{color:var(--err)}
.ui-metrica[data-tom="info"] .ui-metrica-rot .ico{color:var(--info)}
.ui-metrica-val{font-size:28px;font-weight:var(--fw-bold);letter-spacing:-.02em;line-height:1.15;margin-bottom:6px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.ui-metrica[data-tom="err"][data-alerta] .ui-metrica-val{color:var(--err)}
.ui-metrica small{font-size:var(--text-xs);color:var(--txt3)}

/* painel (panel do V2) */
.ui-painel{background:var(--card);border:1px solid var(--linha);border-radius:var(--r-lg);overflow:hidden;min-width:0;box-shadow:var(--sh-1)}
.ui-painel+.ui-painel,.ui-grid2+.ui-painel,.ui-painel+.ui-grid2{margin-top:var(--s4)}
.ui-painel-topo{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;padding:var(--s5) 22px 14px}
.ui-painel-topo h2{font-size:17px;font-weight:var(--fw-bold);letter-spacing:-.01em;display:flex;align-items:center;gap:var(--s2)}
.ui-painel-topo h2 .ico{color:var(--marca-txt)}
.ui-painel-topo p{margin-top:4px;font-size:var(--text-xs);color:var(--txt2)}
.ui-painel-corpo{padding:0 22px var(--s5)}
.ui-painel-corpo.ui-rente{padding:0}
.ui-painel-corpo.ui-rente .tabela-wrap{border-radius:0}
.ui-painel-pe{display:flex;justify-content:space-between;gap:var(--s3);padding:var(--s3) 22px;border-top:1px solid var(--linha);font-size:var(--text-xs);color:var(--txt2)}
.ui-grid2>.ui-painel+.ui-painel{margin-top:0}
.ui-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)}
.ui-contagem{font-size:11px;font-weight:var(--fw-bold);background:var(--marca-dim);color:var(--marca-txt);border-radius:var(--r-full);padding:1px 7px;font-variant-numeric:tabular-nums}

/* propriedades (property-grid do V2) */
.ui-props{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--s6);margin:0}
.ui-props[data-cols="1"]{grid-template-columns:1fr}
.ui-prop{border-bottom:1px solid var(--linha);padding:11px 0;min-width:0}
.ui-prop dt{font-size:var(--text-xs);color:var(--txt2);margin-bottom:4px}
.ui-prop dd{margin:0;font-size:var(--text-sm);overflow-wrap:anywhere}

/* ============================================================
   LISTA (list view do V2)
   ============================================================ */
.ui-lista{min-width:0}
.ui-visoes{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s3)}
.ui-visoes select,.ui-ordem select,.ui-pag select{
  width:auto;font:inherit;font-size:var(--text-sm);font-weight:var(--fw-semi);
  color:var(--txt);background-color:var(--card);border:1px solid var(--linha-forte);
  border-radius:var(--ui-r-ctl);padding:6px 30px 6px 10px;max-width:100%;
}
.ui-ferramentas{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;margin-bottom:14px}
.ui-busca-lista{
  display:flex;align-items:center;gap:var(--s2);background:var(--card);
  border:1px solid var(--linha-forte);border-radius:var(--ui-r-ctl);padding:0 10px;min-width:260px;flex:0 1 380px;
}
.ui-busca-lista:focus-within{border-color:var(--marca);box-shadow:0 0 0 3px var(--marca-dim)}
.ui-busca-lista .ico{color:var(--txt3);width:15px;height:15px}
.ui-busca-lista input{border:0;outline:none;box-shadow:none;padding:9px 0;background:transparent;font-size:var(--text-sm)}
.ui-busca-lista input:focus{box-shadow:none}
.ui-chipbtn{
  display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:13px;font-weight:var(--fw-semi);
  color:var(--txt);background:var(--card);border:1px solid var(--linha-forte);border-radius:var(--ui-r-ctl);
  padding:7px 12px;cursor:pointer;white-space:nowrap;text-decoration:none;
}
.ui-chipbtn:hover{border-color:var(--marca-borda)}
.ui-chipbtn[aria-expanded="true"],.ui-chipbtn[aria-pressed="true"],.ui-chipbtn[aria-current="true"]{background:var(--marca-dim);border-color:var(--marca-borda);color:var(--marca-txt)}
.ui-chipbtn .ico{width:14px;height:14px}
.ui-total{margin-left:auto;font-size:13px;font-weight:var(--fw-semi);color:var(--txt2);font-variant-numeric:tabular-nums}
.ui-filtros{
  display:flex;gap:var(--s3);align-items:flex-end;flex-wrap:wrap;
  margin:-4px 0 14px;padding:var(--s3) 14px;background:var(--card);border:1px solid var(--linha);border-radius:var(--r);
}
.ui-filtros .field{margin-bottom:0;min-width:180px}
.ui-filtros .field select{padding-top:8px;padding-bottom:8px}
.ui-pop-wrap{position:relative}
.ui-colunas{right:0;left:auto;max-height:60vh;overflow-y:auto}
.ui-colunas legend{font-size:var(--text-xs);font-weight:var(--fw-bold);color:var(--txt2);margin-bottom:4px;float:left;width:100%}
.ui-colunas label{display:flex;gap:var(--s2);align-items:center;font-size:var(--text-sm);cursor:pointer;white-space:nowrap}
.ui-colunas input{width:16px;height:16px;accent-color:var(--marca)}

.ui-tabela{background:var(--card);border:1px solid var(--linha);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-1)}
.ui-tabela .tabela-wrap{border-radius:0}
.ui-tabela th.ui-ord{padding:0}
.ui-tabela th .ui-ord-btn{
  display:flex;align-items:center;gap:4px;width:100%;padding:var(--s3) var(--s4);
  background:none;border:0;font:inherit;font-size:var(--text-xs);font-weight:var(--fw-semi);color:var(--txt2);cursor:pointer;text-align:left;white-space:nowrap;
}
.ui-tabela th .ui-ord-btn:hover{color:var(--txt)}
.ui-tabela th .ui-ord-btn .ico{width:13px;height:13px;opacity:.35}
.ui-tabela th[aria-sort] .ui-ord-btn{color:var(--txt)}
.ui-tabela th[aria-sort] .ui-ord-btn .ico{opacity:1;color:var(--marca-txt)}
.ui-tabela th.num .ui-ord-btn,.ui-tabela td.num{text-align:right;justify-content:flex-end}
.ui-tabela td.num{font-variant-numeric:tabular-nums}
.ui-tabela .ui-check{width:40px;padding-right:0}
.ui-tabela .ui-check input{width:16px;height:16px;accent-color:var(--marca);cursor:pointer}
.ui-tabela tr[aria-selected="true"] td{background:var(--marca-dim)}
.ui-tabela td.ui-acoes-linha{width:1%;white-space:nowrap;text-align:right}
.ui-tabela td .ui-titulo-linha{font-weight:var(--fw-semi);color:var(--txt);text-decoration:none}
.ui-tabela tr.click:hover .ui-titulo-linha{text-decoration:underline}
.ui-rapida{opacity:.55}
.ui-tabela tr:hover .ui-rapida,.ui-rapida:focus-visible{opacity:1}

.ui-massa{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 var(--s3);
  padding:10px 14px;border-radius:var(--r);background:var(--marca-dim);border:1px solid var(--marca-borda);color:var(--txt);font-size:var(--text-sm);
}
.ui-massa b{margin-right:auto}

.ui-pag{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end;padding:var(--s3) var(--s4);border-top:1px solid var(--linha);font-size:13px;color:var(--txt2);font-variant-numeric:tabular-nums}
.ui-pag select{font-weight:var(--fw-medium);padding:4px 28px 4px 8px}

/* celular: a tabela vira cards (reaproveita .tabela-cards de brand.css) */
@media(max-width:860px){
  .ui-busca-lista{flex:1 1 100%;min-width:0}
  .ui-total{margin-left:0}
  .ui-filtros .field{min-width:0;flex:1 1 140px}
  .ui-tabela .tabela-cards td.ui-check{position:absolute;top:var(--s3);left:var(--s3);width:auto}
  .ui-tabela .tabela-cards tr:has(td.ui-check){padding-left:44px}
  .ui-tabela .tabela-cards td.ui-acoes-linha{grid-column:1/-1;text-align:left;width:auto}
  .ui-tabela .tabela-cards td.num{text-align:left}
  .ui-tabela .tabela-cards tr[aria-selected="true"]{border-color:var(--marca-borda);background:var(--marca-dim)}
  .ui-tabela .tabela-cards tr[aria-selected="true"] td{background:transparent}
  .ui-pag{justify-content:space-between}
}
@media(max-width:640px){
  /* contagem numa linha, tamanho e páginas na de baixo: as setas não quebram sozinhas */
  .ui-pag{justify-content:flex-end}
  .ui-pag>span:first-child{flex:1 1 100%}
}

/* ============================================================
   REGISTRO (record page Salesforce/V2)
   ============================================================ */
.ui-registro{
  background:var(--card);border:1px solid var(--linha);border-radius:var(--r-lg);
  padding:22px var(--s6) 0;margin-bottom:var(--s5);box-shadow:var(--sh-1);
}
.ui-reg-topo{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s4);flex-wrap:wrap}
.ui-reg-id{display:flex;gap:var(--s4);align-items:center;min-width:0}
.ui-reg-icone{flex:none;width:46px;height:46px;border-radius:var(--r);display:grid;place-items:center;background:var(--marca-dim);color:var(--marca-txt);border:1px solid var(--marca-borda)}
.ui-reg-icone .ico{width:22px;height:22px}
.ui-reg-id h1{font-size:26px;font-weight:var(--fw-bold);letter-spacing:-.02em;line-height:1.2;overflow-wrap:anywhere}
.ui-reg-id p{margin-top:2px;font-size:13px;color:var(--txt2);overflow-wrap:anywhere}
.ui-reg-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.ui-destaques{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0;
  margin:18px 0 0;border-top:1px solid var(--linha);padding-top:14px;
}
.ui-destaques>div{padding-right:var(--s4);min-width:0;margin-bottom:var(--s2)}
.ui-destaques dt{font-size:var(--text-xs);color:var(--txt2)}
.ui-destaques dd{margin:3px 0 0;font-size:15px;font-weight:var(--fw-semi);overflow-wrap:anywhere;font-variant-numeric:tabular-nums}

/* barra de etapas (path) */
.ui-etapas{display:flex;gap:4px;margin-top:18px;overflow-x:auto;scrollbar-width:thin;padding-bottom:2px;list-style:none}
.ui-etapa{
  flex:1 0 110px;text-align:left;font-size:var(--text-xs);font-weight:var(--fw-semi);color:var(--txt3);
  border-top:4px solid var(--linha-forte);padding:8px 2px 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  display:flex;align-items:center;gap:6px;
}
.ui-etapa .ico{width:13px;height:13px;flex:none}
.ui-etapa[data-estado="feita"]{border-top-color:var(--better-400);color:var(--txt)}
.ui-etapa[data-estado="atual"]{border-top-color:var(--marca-txt);color:var(--txt);font-weight:var(--fw-bold)}
.ui-etapa[data-estado="ganha"]{border-top-color:var(--ok);color:var(--ok);font-weight:var(--fw-bold)}
.ui-etapa[data-estado="perdida"]{border-top-color:var(--err);color:var(--err);font-weight:var(--fw-bold)}
.ui-etapa[data-estado="atencao"]{border-top-color:var(--warn);color:var(--warn);font-weight:var(--fw-bold)}

/* abas do registro */
.ui-abas{display:flex;gap:var(--s6);border-bottom:1px solid var(--linha);margin:0 0 var(--s5);overflow-x:auto;scrollbar-width:none}
.ui-registro .ui-abas{margin:18px 0 0;border-bottom:0}
.ui-abas button{
  display:inline-flex;align-items:center;gap:6px;padding:0 0 12px;font:inherit;font-size:var(--text-sm);font-weight:var(--fw-medium);
  color:var(--txt2);white-space:nowrap;background:none;border:0;border-bottom:3px solid transparent;cursor:pointer;
}
.ui-abas button:hover{color:var(--txt)}
.ui-abas button[aria-selected="true"]{color:var(--txt);font-weight:var(--fw-bold);border-image:var(--ui-gradiente) 1;border-bottom:3px solid}
.ui-abas button:focus-visible{outline:2px solid var(--marca-txt);outline-offset:2px;border-radius:4px}
.ui-aba-painel{min-width:0}
.ui-aba-painel>.card+.card,.ui-aba-painel>.ui-painel+.ui-painel{margin-top:var(--s4)}
.ui-avisos-reg>*{margin-bottom:var(--s4)}

/* edição inline */
.ui-inline-ver{display:flex;align-items:center;gap:6px;justify-content:space-between;min-height:28px}
.ui-inline-lapis{width:28px;height:28px;opacity:0;border-color:transparent}
.ui-inline:hover .ui-inline-lapis,.ui-inline-lapis:focus-visible{opacity:1;border-color:var(--linha)}
@media(hover:none){.ui-inline-lapis{opacity:1}}
.ui-inline-edit{display:flex;gap:4px;align-items:center}
.ui-inline-edit input,.ui-inline-edit select{flex:1;min-width:0;padding:5px 8px;font-size:var(--text-sm)}
.ui-inline .msg-erro{margin-top:4px}
.ui-inline[data-erro] input,.ui-inline[data-erro] select{border-color:var(--err)}

@media(max-width:860px){
  .ui-registro{padding:18px var(--s4) 0}
  .ui-reg-id h1,.ui-head h1{font-size:22px}
  .ui-reg-icone{display:none}
  .ui-props,.ui-grid2{grid-template-columns:minmax(0,1fr)}
  .ui-metricas{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:18px}
  .ui-metrica{padding:0 var(--s4)}
  .ui-metrica:nth-child(2n){border-right:0}
  .ui-metrica-val{font-size:22px}
  .ui-painel-topo{padding:var(--s4) var(--s4) var(--s3)}
  .ui-painel-corpo{padding:0 var(--s4) var(--s4)}
  .ui-reg-topo>.ui-acoes{width:100%}
}

/* ============================================================
   GAVETA (drawer) — visualização rápida sem sair da lista
   ============================================================ */
.ui-gaveta-fundo{position:fixed;inset:0;z-index:90;background:var(--overlay);backdrop-filter:blur(2px);display:flex;justify-content:flex-end}
.ui-gaveta{
  height:100dvh;width:min(760px,100vw);max-width:100vw;overflow-y:auto;overscroll-behavior:contain;outline:none;
  border-left:1px solid var(--linha);background:var(--bg);color:var(--txt);box-shadow:var(--sh-modal);
  animation:ui-gaveta-in .18s ease-out;
}
:root.ui-sem-rolagem body{overflow:hidden}
@keyframes ui-gaveta-in{from{transform:translateX(40px);opacity:.6}}
.ui-gaveta-topo{
  position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:var(--s3);
  padding:18px var(--s6);background:var(--ui-filete),var(--card);
}
.ui-gaveta-topo h2{font-size:var(--text-lg);overflow-wrap:anywhere}
.ui-gaveta-topo p{margin-top:2px;font-size:var(--text-xs);color:var(--txt2)}
.ui-gaveta-corpo{padding:var(--s5) var(--s6) var(--s10)}
.ui-gaveta-corpo .ui-registro{box-shadow:none}
@media(max-width:860px){.ui-gaveta-topo{padding:var(--s4)}.ui-gaveta-corpo{padding:var(--s4)}}

/* ============================================================
   PALETA ⌘K
   ============================================================ */
.ui-paleta{
  padding:0;border:1px solid var(--linha);border-radius:var(--r-lg);width:min(640px,calc(100vw - 24px));
  margin:12vh auto auto;box-shadow:var(--sh-modal);font-family:var(--fonte);color:var(--txt);background:var(--card);
}
.ui-paleta::backdrop{background:var(--overlay);backdrop-filter:blur(2px)}
.ui-paleta-entrada{display:flex;align-items:center;gap:10px;padding:14px var(--s4);border-bottom:1px solid var(--linha)}
.ui-paleta-entrada>.ico{width:18px;height:18px;color:var(--txt3)}
.ui-paleta-entrada input{flex:1;border:0;outline:none;box-shadow:none;padding:4px 0;font-size:var(--text-base);background:transparent}
.ui-paleta-entrada input:focus{box-shadow:none}
.ui-paleta ul{list-style:none;margin:0;padding:6px;max-height:55vh;overflow-y:auto}
.ui-paleta-grupo{font-size:11px;font-weight:var(--fw-bold);color:var(--txt3);padding:10px 10px 4px;text-transform:uppercase;letter-spacing:.4px}
.ui-paleta-msg{font-size:13px;color:var(--txt2);padding:10px}
.ui-paleta li a{display:flex;align-items:center;gap:12px;width:100%;padding:9px 10px;border-radius:var(--r-sm);text-decoration:none;color:var(--txt)}
.ui-paleta li[aria-selected="true"] a{background:var(--marca-dim)}
.ui-paleta li .anel{flex:none;width:32px;height:32px;border-radius:var(--r-sm);display:grid;place-items:center;background:var(--card2);color:var(--marca-txt)}
.ui-paleta li .anel .ico{width:16px;height:16px}
.ui-paleta li .txt{flex:1;min-width:0}
.ui-paleta li .txt b{display:block;font-weight:var(--fw-semi);font-size:var(--text-sm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ui-paleta li small{display:block;color:var(--txt2);font-size:var(--text-xs);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ui-paleta li .ir{width:15px;height:15px;color:var(--txt3)}
.ui-paleta-pe{display:flex;gap:14px;flex-wrap:wrap;padding:10px var(--s4);border-top:1px solid var(--linha);font-size:var(--text-xs);color:var(--txt2)}

/* ajuda dos atalhos */
.ui-atalhos{display:grid;grid-template-columns:auto 1fr;gap:var(--s2) var(--s4);align-items:center;font-size:var(--text-sm)}
.ui-atalhos dt{display:flex;gap:4px;justify-content:flex-end}
.ui-atalhos dd{margin:0;color:var(--txt2)}

/* ============================================================
   TOAST (evolução do .toast de brand.css: tom de erro e "Desfazer")
   ============================================================ */
.toast[data-tom="erro"]{background:var(--red-700);color:#fff}
:root[data-theme="dark"] .toast[data-tom="erro"]{background:var(--red-400);color:var(--neutral-950)}
.toast.show{pointer-events:auto}
.toast .ui-desfazer{font:inherit;font-weight:var(--fw-bold);color:var(--better-300);background:none;border:0;cursor:pointer;text-decoration:underline;margin-left:var(--s2)}
:root[data-theme="dark"] .toast .ui-desfazer{color:var(--better-800)}
@media(max-width:640px){.toast{left:var(--s3);right:var(--s3);transform:none;bottom:var(--s3)}}

/* ============================================================
   CARREGAMENTO SEM PISCAR
   O conteúdo anterior fica na tela; passado o atraso, ele esmaece e uma
   barra fina corre no topo. O esqueleto só entra em troca de tela.
   ============================================================ */
#main[aria-busy="true"]{position:relative}
#main[aria-busy="true"]>*{opacity:.55;transition:opacity var(--t)}
.ui-progresso{position:fixed;left:0;top:0;height:3px;width:100%;z-index:300;pointer-events:none;overflow:hidden}
.ui-progresso::before{content:"";position:absolute;inset:0;width:40%;background:var(--ui-gradiente);animation:ui-prog 1s ease-in-out infinite}
@keyframes ui-prog{from{transform:translateX(-100%)}to{transform:translateX(260%)}}
@media(prefers-reduced-motion:reduce){.ui-progresso::before{animation:none;width:100%}.ui-gaveta{animation:none}}

.ui-sk-metricas{height:104px;border-radius:var(--r-lg);margin-bottom:22px}
.ui-sk-head{height:34px;width:300px;max-width:70%;margin:6px 0 10px}
.ui-sk-sub{height:14px;width:420px;max-width:90%;margin-bottom:var(--s6)}

@media print{.topo-acoes,.ui-gaveta,.ui-paleta,.ui-progresso{display:none !important}}

/* topo: a migalha ocupa a esquerda; ambiente, busca, sino e usuário vão à direita */
.topbar>.row:first-child{margin-right:auto}

/* ============================================================
   SEÇÕES DE CONFIGURAÇÃO (al-settings do CRM) — secoesConfig()
   ============================================================ */
.ui-config{display:grid;grid-template-columns:220px minmax(0,1fr);gap:var(--s5);align-items:start}
.ui-config-nav{display:grid;gap:4px;position:sticky;top:calc(72px + var(--s5))}
.ui-config-nav button{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:10px 12px;border-radius:var(--ui-r-ctl);border:0;background:none;cursor:pointer;
  font:inherit;font-size:var(--text-sm);font-weight:var(--fw-semi);color:var(--txt);
}
.ui-config-nav button .ico{width:16px;height:16px;color:var(--txt2);flex:none}
.ui-config-nav button span:not(.ui-contagem){flex:1;min-width:0}
.ui-config-nav button:hover{background:var(--card2)}
.ui-config-nav button[aria-current="page"]{background:var(--marca-dim);color:var(--marca-txt);box-shadow:inset 3px 0 0 var(--marca)}
.ui-config-nav button[aria-current="page"] .ico{color:var(--marca-txt)}
.ui-config-nav button:focus-visible{outline:2px solid var(--marca-txt);outline-offset:-2px}
.ui-config-corpo{min-width:0}
.ui-config-secao>*+*{margin-top:var(--s4)}
@media(max-width:860px){
  /* minmax(0,…): a faixa de seções rola por dentro em vez de alargar a página */
  .ui-config{grid-template-columns:minmax(0,1fr)}
  .ui-config-nav{position:static;grid-auto-flow:column;grid-auto-columns:max-content;overflow-x:auto;scrollbar-width:thin;padding-bottom:4px}
  .ui-config-nav button{white-space:nowrap}
  .ui-config-nav button[aria-current="page"]{box-shadow:inset 0 -3px 0 var(--marca)}
}

/* linha de status (al-status-row do CRM): rótulo + descrição à esquerda, ação à direita */
.ui-linha-status{display:flex;justify-content:space-between;align-items:center;gap:var(--s4);padding:var(--s3) 0;border-top:1px solid var(--linha);flex-wrap:wrap}
.ui-linha-status:first-child{border-top:0}
.ui-linha-status>div:first-child{min-width:0;flex:1 1 240px}
.ui-linha-status b{font-size:var(--text-sm)}
.ui-linha-status small{display:block;font-size:var(--text-xs);color:var(--txt2);overflow-wrap:anywhere}

/* bloco de conteúdo técnico (JSON de payload, configuração) — rola por dentro */
.ui-json{
  font-family:var(--mono);font-size:var(--text-xs);line-height:1.5;color:var(--txt2);
  background:var(--card2);border:1px solid var(--linha);border-radius:var(--ui-r-ctl);
  padding:var(--s3);margin:0;max-height:60vh;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;
}

/* ============================================================
   TELA DE ACESSO (AuthScreen do CRM) — login, recuperar e nova senha
   Painel da marca à esquerda (grafite + anel lima cortado pela borda),
   painel claro à direita com a marca e o formulário, filete lima na base.
   ============================================================ */
.ui-auth{
  position:fixed;inset:0;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  background:var(--bg);color:var(--txt);overflow:auto;
}
.ui-auth-marca{
  position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;
  padding:clamp(32px,6vw,84px);background:var(--neutral-950);color:#fff;
}
.ui-auth-marca .logo{color:#fff;width:190px;height:auto}
.ui-auth-pitch{position:relative;z-index:1;max-width:460px}
.ui-auth-pitch h2{font-size:clamp(34px,4.2vw,58px);line-height:1.04;letter-spacing:-.03em;font-weight:var(--fw-bold);color:#fff}
.ui-auth-pitch h2 em{font-style:normal;color:var(--better-400)}
.ui-auth-pitch p{margin-top:var(--s4);font-size:var(--text-base);line-height:1.55;color:rgba(255,255,255,.72)}
.ui-auth-rodape{position:relative;z-index:1;font-size:var(--text-xs);color:rgba(255,255,255,.5)}
.ui-auth-anel{position:absolute;right:-1px;bottom:-1px;width:min(52%,400px);height:auto;pointer-events:none}
.ui-auth-painel{display:flex;align-items:center;justify-content:center;padding:var(--s10) var(--s6) var(--s12)}
.ui-auth-caixa{width:100%;max-width:400px}
.ui-auth-caixa>.logo{width:170px;height:auto;margin-bottom:var(--s8);color:var(--txt)}
.ui-auth-caixa h1{font-size:30px;line-height:1.15;letter-spacing:-.02em;font-weight:var(--fw-bold);margin-bottom:var(--s2)}
.ui-auth-caixa .sub{font-size:var(--text-sm);color:var(--txt2);margin-bottom:var(--s6)}
.ui-auth-caixa .btn.block{margin-top:var(--s5);min-height:46px}
.ui-auth-caixa .auth-link{display:inline-block;margin-top:var(--s1)}
.ui-auth-campo{position:relative;display:block}
.ui-auth-campo>.ico{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--txt3);pointer-events:none}
.ui-auth-campo input{padding-left:38px}
.ui-auth-erro{margin-top:var(--s4)}
.ui-auth-erro:empty{display:none}
.ui-auth-faixa{position:fixed;left:0;right:0;bottom:0;height:6px;background:var(--ui-gradiente);pointer-events:none}
@media(max-width:860px){
  .ui-auth{position:static;min-height:100dvh;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr}
  .ui-auth-marca{padding:var(--s6) var(--s5) var(--s5);gap:var(--s3)}
  .ui-auth-marca .logo{width:150px}
  .ui-auth-pitch h2{font-size:24px}
  .ui-auth-pitch p,.ui-auth-rodape,.ui-auth-anel{display:none}
  .ui-auth-painel{align-items:flex-start;padding:var(--s7) var(--s5) var(--s10)}
  .ui-auth-caixa>.logo{display:none}
  .ui-auth-caixa h1{font-size:24px}
  /* abaixo de 16px o Safari do iPhone dá zoom ao focar o campo */
  .ui-auth-caixa input{font-size:16px}
}
.ui-auth{width:100%}
#login:has(>.ui-auth){padding:0}

/* ============================================================
   FORMULÁRIO COM RESUMO FIXO (Nova proposta do CRM) e ASSISTENTE EM PASSOS
   (Novo contrato B2B do CRM) — assistente() em ui/base.js
   ============================================================ */
.ui-form-resumo{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:var(--s5);align-items:start}
.ui-form-resumo>*{min-width:0}
.ui-form-col,.ui-resumo{display:grid;gap:var(--s4);min-width:0}
.ui-form-col>.ui-painel+.ui-painel,.ui-resumo>.ui-painel+.ui-painel{margin-top:0}
.ui-resumo{position:sticky;top:calc(72px + var(--s5))}
.ui-resumo .calc{background:none;border:0;border-radius:0;padding:0}
.ui-resumo .alerta{margin:0}
@media(max-width:1100px){
  .ui-form-resumo{grid-template-columns:minmax(0,1fr)}
  .ui-resumo{position:static}
}
.ui-assistente .ui-passos{margin:0 0 var(--s5)}
.ui-passos .ui-etapa{padding:0}
.ui-passos button{
  display:flex;align-items:center;gap:6px;width:100%;min-width:0;padding:8px 2px 4px;
  background:none;border:0;font:inherit;color:inherit;text-align:left;cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ui-passos button>span:last-child{overflow:hidden;text-overflow:ellipsis}
.ui-passos button:hover{color:var(--txt)}
.ui-passos button:focus-visible{outline:2px solid var(--marca-txt);outline-offset:2px;border-radius:4px}
.ui-passo-n{
  flex:none;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;
  background:var(--card2);border:1px solid var(--linha-forte);font-size:11px;font-weight:var(--fw-bold);color:var(--txt2)
}
.ui-etapa[data-estado="feita"] .ui-passo-n{background:var(--marca-dim);border-color:var(--marca-borda);color:var(--marca-txt)}
.ui-etapa[data-estado="atual"] .ui-passo-n{background:var(--marca);border-color:var(--marca);color:var(--neutral-950)}
.ui-assistente-titulo{display:flex;flex-direction:column;gap:2px;font-size:19px;font-weight:var(--fw-bold);letter-spacing:-.01em;margin-bottom:var(--s4);outline:0}
.ui-assistente-pe{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);flex-wrap:wrap;padding:var(--s4) 22px;border-top:1px solid var(--linha);background:var(--card2)}
.ui-assistente-acoes{display:flex;gap:var(--s2);flex-wrap:wrap;margin-left:auto}
.ui-assistente-acoes>[data-passo-final]{display:contents}
@media(max-width:860px){.ui-assistente-pe{padding:var(--s3) var(--s4)}}
/* Celular: etiqueta com texto longo (ex.: "Assinatura sem venda registrada: …" nas órfãs) quebra a linha e
   não passa da largura do pai — o .chip da brand.css é nowrap e estourava a tela. */
@media(max-width:640px){.chip{white-space:normal;max-width:100%;overflow-wrap:anywhere;line-height:1.35}}