/* ===================================================================
   Quimatic Design System — folha dedicada às telas repaginadas.
   Tudo escopado sob .ds para NÃO afetar as telas antigas (app.css).
   Paleta oficial: preto #1A1A1A + laranja #F05A22 + cinzas. Sem azul.
   =================================================================== */
:root{
  --qmblue:#1A1A1A; --qmblue-dark:#0d0d0d; --qmblue-light:#2a2a2a;
  --qmorange:#F05A22; --qmorange-dark:#b83c0e; --qmorange-light:#ff7a4a;
  /* O laranja da MARCA (#F05A22) não muda: ele é fundo, nunca texto.
     O `--qmorange-dark` é texto (link, valor, nome do registro) e o antigo
     #c94410 passava só no branco: 4,34:1 no fundo da página e 4,05:1 na
     caixa de alerta — os dois reprovam. O #b83c0e passa nos quatro fundos
     onde ele de fato aparece (5,69 · 5,08 · 4,74 · 5,38). */
  --qmgray-50:#F2F2F2; --qmgray-100:#E8E8E8; --qmgray-200:#E0E0E0;
  --qmgray-500:#8a8a8a; --qmgray-700:#555555; --qmgray-900:#1A1A1A;
  --ds-sidebar:248px;
  --ds-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
body.ds{margin:0;padding-top:4px;background:var(--qmgray-50);color:var(--qmgray-900);
  font-family:var(--ds-font);font-size:15px;line-height:1.45;-webkit-text-size-adjust:100%}
.ds *{box-sizing:border-box}
.ds h1,.ds h2,.ds h3,.ds h4{margin:0;font-weight:700}
.ds a{color:inherit;text-decoration:none}
.ds-topline{position:fixed;top:0;left:0;width:100vw;height:4px;background:var(--qmorange);z-index:9999;pointer-events:none}
/* A UTILIDADE QUE ESCONDE TEM DE VENCER A REGRA QUE PINTA.
   Sem `!important` estas duas linhas tem especificidade (0,0,1,0) e QUALQUER
   regra de dois seletores as derruba — `.ds .ds-iconbtn--criar{display:flex}`
   e o suficiente. Medido na producao em 26/08/2026: o hamburguer do celular
   aparecia no DESKTOP, ao lado da lateral que ja estava aberta, e clicar nele
   nao fazia nada visivel. Estava assim desde que o shell nasceu, e ninguem viu
   — botao a mais nao da erro, nao aparece em teste de rota e ninguem reclama
   de um icone.
   As gemeas dentro do `@media` ja usavam `!important`; eram as unicas duas que
   funcionavam. E a mesma familia da armadilha do `.ds-btn--orange` contra
   `.ds a{color:inherit}` (D: contraste, 26/08): especificidade derrubando uma
   regra em silencio.

   E A ASSIMETRIA ABAIXO E DE PROPOSITO, custou uma publicacao para aparecer:
   **so quem ESCONDE leva `!important`.** Esconder e uma ordem — ou o elemento
   some ou nao some, e nao ha o que negociar. MOSTRAR nao e: `inline-flex` aqui
   e so um valor de partida, e quem tem layout proprio precisa poder venc-lo.
   Com `!important` nos dois lados, o `.ds-user{display:block}` perdia e o nome
   colava no cracha do perfil — que e exatamente o defeito que a regra do
   `.ds-user` foi escrita para consertar. *Conserto que ignora por que a linha
   vizinha existe desfaz o conserto anterior.* */
.ds-only-desk{display:inline-flex}
.ds-only-mobile{display:none!important}

/* ---------- Shell ---------- */
.ds-shell{display:flex;min-height:100vh}
.ds-sidebar{width:var(--ds-sidebar);flex-shrink:0;background:var(--qmblue);color:#cbd5e1;
  display:flex;flex-direction:column;position:sticky;top:4px;height:calc(100vh - 4px)}
.ds-brand{display:flex;align-items:center;gap:10px;padding:16px 16px 14px;border-bottom:1px solid rgba(255,255,255,.08)}
.ds-brand__logo{width:34px;height:34px;border-radius:7px;background:#fff;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.ds-brand__text{color:#fff;font-weight:600;font-size:.95rem;line-height:1.1}
.ds-brand__text small{display:block;color:rgba(255,255,255,.45);font-size:.7rem;font-weight:400}
.ds-nav{flex:1;padding:10px 12px;overflow-y:auto}
/* ATENÇÃO: esta linha vive na barra lateral PRETA (#1A1A1A), não no branco.
   Aqui a regra se inverte — cinza claro PASSA (4,94:1) e o cinza de texto
   escuro REPROVA (2,33:1). Escurecer aqui foi um erro publicado em 26/08 e
   pego medindo a produção depois de subir. O #9a9a9a dá 6,06:1. */
.ds-nav__section{font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;color:#9a9a9a;padding:14px 8px 6px}
/* O ITEM DE MENU E UM ALVO, e ate 27/08/2026 ele tinha 39 px de altura — o
   unico ponto do celular abaixo dos 44 px minimos, medido a 390x844 nos 14
   itens da gaveta. A lei 3 pede 60; 60 x 14 nao cabe em 844 px de tela, e
   inventar rolagem para o menu seria trocar um defeito por outro. Ficam 44 no
   desktop e 52 no celular, que e o mesmo alvo dos campos e das capsulas.
   *Os 60 px so cabem quando o menu encurtar* — e o que encurta o menu e tirar
   dele Buscar, Criar e Caixa de entrada, que sao gestos de cabecalho. */
.ds-nav__item{display:flex;align-items:center;gap:11px;padding:9px 12px;min-height:44px;border-radius:7px;color:#cbd5e1;font-weight:500;font-size:.9rem;margin-bottom:2px;transition:background .15s,color .15s}
/* O sair e um `button` dentro de um `form` (ele POSTA, com token — link nao
   serve). Aqui ele veste o mesmo item de menu para nao virar um controle de
   outra especie no meio da lista. */
/* O SAIR FICA FORA DA ROLAGEM DO MENU, e por isso precisa de uma linha.
   Medido na producao a 1.445x812 em 27/08/2026, logo depois de publicar: o
   `nav` rola (807 px de conteudo em 446 de altura) e o sair fica fixo embaixo
   — encostando em qualquer item que a rolagem deixe no fim. Na primeira tela
   ele aparecia colado no cabecalho PROTOTIPOS, como se fosse um item daquela
   secao. A linha separa o que e navegacao do que e saida. */
.ds-nav__sair{padding:8px 10px 6px;margin-top:2px;border-top:1px solid rgba(255,255,255,.08)}
.ds-nav__item--sair{width:100%;background:transparent;border:0;font-family:inherit;text-align:left;cursor:pointer}
.ds-nav__item--sair:hover{background:rgba(255,255,255,.06);color:#fff}
.ds-nav__item:hover{background:rgba(255,255,255,.06);color:#fff}
/* Texto PRETO sobre o laranja, e não branco: branco dá 3,39:1 e reprova;
   o preto da marca dá 5,13:1. A cor da marca não muda — muda o texto. */
.ds-nav__item.is-active{background:var(--qmorange);color:var(--qmgray-900)}
.ds-nav__ic{width:19px;height:19px;display:inline-flex;flex-shrink:0}
.ds-nav__ic svg{width:19px;height:19px}
.ds-sidebar__foot{padding:12px 16px;border-top:1px solid rgba(255,255,255,.08);color:rgba(255,255,255,.4);font-size:.72rem;display:flex;align-items:center;gap:7px}
.ds-dot{width:6px;height:6px;border-radius:50%;background:var(--qmorange);display:inline-block}

.ds-main{flex:1;min-width:0;display:flex;flex-direction:column}
.ds-header{position:sticky;top:4px;z-index:20;background:#fff;
  box-shadow:inset 0 -2px 0 var(--qmorange),0 1px 3px rgba(0,0,0,.06);
  display:flex;align-items:center;gap:12px;padding:11px 22px}
.ds-header__title{font-size:1.02rem;color:var(--qmblue);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ds-header__right{margin-left:auto;display:flex;align-items:center;gap:14px}
.ds-user{display:block;text-align:right;line-height:1.15}
.ds-user__name{font-size:.85rem;font-weight:600;color:#333}
.ds-user__chip{display:inline-block;background:var(--qmblue);color:#fff;font-size:9px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;border-radius:999px;padding:1px 8px;margin-top:1px}
.ds-logout{margin:0} /* legado: o sair saiu do cabecalho em 27/08/2026 e mora no menu (.ds-nav__sair) */
/* O CAMINHO DE VOLTA — a primeira coisa do conteudo numa tela que nao e lista.
   Alvo de 44 px, e no celular 52, como todo o resto. Nao usa `position:fixed`
   de proposito: barra fixa custa altura em TODA rolagem, e a volta e um gesto
   de uma vez so. */
.ds-volta{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin:0 0 6px;
  color:var(--qmgray-700);font-weight:600;font-size:.9rem}
.ds-volta:hover{color:var(--qmorange-dark)}
.ds-volta__seta{font-size:1.35rem;line-height:1}
.ds-content{flex:1;padding:22px;max-width:1240px;width:100%;margin:0 auto}
.ds-footer{background:#fff;border-top:1px solid var(--qmgray-200);padding:12px 22px;font-size:.75rem;color:var(--qmgray-700);display:flex;justify-content:space-between}
.ds-backdrop{display:none}

/* ---------- Buttons ---------- */
.ds-btn{display:inline-flex;align-items:center;gap:.4rem;border:1px solid transparent;border-radius:6px;
  padding:.5rem .85rem;font-weight:600;font-size:.85rem;cursor:pointer;background:#fff;color:var(--qmblue)}
.ds-btn--ghost{border-color:var(--qmgray-200)}
.ds-btn--ghost:hover{background:var(--qmgray-100)}
.ds-btn--orange{background:var(--qmorange);color:var(--qmblue)}
/* Especificidade de proposito: `.ds a{color:inherit}` (0,0,1,1) vencia
   `.ds-btn--orange` (0,0,1,0), e o mesmo botao saia preto quando era <a>
   e branco quando era <button>. Preto sobre laranja da 5,13:1 e passa;
   branco dava 3,39:1 e reprovava - entao a regra antiga e que estava errada. */
.ds a.ds-btn--orange,.ds button.ds-btn--orange{color:var(--qmblue)}
/* O hover clareia em vez de escurecer: preto sobre --qmorange-dark da 3,58:1
   e reprovaria; sobre --qmorange-light da 6,74:1. */
.ds-btn--orange:hover{background:var(--qmorange-light)}
.ds-btn svg{width:17px;height:17px}
.ds-iconbtn{width:38px;height:38px;border-radius:7px;border:1px solid var(--qmgray-200);background:#fff;
  display:inline-grid;place-items:center;cursor:pointer;color:var(--qmblue)}
.ds-iconbtn svg{width:20px;height:20px}

/* ---------- Page head / filters ---------- */
.ds-filters{background:#fff;border:1px solid var(--qmgray-200);border-radius:8px;padding:12px 14px;display:flex;flex-wrap:wrap;gap:14px 28px;margin-bottom:16px}
.ds-filters__row{display:flex;align-items:center;gap:10px}
.ds-filters__label{font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--qmgray-700);font-weight:700}
.ds-chips{display:flex;gap:7px;flex-wrap:wrap}
.ds-chip{border:1px solid var(--qmgray-200);background:#fff;color:var(--qmgray-700);border-radius:999px;
  padding:5px 13px;font-size:.8rem;font-weight:600}
.ds-chip:hover{background:var(--qmgray-100)}
.ds-chip.is-on{background:var(--qmblue);color:#fff;border-color:var(--qmblue)}

/* ---------- KPIs ---------- */
.ds-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px}
/* Variante de 3 colunas (tela de Início-termômetro, 08/09/2026): usada quando o
   conjunto de medidores não é múltiplo de 4 (6 tiles pessoais, 3 tiles do
   gestor). No mobile cai na mesma regra de 2 colunas do .ds-kpis normal. */
.ds-kpis--3{grid-template-columns:repeat(3,1fr)}
.ds-kpi{position:relative;overflow:hidden;background:#fff;border:1px solid var(--qmgray-200);border-radius:8px;padding:15px 16px}
.ds-kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--qmgray-200)}
.ds-kpi--black::before{background:var(--qmblue)}
.ds-kpi--orange::before{background:var(--qmorange)}
.ds-kpi__label{font-size:.76rem;color:var(--qmgray-700);font-weight:600}
.ds-kpi__val{font-size:1.65rem;font-weight:800;color:var(--qmblue);margin-top:5px;line-height:1}
.ds-kpi--orange .ds-kpi__val{color:var(--qmorange-dark)}
/* #8a8a8a sobre branco da 3,45:1 e reprova no minimo de 4,5:1; #555 da 7,46:1.
   O --qmgray-500 continua servindo para borda, icone e separador. */
.ds-kpi__sub{font-size:.74rem;color:var(--qmgray-700);margin-top:5px}
/* I1 (D151) — O CARTAO DO INICIO JA ERA LINK; O QUE FALTAVA ERA DIZER ISSO.
   A auditoria externa de 26/08: "se `Sem proximo passo · 2` nao abre a lista
   correspondente, o numero vira beco sem saida; se abre, nada na UI comunica
   isso". Ele abria desde sempre — e ninguem tinha como saber. Agora tem cursor
   de link, realce no toque e uma linha dizendo PARA ONDE leva. */
.ds-kpi{cursor:pointer;transition:border-color .15s,box-shadow .15s}
.ds-kpi:hover{border-color:var(--qmorange);box-shadow:0 2px 8px rgba(0,0,0,.06)}
.ds-kpi:focus-visible{outline:2px solid var(--qmorange);outline-offset:2px}
.ds-kpi__ir{font-size:.74rem;font-weight:700;color:var(--qmorange-dark);margin-top:7px;
  display:flex;align-items:center;gap:4px}
.ds-kpi:hover .ds-kpi__ir{text-decoration:underline}

/* ---------- Cards / grids / charts ---------- */
.ds-card{background:#fff;border:1px solid var(--qmgray-200);border-radius:8px;padding:16px}
.ds-card__title{font-size:.92rem;color:var(--qmblue)}
.ds-card__cap{font-size:.76rem;color:var(--qmgray-700);margin:2px 0 12px}
.ds-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.ds-grid-1{display:grid;grid-template-columns:1fr;gap:14px}
.ds-chartbox{position:relative;height:240px}
.ds-chartbox--sm{height:180px}
.ds-chartbox--tall{height:300px}
.ds-card--table{padding:6px}
@media(min-width:768px){.ds-card--table{padding:10px 14px}}

/* ---------- Section title ---------- */
.ds-section-title{display:flex;align-items:baseline;justify-content:space-between;margin:22px 0 10px}
.ds-section-title h3{font-size:1.02rem;color:var(--qmblue)}
.ds-section-title span{font-size:.78rem;color:var(--qmgray-700,#555555)}

/* ---------- Table ---------- */
.ds-table{width:100%;border-collapse:collapse;font-size:.86rem}
.ds-table th{text-align:left;font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;color:var(--qmgray-700);
  font-weight:700;padding:9px 10px;border-bottom:2px solid var(--qmgray-200)}
.ds-table td{padding:10px;border-bottom:1px solid var(--qmgray-100)}
.ds-table tbody tr:last-child td,.ds-table tr:last-child td{border-bottom:none}
.ds-table tr:hover td{background:var(--qmgray-50)}
.ds-table__empty{text-align:center;color:var(--qmgray-700,#555555);padding:22px}
.ds-rank{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:6px;
  background:var(--qmgray-100);color:var(--qmblue);font-weight:800;font-size:.78rem}
.ds-rank--top{background:var(--qmorange);color:var(--qmgray-900)}
.ds-inlinebar{display:inline-block;vertical-align:middle;height:7px;width:70px;border-radius:4px;
  background:var(--qmgray-100);overflow:hidden;margin-right:7px}
.ds-inlinebar>span{display:block;height:100%;background:var(--qmorange)}

/* ---------- Empty / note / flash ---------- */
.ds-empty{background:#fff;border:1px dashed var(--qmgray-200);border-left:4px solid var(--qmorange);
  border-radius:8px;padding:16px 18px;margin-bottom:16px;display:flex;flex-direction:column;gap:4px}
.ds-empty strong{color:var(--qmblue)}
.ds-empty span{color:var(--qmgray-700);font-size:.85rem}
.ds-note{font-size:.74rem;color:var(--qmgray-700,#555555);text-align:center;margin-top:18px}
.ds .flash-stack{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.ds .flash{border-radius:8px;padding:10px 14px;font-size:.85rem;border:1px solid}
.ds .flash--success{background:#e4f4ea;border-color:#bfe3cd;color:#1e6b3a}
.ds .flash--error,.ds .flash--danger{background:#fbe6e1;border-color:#f3c7bd;color:#b3341c}
.ds .flash--warning,.ds .flash--warn{background:#fbeede;border-color:#f2d8b4;color:#8a4c08}
.ds .flash--info{background:#eef2f7;border-color:#dbe2ea;color:#334}

/* ---------- Responsive: sidebar vira gaveta ---------- */
@media(max-width:900px){.ds-kpis,.ds-kpis--3{grid-template-columns:repeat(2,1fr)}.ds-grid-2{grid-template-columns:1fr}}
@media(max-width:767px){
  .ds-nav__item{min-height:52px}
  .ds-volta{min-height:52px}
  /* O SELO DE ETAPA SAI DA FRASE NO CELULAR, e o motivo e' medido: com 44 px de
     alvo dentro de uma linha de texto de 390 px, ele empurrava a identificacao
     de 50 px para 128. Em linha propria ele mantem o alvo e devolve a altura —
     e o ` · ` que o antecedia vira quebra, que e' o que a frase ja fazia. */
  .ds-ph__resumo .ds-selo-etapa{display:inline-flex;margin-top:2px}
  .ds-ph__resumo{line-height:1.5}
  .ds-only-desk{display:none!important}
  .ds-only-mobile{display:inline-grid!important}
  .ds-sidebar{position:fixed;top:0;bottom:0;left:0;height:100vh;z-index:60;transform:translateX(-100%);
    transition:transform .22s ease;box-shadow:0 0 24px rgba(0,0,0,.3)}
  .ds-sidebar.is-open{transform:translateX(0)}
  .ds-backdrop{display:block;position:fixed;inset:0;z-index:55;background:rgba(0,0,0,.5)}
  .ds-backdrop[hidden]{display:none}
  .ds-content{padding:16px 14px}
  .ds-header{padding:10px 14px}
  /* Tabela -> cartões */
  .ds-table--cards thead{display:none}
  .ds-table--cards tbody{display:block}
  .ds-table--cards tr{display:block;border:1px solid var(--qmgray-200);border-radius:8px;margin:0 0 10px;padding:6px 10px;background:#fff}
  /* A celula vira uma linha flex: rotulo a esquerda, conteudo a direita. Com
     DOIS filhos — um nome e um e-mail, um aparelho e a data em que entrou — os
     dois viravam itens flex lado a lado e ninguem encolhia: em /admin/usuarios
     o e-mail chegava a 545 px numa tela de 390, e a pagina inteira rolava de
     lado. Medido em 25/08/2026. `wrap` deixa o segundo filho descer, e o
     `min-width:0` desfaz o `auto` que impede um filho flex de encolher abaixo
     do proprio conteudo. */
  .ds-table--cards td{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:7px 0;
    flex-wrap:wrap;
    border:0!important;border-bottom:1px solid var(--qmgray-100)!important;text-align:right;width:auto!important}
  .ds-table--cards td>*{min-width:0;overflow-wrap:anywhere}
  /* Tabela de duas colunas que na verdade e uma lista rotulo/valor: no celular
     o `data-label` da celula do valor JA e o rotulo, e a celula do rotulo
     imprimia o nome do campo duas vezes — "NOME / Nome", "E-MAIL / E-mail". */
  .ds-table--cards td.ds-rotulo{display:none}
  .ds-table--cards tr td:last-child{border-bottom:0!important}
  .ds-table--cards td::before{content:attr(data-label);font-size:.7rem;text-transform:uppercase;letter-spacing:.03em;
    color:var(--qmgray-700);font-weight:700;text-align:left;flex:0 0 42%}
  .ds-inlinebar{width:56px}
}

/* ===================================================================
   FASE 2 — Telas do vendedor (login, início, wizard, detalhe, sucesso).
   Adições ao design system. Tudo escopado sob .ds. Mobile-first.
   Reusa tokens do :root já definido acima (preto/laranja/cinzas).
   =================================================================== */

.ds [hidden]{display:none!important}

/* ---------- Bare (login / reset senha), sem sidebar/header ---------- */
body.ds--bare{background:var(--qmgray-50)}
.ds-bare{min-height:calc(100vh - 4px);display:flex;flex-direction:column;justify-content:center;
  align-items:stretch;padding:24px 16px 40px}
.ds-authwrap{width:100%;max-width:360px;margin:0 auto}
.ds-authbrand{text-align:center;margin-bottom:20px}
.ds-authbrand__logo{width:74px;height:74px;border-radius:18px;background:#fff;display:grid;place-items:center;
  margin:0 auto 12px;box-shadow:0 6px 18px rgba(0,0,0,.12);border:1px solid var(--qmgray-200)}
.ds-authbrand__logo img,.ds-authbrand__logo svg{width:52px;height:52px}
.ds-authbrand h1{font-size:1.3rem;color:var(--qmblue);margin:0}
.ds-authbrand p{color:var(--qmgray-700,#555555);font-size:.85rem;margin:3px 0 0}
.ds-authnote{text-align:center;color:var(--qmgray-700,#555555);font-size:.75rem;margin-top:20px}
.ds-authfoot{text-align:center;margin-top:14px}
.ds-authfoot a{color:var(--qmorange-dark);font-size:.85rem;font-weight:600}
.ds-pwdwrap{position:relative}
.ds-pwdwrap .ds-input{padding-right:44px}
.ds-pwdwrap .toggle-pwd{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:transparent;
  border:0;font-size:1.05rem;cursor:pointer;padding:6px;line-height:1}

/* ---------- Barra inferior de abas (mobile) ---------- */
.ds-tabbar{display:none}
@media(max-width:767px){
  .ds-tabbar{display:flex;position:sticky;bottom:0;z-index:35;background:#fff;border-top:1px solid var(--qmgray-200);
    padding:6px 8px calc(8px + env(safe-area-inset-bottom));box-shadow:0 -3px 14px rgba(0,0,0,.06)}
  .ds-content--tabbar{padding-bottom:22px}
}
.ds-tab{flex:1;min-width:0;position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--qmgray-700,#555555);
  font-size:.68rem;font-weight:600;text-decoration:none;padding:4px 2px;background:transparent;border:0;font-family:inherit;cursor:pointer}
.ds-tab svg{width:22px;height:22px}
.ds-tab.is-active{color:var(--qmorange-dark)}
/* O icone da barra ganhou um envelope para o contador poder morar em cima
   dele. O numero e o que faz a barra funcionar: quem nao ve o numero nao
   abre a caixa - a mesma razao pela qual ele ja existia na lateral. */
.ds-tab__ic{position:relative;display:inline-grid;place-items:center;width:24px;height:24px}
.ds-tab__ic svg{width:24px;height:24px}
.ds-tab__cnt{position:absolute;top:-5px;right:-9px;min-width:17px;height:17px;padding:0 4px;
  border-radius:999px;background:var(--qmorange-dark);color:#fff;font-size:10px;font-weight:800;
  line-height:17px;text-align:center;box-shadow:0 0 0 2px #fff}
/* O contador já nasce no laranja escuro (5,69:1 com branco). No laranja
   claro, o branco dava 3,39:1 e o preto daria 3,00:1 sobre o escuro do
   estado ativo: é o único caso em que trocar o texto não resolvia. */
.ds-tab.is-active .ds-tab__cnt{background:var(--qmorange-dark)}
/* O BOTAO REDONDO DO MEIO DA BARRA (`destaque` no manifesto).
   Nasceu no CRM (`assets/crm/fase1.css`) e ficou preso la; quando o
   Cotacoes declarou "Nova cotacao" como destaque, o item saiu sem o
   circulo laranja - o estilo nao existia fora do CRM. Regra da casa:
   componente do shell mora no design system, nao na ferramenta. */
.ds-tab--criar{color:var(--qmgray-900,#1A1A1A);font-weight:700;margin-top:-6px}
.ds-tab--criar .ds-tab__ic{width:48px;height:48px;margin-top:-16px;border-radius:50%;
  /* Preto sobre laranja (5,13:1); branco reprovaria na regua de 4,5:1. */
  background:var(--qmorange,#F05A22);color:var(--qmblue,#1A1A1A);
  display:grid;place-items:center;box-shadow:0 2px 8px rgba(0,0,0,.22)}
.ds-tab--criar .ds-tab__ic svg{width:26px;height:26px}
.ds-tab--criar.is-active .ds-tab__ic{background:var(--qmorange-light,#ff7a4a)}
.ds-tab--cta{position:relative;top:-14px}
.ds-tab--cta .ds-tab__ic{width:52px;height:52px;border-radius:50%;background:var(--qmorange);color:var(--qmgray-900);
  display:grid;place-items:center;box-shadow:0 6px 16px rgba(240,90,34,.45)}
.ds-tab--cta .ds-tab__ic svg{width:26px;height:26px}

/* ---------- Barra de ação do wizard (sticky) ---------- */
.ds-wizbar{position:sticky;bottom:0;z-index:30;display:flex;gap:10px;background:#fff;
  border-top:1px solid var(--qmgray-200);padding:12px 14px calc(12px + env(safe-area-inset-bottom));
  margin:18px -14px 0;box-shadow:0 -3px 14px rgba(0,0,0,.06)}
@media(min-width:768px){.ds-wizbar{margin:18px -22px 0;padding-left:22px;padding-right:22px;border-radius:0}}
.ds-wizbar .ds-btn{flex:1;justify-content:center;padding:.8rem 1rem;font-size:.92rem}
.ds-wizbar .ds-btn--back{flex:0 0 auto;padding-left:16px;padding-right:16px}
.ds-wizbar .ds-btn[disabled]{opacity:.45;cursor:not-allowed}

/* ---------- Botões extra ---------- */
.ds-btn--block{width:100%;justify-content:center}
.ds-btn--sm{padding:.42rem .7rem;font-size:.8rem;border-radius:6px}
.ds-btn--lg{padding:.8rem 1.1rem;font-size:.95rem}
.ds-btn--danger{background:transparent;color:var(--qmorange-dark);border-color:transparent;font-weight:600}
.ds-btn--danger:hover{background:#fbe6e1}

/* ---------- Saudação / títulos ---------- */
.ds-greet{font-size:1.3rem;color:var(--qmblue);font-weight:700;margin:2px 0 14px}
.ds-muted{color:var(--qmgray-700)}
.ds-metaline{color:var(--qmgray-700);font-size:.85rem;margin:0 0 14px}
.ds-metaline strong{color:var(--qmblue)}

/* ---------- Badges de empresa ---------- */
.ds .badge{display:inline-grid;place-items:center;min-width:40px;height:22px;padding:0 8px;border-radius:6px;
  font-size:.7rem;font-weight:800;letter-spacing:.03em;color:#fff;text-transform:uppercase}
.ds .badge--qm,.ds .badge--quimatic{background:var(--qmblue)}
.ds .badge--deq{background:var(--qmorange);color:var(--qmgray-900)}
.ds .badge--restrito{background:#fff;color:var(--qmorange-dark);border:1px solid var(--qmgray-200);
  min-width:0;height:auto;padding:2px 7px;font-weight:700;font-size:.68rem;text-transform:none}

/* ---------- Status pill ---------- */
.ds-status{display:inline-block;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;
  padding:2px 9px;border-radius:999px;background:#e4f4ea;color:#1e6b3a}
.ds-status--rascunho{background:#fbeede;color:#8a4c08}
.ds-status--cancelada{background:#fbe6e1;color:#b3341c}

/* ---------- Rascunhos (draft cards) ---------- */
.ds-draft{display:flex;align-items:center;gap:11px;background:#fff;border:1px solid var(--qmgray-200);
  border-left:4px solid var(--qmorange);border-radius:8px;padding:11px 12px;margin-bottom:10px}
.ds-draft__txt{flex:1;min-width:0}
.ds-draft__cli{display:block;font-weight:700;color:var(--qmblue);font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ds-draft__meta{display:block;color:var(--qmgray-700,#555555);font-size:.75rem;margin-top:2px}
.ds-draft__acts{display:flex;flex-direction:column;gap:6px;flex-shrink:0}
.ds-draft__acts form{margin:0}
.ds-draft__acts .ds-btn{width:100%}

/* ---------- Search row / filtros extra ---------- */
.ds-searchrow{display:flex;gap:8px}
.ds-searchrow .ds-input{flex:1}
.ds-filters__block{display:flex;flex-direction:column;gap:12px}
.ds-filters__foot{margin-top:2px}
.ds-filters__foot a{color:var(--qmorange-dark);font-size:.8rem;font-weight:600}

/* ---------- Lista de cotações ---------- */
.ds-qlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.ds-qitem{display:block;background:#fff;border:1px solid var(--qmgray-200);border-radius:8px;padding:12px;
  text-decoration:none;color:inherit}
.ds-qitem:hover{border-color:var(--qmgray-700,#555555)}
.ds-qitem__top{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.ds-qitem__num{font-weight:800;color:var(--qmblue);font-size:.92rem}
.ds-qitem__cli{color:var(--qmgray-700);font-size:.86rem;margin-left:auto;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;max-width:50%}
.ds-qitem__bot{display:flex;align-items:center;justify-content:space-between}
.ds-qitem__total{font-weight:800;color:var(--qmblue);font-size:1rem}
.ds-qitem__date{color:var(--qmgray-700,#555555);font-size:.76rem}
.ds-qitem__seller{color:var(--qmgray-700,#555555);font-size:.72rem}

/* ---------- Paginação ---------- */
.ds-pag{display:flex;align-items:center;justify-content:space-between;margin-top:14px;gap:8px}
.ds-pag span.ds-pag__st{font-size:.8rem;color:var(--qmgray-700,#555555)}
/* "1-25 de 84 - faltam 59" (L3, D151). Numeros que se comparam entre paginas
   pedem largura fixa de digito, senao a contagem dança de posicao a cada clique
   e o olho perde a referencia. */
.ds-pag__conta{font-size:.82rem;color:var(--qmgray-700,#555555);font-variant-numeric:tabular-nums}
.ds-pag__conta strong{color:var(--qmblue,#1A1A1A)}
@media (max-width:767px){
  /* No celular a contagem vai para a linha de baixo, inteira: ela e' dado, e
     dado truncado nao informa. */
  .ds-pag{flex-wrap:wrap}
  .ds-pag__conta{flex:1 0 100%;order:3}
}
.ds-pag__btn--off{opacity:.45;pointer-events:none}
/* O pe da lista tem DOIS caminhos: o de ir adiante e o de voltar ao comeco.
   Eles andam juntos e por isso moram no mesmo bloco — no celular a linha
   quebra, e sem o `wrap` o "Voltar ao comeco" sairia da tela pela direita,
   que e o mesmo defeito que a faixa de abas pagou em 26/08. O alvo de 44 px
   vale para o link tanto quanto para o botao: quem esta na pagina 3 e quem
   mais precisa dele. */
.ds-pag__vai{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px}
.ds-pag__volta{display:inline-flex;align-items:center;min-height:44px;
  color:var(--qmgray-700,#555555);text-decoration:underline;font-size:.85rem}

/* ---------- Stepper (mobile-first, barras) ---------- */
.ds-stepper{display:flex;gap:5px;list-style:none;margin:0 0 16px;padding:0}
.ds-stepper li{flex:1;text-align:center}
.ds-stepper__bar{height:5px;border-radius:3px;background:var(--qmgray-200);margin-bottom:6px}
.ds-stepper li.is-done .ds-stepper__bar,.ds-stepper li.is-active .ds-stepper__bar{background:var(--qmorange)}
.ds-stepper__lb{font-size:.68rem;font-weight:700;color:var(--qmgray-700,#555555)}
.ds-stepper li.is-active .ds-stepper__lb{color:var(--qmorange-dark)}
.ds-stepper li.is-done .ds-stepper__lb{color:var(--qmblue)}

/* ---------- Formulários ---------- */
.ds-field{margin-bottom:16px;border:0;padding:0}
.ds-field__legend,.ds-field>legend{font-size:.82rem;font-weight:700;color:var(--qmblue);margin-bottom:8px;padding:0;display:block}
.ds-req{color:var(--qmorange-dark)}
.ds-hint{font-size:.75rem;color:var(--qmgray-700,#555555);margin:7px 0 0}
.ds-inputgroup{display:block;margin-bottom:11px}
.ds-inputgroup>span{display:block;font-size:.8rem;font-weight:600;color:var(--qmgray-700);margin-bottom:4px}
.ds-input{width:100%;border:1px solid var(--qmgray-200);border-radius:8px;padding:11px 12px;font:inherit;
  font-size:.92rem;background:#fff;color:var(--qmblue)}
.ds-input:focus{outline:none;border-color:var(--qmorange);box-shadow:0 0 0 3px rgba(240,90,34,.14)}
textarea.ds-input{resize:vertical}
.ds-input--sm{padding:8px 9px;font-size:.85rem}
.ds-fielderror{display:block;color:#b3341c;font-size:.78rem;font-style:normal;margin-top:5px}

/* Radio-cards (empresa emissora) */
.ds-radiocards{display:grid;gap:9px}
.ds-radiocard{display:block;border:1.5px solid var(--qmgray-200);border-radius:10px;padding:12px 40px 12px 13px;
  cursor:pointer;background:#fff;position:relative}
.ds-radiocard input{position:absolute;opacity:0;pointer-events:none}
.ds-radiocard__t{display:block;font-weight:700;color:var(--qmblue);font-size:.95rem}
.ds-radiocard__s{display:block;color:var(--qmgray-700,#555555);font-size:.78rem;margin-top:2px}
.ds-radiocard__ck{position:absolute;top:14px;right:13px;width:20px;height:20px;border-radius:50%;border:2px solid var(--qmgray-200)}
.ds-radiocard input:checked ~ .ds-radiocard__ck{border-color:var(--qmorange);background:var(--qmorange)}
.ds-radiocard input:checked ~ .ds-radiocard__ck::after{content:"";position:absolute;left:5px;top:2px;width:5px;height:9px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.ds-radiocard:has(input:checked){border-color:var(--qmorange);background:#fff7f3}

/* Pills radio (tabela / desconto) */
.ds-pills{display:flex;gap:8px;flex-wrap:wrap}
.ds-pill{position:relative;border:1.5px solid var(--qmgray-200);background:#fff;color:var(--qmgray-700);
  border-radius:999px;padding:8px 16px;font-size:.85rem;font-weight:700;cursor:pointer;display:inline-flex;align-items:center}
.ds-pill input{position:absolute;opacity:0;pointer-events:none}
.ds-pill:has(input:checked){border-color:var(--qmorange);background:var(--qmorange);color:var(--qmgray-900)}
.ds-pill--lock{background:var(--qmgray-100);color:var(--qmgray-700);border-style:dashed;cursor:default}
.ds-inputinline{display:inline-flex;flex-direction:column;gap:3px;margin-top:8px}
.ds-inputinline>span{font-size:.72rem;font-weight:700;color:var(--qmgray-700)}
.ds-inputinline .ds-input{max-width:150px}

/* Clientes recentes */
.ds-recent{border:1px dashed var(--qmgray-200);border-radius:9px;padding:10px 12px;margin-bottom:12px}
.ds-recent>summary{font-size:.82rem;font-weight:600;color:var(--qmblue);cursor:pointer}
.ds-recent ul{list-style:none;margin:9px 0 0;padding:0;display:flex;flex-direction:column;gap:2px}
.ds-recent .link-btn{background:transparent;border:0;color:var(--qmorange-dark);font:inherit;font-size:.86rem;
  font-weight:600;text-align:left;cursor:pointer;padding:6px 0;width:100%}
.ds-recent .link-btn small{color:var(--qmgray-700,#555555);font-weight:400}

/* Resultados de busca de produto (ancorado) */
.ds-results{border:1px solid var(--qmgray-200);border-radius:10px;background:#fff;margin-top:10px;overflow:hidden}
.ds-results__hd{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;background:var(--qmgray-50);
  border-bottom:1px solid var(--qmgray-200);font-size:.78rem;color:var(--qmgray-700)}
.ds-results__x{background:transparent;border:0;font-size:1rem;color:var(--qmgray-700,#555555);cursor:pointer;text-decoration:none;line-height:1}
.ds-results__empty{padding:14px 12px;color:var(--qmgray-700,#555555);font-size:.85rem}
.ds-pitem{padding:12px;border-bottom:1px solid var(--qmgray-100)}
.ds-pitem:last-child{border-bottom:0}
.ds-pitem__hd{display:flex;align-items:center;gap:8px;margin-bottom:3px;flex-wrap:wrap}
.ds-pitem__cod{font-weight:800;color:var(--qmblue);font-size:.88rem}
.ds-pitem__price{margin-left:auto;background:var(--qmgray-100);border-radius:6px;padding:2px 8px;font-weight:700;
  font-size:.8rem;color:var(--qmblue)}
.ds-pitem__nm{font-size:.86rem;color:var(--qmgray-900);margin-bottom:5px}
.ds-pitem__meta{display:flex;gap:12px;flex-wrap:wrap;font-size:.73rem;color:var(--qmgray-700,#555555);margin-bottom:9px}
.ds-pitem__form{display:flex;align-items:flex-end;gap:8px;flex-wrap:wrap}
.ds-pitem__form .ds-inputinline{margin-top:0}
.ds-pitem__form .ds-input{width:74px;max-width:none}
.ds-pitem__form select.ds-input{width:auto;min-width:78px}

/* Carrinho (itens adicionados) */
.ds-cart{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.ds-citem{background:#fff;border:1px solid var(--qmgray-200);border-radius:9px;padding:11px 12px}
.ds-citem__hd{display:flex;align-items:center;gap:8px;margin-bottom:3px}
.ds-citem__cod{font-weight:800;color:var(--qmblue);font-size:.86rem}
.ds-citem__qtd{margin-left:auto;background:var(--qmblue);color:#fff;border-radius:6px;padding:1px 8px;font-size:.75rem;font-weight:700}
.ds-citem__nm{font-size:.85rem;color:var(--qmgray-900)}
.ds-citem__meta{display:flex;gap:10px;flex-wrap:wrap;font-size:.74rem;color:var(--qmgray-700,#555555);margin-top:4px}
.ds-citem__rm{margin-top:7px}
.ds-citem__rm form{margin:0}

/* Checkbox card (condições padrão) */
.ds-chkcard{display:block;border:1.5px solid var(--qmgray-200);border-radius:10px;padding:13px;cursor:pointer;
  background:#fff;margin-bottom:12px;position:relative}
.ds-chkcard input{position:absolute;opacity:0;pointer-events:none}
.ds-chkcard__row{display:flex;align-items:center;gap:10px}
.ds-chkcard__box{width:22px;height:22px;border-radius:6px;border:2px solid var(--qmgray-200);flex-shrink:0;position:relative}
.ds-chkcard input:checked ~ .ds-chkcard__row .ds-chkcard__box{background:var(--qmorange);border-color:var(--qmorange)}
.ds-chkcard input:checked ~ .ds-chkcard__row .ds-chkcard__box::after{content:"";position:absolute;left:6px;top:2px;
  width:6px;height:11px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.ds-chkcard:has(input:checked){border-color:var(--qmorange);background:#fff7f3}
.ds-chkcard__t{font-weight:700;color:var(--qmblue);font-size:.92rem}
.ds-chkcard__s{display:block;color:var(--qmgray-700,#555555);font-size:.76rem;margin-top:7px;line-height:1.4}

/* Preview de condições padrão */
.ds-defaults{background:#fff;border:1px solid var(--qmgray-200);border-radius:8px;padding:12px 14px;margin-bottom:12px}
.ds-defaults>summary{font-size:.82rem;font-weight:600;color:var(--qmblue);cursor:pointer;margin-bottom:8px}

/* Definition list */
.ds-dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:8px 14px;font-size:.88rem}
.ds-dl dt{color:var(--qmgray-700,#555555);font-weight:600}
.ds-dl dd{margin:0;color:var(--qmblue);text-align:right;font-weight:600;word-break:break-word}
.ds-dl dd small{color:var(--qmgray-700,#555555);font-weight:400}
.ds-totals{border-top:1px solid var(--qmgray-200);margin-top:12px;padding-top:12px}
.ds-totals dt.ds-totals__fin,.ds-totals dd.ds-totals__fin{font-size:1.05rem;font-weight:800;color:var(--qmblue)}

/* Itens de revisão / detalhe */
.ds-rev{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.ds-rev li{border-bottom:1px solid var(--qmgray-100);padding-bottom:9px}
.ds-rev li:last-child{border-bottom:0;padding-bottom:0}
.ds-rev__hd{display:flex;justify-content:space-between;gap:10px;font-weight:700;color:var(--qmblue);font-size:.88rem}
.ds-rev__nm{font-size:.84rem;color:var(--qmgray-900);margin:2px 0}
.ds-rev__meta{font-size:.75rem;color:var(--qmgray-700,#555555)}

/* Sucesso */
.ds-success{text-align:center;border-color:#bfe3cd;background:#f2fbf5}
.ds-success__ic{width:62px;height:62px;border-radius:50%;background:#1e6b3a;color:#fff;display:grid;place-items:center;margin:2px auto 10px}
.ds-success__ic svg{width:34px;height:34px}
.ds-bignum{font-size:1.7rem;font-weight:800;color:var(--qmorange-dark);margin:8px 0 4px}

/* Callout (aviso de envio) */
.ds-callout{background:#fff7f3;border:1px solid #f3c7bd;border-radius:9px;padding:11px 12px;font-size:.8rem;color:#8a4c08;margin-top:10px}
.ds-callout strong{color:var(--qmorange-dark)}

/* Linha de ações (detalhe / sucesso) */
/* AS AÇÕES DENTRO DO RESUMO — D151 (F4 = E), 27/08/2026.
   A faixa de três botões custava 148 px no computador e no celular, antes de
   qualquer conteúdo. Aqui elas custam ZERO: o nome da empresa é o link, o selo
   de funil e etapa é o botão de mudar etapa, e o lápis fica no cabeçalho.
   As duas peças precisam PARECER clicáveis, porque o preço desta forma é de
   descoberta — daí a cor de link no nome e a moldura de botão no selo. */
.ds-ph__emp{color:var(--qmorange-dark);font-weight:700;border-bottom:1px solid rgba(184,60,14,.35)}
.ds-ph__emp:hover{border-bottom-color:var(--qmorange-dark)}
/* 44 px, e nao os 60 da lei 3: este nao e um chip de filtro numa faixa propria,
   e um selo dentro de uma frase — a 60 px ele empurraria a linha de identificacao
   inteira. 44 e o minimo que o dedo acerta, e foi a mesma troca declarada no item
   de menu (D144). */
.ds-selo-etapa{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:2px 12px;
  border:1px solid var(--qmgray-200);border-radius:999px;background:#fff;color:var(--qmgray-900);
  font-weight:700;font-size:.82rem;vertical-align:middle}
.ds-selo-etapa:hover{border-color:var(--qmorange);background:#fff7f3}
.ds-selo-etapa--fixo{background:var(--qmgray-50);border-style:dashed}
.ds-selo-etapa__ic{color:var(--qmorange-dark)}
/* Botão que é só desenho no celular e ganha rótulo no computador. O nome
   acessível vem do `aria-label`, sempre — a lição do botão de sair (D144). */
.ds-btn--ic{min-width:44px;min-height:44px;justify-content:center;padding:0 12px}
/* Texto que só o leitor de tela recebe. Não usa `display:none`, que o esconde
   também do leitor — é o recorte de 1px, que é o padrão que funciona. */
.ds-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Link dentro de texto de apoio tinha a cor do texto de apoio — ou seja, nao
   parecia link. Apareceu na tela do Inicio em 27/08, no "ver todos os acessos",
   logo depois de eu consertar a mesma coisa nos cartoes. *Um link que nao se
   anuncia e um recurso que nao existe.* */
.ds-hint a{color:var(--qmorange-dark);font-weight:700;text-decoration:underline}
.ds-hint a:hover{text-decoration:none}
.ds-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.ds-actions>*{flex:1 1 auto}
.ds-actions form{margin:0;flex:1 1 auto}
.ds-actions .ds-btn{width:100%}
.ds-card--pad{padding:16px}
.ds-obs{white-space:pre-wrap;font-size:.86rem;color:var(--qmgray-900);margin:6px 0 0}

/* Ajuste: no wizard o conteúdo não precisa da folga da tabbar */
.ds-content--wizard{padding-bottom:6px}

/* ===================================================================
   FASE 2B — Telas de admin (painel, usuários, produtos, importação,
   avisos). Adições ao design system. Escopado sob .ds.
   =================================================================== */

/* badge: fundo padrão (para perfis/estados sem variante própria) */
/* Selo de fundo claro leva texto PRETO. Branco sobre o cinza dá 3,45:1 e
   sobre o laranja de alerta dá 3,00:1 — os dois reprovam; com o preto da
   marca dão 5,04:1 e 5,80:1. O fundo continua o mesmo. */
/* O texto do selo segue BRANCO: a maioria dos fundos é escura (azul, verde,
   vermelho, laranja escuro) e ali o branco passa com folga. Quem precisa de
   texto preto é só o fundo CLARO — cinza e laranja de alerta, logo abaixo.
   *Pôr preto em todos quebrou o selo vermelho: 4,85:1 virou 3,59:1.* */
.ds .badge{background:var(--qmgray-500)}
.ds .badge--muted,.ds .badge--off,.ds .badge--inativo{color:var(--qmgray-900)}
.ds .badge--admin{background:var(--qmblue)}
.ds .badge--representante,.ds .badge--rep{background:var(--qmorange);color:var(--qmgray-900)}
.ds .badge--muted,.ds .badge--off,.ds .badge--inativo{background:var(--qmgray-500)}
.ds .badge--ok,.ds .badge--ativo{background:#1e6b3a}
.ds .badge--change{background:var(--qmorange-dark)}

/* Menu do painel admin */
.ds-menu{display:grid;gap:10px;grid-template-columns:1fr;margin-top:4px}
@media(min-width:600px){.ds-menu{grid-template-columns:1fr 1fr}}
.ds-menu__item{display:flex;align-items:center;gap:13px;background:#fff;border:1px solid var(--qmgray-200);
  border-radius:10px;padding:14px 15px;text-decoration:none}
.ds-menu__item:hover{border-color:var(--qmorange);background:#fff7f3}
.ds-menu__ic{font-size:1.5rem;width:34px;text-align:center;flex-shrink:0}
.ds-menu__item strong{display:block;color:var(--qmblue);font-size:.95rem}
.ds-menu__item small{color:var(--qmgray-700,#555555);font-size:.78rem}

/* Lista de usuários */
.ds-ulist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.ds-uitem{background:#fff;border:1px solid var(--qmgray-200);border-radius:10px;padding:13px 14px}
.ds-uitem--off{opacity:.62}
.ds-uitem__top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ds-uitem__name{font-weight:700;color:var(--qmblue);font-size:.95rem}
.ds-uitem__email{color:var(--qmgray-700,#555555);font-size:.82rem;display:block;margin:2px 0 7px}
.ds-uitem__meta{display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-size:.75rem;color:var(--qmgray-700,#555555);margin-bottom:9px}
.ds-uitem__acts{display:flex;gap:6px;flex-wrap:wrap}
.ds-uitem__acts form{margin:0}

/* Tags read-only (preços, diffs) */
.ds-tag{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--qmgray-200);background:#fff;
  color:var(--qmgray-700);border-radius:999px;padding:3px 10px;font-size:.76rem;font-weight:600;white-space:nowrap}
.ds-tag--empresa{background:var(--qmblue);color:#fff;border-color:var(--qmblue)}
.ds-tag--new{background:#e4f4ea;color:#1e6b3a;border-color:#bfe3cd}
.ds-tag--change{background:#fff7f3;color:var(--qmorange-dark);border-color:#f3c7bd}
.ds-tag s{opacity:.6}

/* Lista de produtos (admin) */
.ds-prodlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.ds-prod{background:#fff;border:1px solid var(--qmgray-200);border-radius:9px;padding:12px}
.ds-prod__hd{display:flex;align-items:center;gap:8px;margin-bottom:3px;flex-wrap:wrap}
.ds-prod__cod{font-weight:800;color:var(--qmblue);font-size:.88rem}
.ds-prod__nm{font-size:.86rem;color:var(--qmgray-900);margin-bottom:5px}
.ds-prod__meta{display:flex;gap:12px;flex-wrap:wrap;font-size:.74rem;color:var(--qmgray-700,#555555)}
.ds-prod__precos{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:7px}

/* Checklist de permissões (mantém ganchos .product-check__input / .product-list--check) */
.ds-permtoolbar{display:flex;gap:8px;margin:0 0 12px;flex-wrap:wrap}
.ds-checklist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.ds-checkitem{background:#fff;border:1.5px solid var(--qmgray-200);border-radius:9px}
.ds-checkitem:has(input:checked){border-color:var(--qmorange);background:#fff7f3}
.ds-checkitem label{display:flex;gap:11px;padding:11px 12px;cursor:pointer;align-items:flex-start;margin:0}
.ds-checkitem input{margin:2px 0 0;width:20px;height:20px;accent-color:var(--qmorange);flex-shrink:0}
.ds-checkitem__body{flex:1;min-width:0}
.ds-checkitem__hd{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ds-checkitem__cod{font-weight:800;color:var(--qmblue);font-size:.86rem}
.ds-checkitem__nm{display:block;font-size:.85rem;color:var(--qmgray-900);margin-top:2px}
.ds-checkitem__meta{display:flex;gap:8px;flex-wrap:wrap;font-size:.73rem;color:var(--qmgray-700,#555555);margin-top:3px}

/* Checkbox em linha (form de usuário: 3 permissões) */
.ds-checkline{display:flex;gap:10px;align-items:flex-start;padding:2px 0;cursor:pointer}
.ds-checkline input{margin:2px 0 0;width:20px;height:20px;accent-color:var(--qmorange);flex-shrink:0}
.ds-checkline__t{font-weight:600;color:var(--qmblue);font-size:.9rem}

/* Input de arquivo */
.ds-input--file{padding:9px 10px;background:#fff;cursor:pointer}
.ds-input--file::file-selector-button{border:1px solid var(--qmgray-200);background:var(--qmgray-100);
  border-radius:6px;padding:6px 12px;font:inherit;font-weight:600;color:var(--qmblue);margin-right:10px;cursor:pointer}

/* Passos ("como funciona") */
.ds-steps{margin:6px 0 0;padding-left:20px;font-size:.86rem;color:var(--qmgray-900)}
.ds-steps li{margin-bottom:5px}

/* Cards especiais */
.ds-card--info{border-left:4px solid var(--qmorange)}
.ds-card--info p{margin:0 0 8px;font-size:.88rem}
.ds-card--info p:last-child{margin-bottom:0}
.ds-card--danger{background:#fbe6e1;border-color:#f3c7bd}
.ds-card--danger .ds-card__title{color:#b3341c}

/* Ações de formulário (não-sticky, para não brigar com a tabbar mobile) */
.ds-formactions{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.ds-formactions .ds-btn{flex:1 1 auto;justify-content:center;min-width:130px}
/* POR QUE `Excluir empresa` ERA 7,4 VEZES MAIOR QUE `Arquivar`.
   Nao foi decisao de desenho: foi acidente de seletor. O `Arquivar` mora
   dentro de um `<form>` — e o form, que nao e `.ds-btn`, nao recebia o
   `flex:1 1 auto`; o `Excluir` e um `<a class="ds-btn">` filho direto da
   faixa, entao esticava sozinho. Medido em produca a 1.536 px em 27/08/2026:
   1.066 px contra 144 px — com o texto logo abaixo dizendo que arquivar e o
   verbo padrao e excluir e excecao. A tela contradizia a propria frase.
   `display:contents` faz o botao de dentro do form participar da faixa, e o
   destrutivo para de esticar: ele fica do tamanho do que esta escrito nele. */
.ds-formactions>form{display:contents}
.ds-formactions .ds-btn--danger{flex:0 0 auto;min-width:0}

/* Disclosure (preview de importação) */
.ds-disc{background:#fff;border:1px solid var(--qmgray-200);border-radius:9px;margin-bottom:10px;overflow:hidden}
.ds-disc>summary{padding:12px 14px;cursor:pointer;font-size:.9rem;color:var(--qmblue);font-weight:700;
  list-style:none;display:flex;align-items:center;gap:8px}
.ds-disc>summary::-webkit-details-marker{display:none}
.ds-disc[open]>summary{border-bottom:1px solid var(--qmgray-100)}
.ds-disc__body{padding:10px 14px 12px}
.ds-issues{list-style:none;margin:0;padding:0;font-size:.83rem;color:#b3341c;display:flex;flex-direction:column;gap:5px}
.ds-issues code{font-family:ui-monospace,monospace}

/* Lista de diff (importação) */
.ds-diff{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.ds-diff li{border-left:3px solid var(--qmgray-200);padding:5px 0 5px 10px}
.ds-diff li.add{border-color:#1e6b3a}
.ds-diff li.change{border-color:var(--qmorange)}
.ds-diff li.remove{border-color:#b3341c}
.ds-diff__hd{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.ds-diff__hd code{font-weight:800;color:var(--qmblue);font-family:ui-monospace,monospace;font-size:.82rem}
.ds-diff__nm{color:var(--qmgray-700);font-size:.84rem}
.ds-diff__precos{display:flex;gap:6px;flex-wrap:wrap;margin-top:5px}
.ds-subhead{font-size:.8rem;font-weight:700;color:var(--qmgray-700);margin:10px 0 5px}

/* Modal de avisos (novidades) */
.ds-modal{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.55);display:flex;align-items:center;
  justify-content:center;padding:18px}
.ds-modal__card{background:#fff;border-radius:12px;max-width:460px;width:100%;max-height:85vh;overflow:auto;
  box-shadow:0 20px 50px rgba(0,0,0,.3)}
.ds-modal__hd{padding:15px 18px;box-shadow:inset 0 -2px 0 var(--qmorange)}
.ds-modal__hd h2{font-size:1.1rem;color:var(--qmblue);margin:0}
.ds-modal__body{padding:16px 18px;display:flex;flex-direction:column;gap:14px}
.ds-aviso h3{font-size:.95rem;color:var(--qmblue);margin:0 0 4px}
.ds-aviso__corpo{font-size:.86rem;color:var(--qmgray-900);white-space:pre-wrap;line-height:1.45}
.ds-modal__foot{padding:14px 18px;border-top:1px solid var(--qmgray-200);display:flex;justify-content:flex-end}
.ds-modal__foot form{margin:0}

/* Avisos publicados (lista admin) */
.ds-avisolist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.ds-avisoitem{background:#fff;border:1px solid var(--qmgray-200);border-radius:9px;padding:12px 14px}
.ds-avisoitem__hd{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.ds-avisoitem__hd strong{color:var(--qmblue)}
.ds-avisoitem__meta{display:flex;gap:10px;flex-wrap:wrap;font-size:.74rem;color:var(--qmgray-700,#555555);margin-bottom:6px}
.ds-avisoitem__corpo{font-size:.84rem;color:var(--qmgray-700);white-space:pre-wrap;margin-bottom:9px}
.ds-avisoitem__acts{display:flex;gap:6px;flex-wrap:wrap}
.ds-avisoitem__acts form{margin:0}

/* ==================================================================
   Login de dupla segurança (2FA) — tela de verificação do código OTP
   Add-on aditivo; base já é estilizada por .ds-input / .ds-btn / etc.
   ================================================================== */
.ds-input--otp{
  text-align:center;
  letter-spacing:.5em;
  font-size:1.6rem;
  font-weight:700;
  padding-left:.5em; /* compensa o letter-spacing p/ centralizar o placeholder */
}
.ds-checkrow{
  display:flex;
  align-items:center;
  gap:9px;
  margin:14px 0 4px;
  font-size:.9rem;
  color:var(--qmgray-700);
  cursor:pointer;
}
.ds-checkrow input[type=checkbox],
.ds-checkrow input[type=radio]{
  width:18px;height:18px;
  accent-color:var(--qmorange);
  flex:0 0 auto;
}
/* O alvo de toque da linha inteira, nao so do quadradinho de 18 px. A regra
   dos 44 px ja custou uma publicacao neste projeto (a capsula do seletor), e
   aqui ela vale mais: quem marca "com quem falei" esta no estacionamento do
   cliente, com o celular numa mao. */
.ds-checkrow{min-height:44px}

/* Um grupo de radios se comporta como a lista de marcar: uma escolha por
   linha, alvo grande, sem borda — a borda faria parecer campo separado. */
.ds-radios{display:flex;flex-direction:column;gap:2px}

/* O CAMPO EM DESTAQUE — usado no "proximo passo" da tela de visita.
   Ele NAO e obrigatorio (decisao do Bruno em 27/08, emendando a D18): a
   cobranca mora na lista de Negocios, onde o negocio sem proximo passo ja
   aparece marcado. O destaque aqui e o substituto honesto do asterisco —
   *pede sem travar*, que e a diferenca entre o tecnico registrar e desistir. */
.ds-field--destaque{
  border-left:3px solid var(--qmorange);
  padding:12px 0 4px 13px;
  background:var(--qmgray-050,#fafafa);
  border-radius:0 8px 8px 0;
}
.ds-linkbtn{
  background:none;border:none;padding:0;
  color:var(--qmorange-dark);
  font-size:.85rem;font-weight:600;
  cursor:pointer;font-family:inherit;
}
.ds-linkbtn:hover{text-decoration:underline}

/* ===================================================================
   PALETA CATEGÓRICA / SEVERIDADE — alinhamento com as apresentações
   (skill irmã: quimatic-brand-pptx). Serve para DADOS: séries de
   gráfico, KPIs por severidade, selos crítico/moderado/baixo.

   Regra do azul: a interface continua SEM azul (chrome, botões, marca
   = preto+laranja). O azul --qm-info entra APENAS como uma cor de
   categoria em gráficos multi-série, exatamente como nos slides.
   Nunca use --qm-info para pintar botão, link, header ou destaque de UI.
   =================================================================== */
.ds{
  --qm-danger:#D92B2B;   /* crítico / alerta        (slide: Crítico)  */
  --qm-warn:#E07B00;     /* moderado / atenção      (slide: Moderado) */
  --qm-success:#1A7A3C;  /* baixo / ok / confirmado (slide: Baixo)    */
  --qm-info:#1A4A9A;     /* informativo — SÓ em dado categórico       */
}

/* KPIs por severidade (a barrinha lateral muda de cor) */
.ds-kpi--danger::before{background:var(--qm-danger)}
.ds-kpi--warn::before{background:var(--qm-warn)}
.ds-kpi--success::before{background:var(--qm-success)}
.ds-kpi--info::before{background:var(--qm-info)}

/* Selo de severidade com bolinha (crítico/moderado/baixo) */
.ds-sev{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:700;color:var(--qmgray-700)}
.ds-sev::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--qmgray-500);flex:0 0 auto}
.ds-sev--critico::before{background:var(--qm-danger)}
.ds-sev--moderado::before{background:var(--qm-warn)}
.ds-sev--baixo::before{background:var(--qm-success)}
.ds-sev--info::before{background:var(--qm-info)}

/* Tags de severidade (fundo claro + texto na cor) — para listas/tabelas */
.ds .badge--critico{background:var(--qm-danger)}
.ds .badge--moderado{background:var(--qm-warn);color:var(--qmgray-900)}
.ds .badge--baixo{background:var(--qm-success)}

/* Paleta de séries para gráficos (ordem de uso sugerida).
   1º laranja da marca, depois preto, depois as categóricas. Use nesta
   ordem para que o laranja seja sempre a série de maior peso visual. */
.ds{
  --qm-series-1:#F05A22;  /* laranja da marca — série principal */
  --qm-series-2:#1A1A1A;  /* preto                              */
  --qm-series-3:#1A7A3C;  /* verde                              */
  --qm-series-4:#E07B00;  /* âmbar                              */
  --qm-series-5:#1A4A9A;  /* azul (categórico, ver regra acima) */
  --qm-series-6:#8a8a8a;  /* cinza                              */
}

/* ===================================================================
   LEI 3 — corpo de 17 px e alvo de toque de 60 px, so no celular.
   -------------------------------------------------------------------
   Nao e acessibilidade generica. O guia diz o motivo: presbiopia real e
   dedo com calo, tela lida em pe, no estacionamento da planta, com sol.
   Medido em 25/08/2026, antes desta regra: corpo 15 px, capsula 12,8 px
   em 30 px de altura, botao 13,6 px em 35 px, item da barra 10,9 px.

   Por que nao `:root{font-size:17px}`: o design system inteiro usa `rem`,
   entao mexer na raiz escala tambem `padding` e `gap`, e o layout estoura
   em larguras de 360 px. Aqui cada alvo e ajustado onde ele mora.

   O desktop nao muda em nada: tudo abaixo vive dentro da media query.
   =================================================================== */
@media(max-width:767px){
  body.ds{font-size:17px}

  /* `.ds-input{font:inherit}` herda os 17 px acima, e isso resolve de
     graca o zoom automatico do iOS, que dispara abaixo de 16 px. */
  .ds-input,.ds-crit{min-height:60px}
  .ds-input--sm{font-size:16px;min-height:52px}
  .ds-crit__lb{font-size:12px;min-width:112px}
  .ds-crit__val{font-size:16px}
  .ds-critfoot{font-size:14px}

  .ds-chip{min-height:60px;padding:0 18px;font-size:15px;display:inline-flex;align-items:center}
  .ds-btn{min-height:56px;font-size:16px;padding:0 1.1rem}
  .ds-btn--sm{min-height:48px;font-size:15px;padding:0 .9rem}
  .ds-iconbtn{width:52px;height:52px}
  .ds-tab{min-height:60px;font-size:12px;justify-content:center}

  .ds-card__cap,.ds-kpi__sub{font-size:14px}
  .ds-empty span{font-size:15px}
  .ds-note{font-size:13px}

  /* A tabela virou cartao (`.ds-table--cards`); o rotulo de cada celula
     e o que substitui o cabecalho, entao ele nao pode ser o menor texto
     da tela. */
  .ds-table{font-size:16px}
  .ds-table--cards td::before{font-size:12px}
  .ds-tabs__item{min-height:56px;font-size:16px}

  /* ---------------------------------------------------------------
     A primeira dobra do celular, medida em 390x844.
     Alvo maior sem economia de espaco PIORA a tela: com as capsulas em
     60 px, a faixa de recorte de Negocios passou a quebrar em CINCO
     linhas e comeu 640 px sozinha - o primeiro negocio saiu de 234 px
     para 276 px do topo. Corrigir a escala e economizar espaco sao a
     mesma tarefa, nao duas.
     --------------------------------------------------------------- */

  /* Capsula de recorte anda em UMA linha que rola de lado, como a faixa
     de categorias de qualquer loja no celular. Nunca quebra. */
  .ds-chips{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;
    margin-left:-14px;margin-right:-14px;padding:2px 14px 6px;
    /* Sem isto a faixa nao PODE encolher (min-width:auto e o padrao do
       flex): em vez de rolar por dentro, ela empurrava a pagina para
       682 px de largura no Cotacoes e a tela inteira balancava de lado. */
    min-width:0}
  /* A linha de filtro veio de tela de escritorio: rotulo e capsulas na
     mesma linha, sem quebra. No celular o rotulo sobe e as capsulas ficam
     com a largura toda. Nenhum filtro muda de comportamento. */
  .ds-filters__row{flex-wrap:wrap;align-items:flex-start}
  .ds-filters__row>.ds-chips{flex:1 1 100%}
  .ds-filters__block{min-width:0}
  .ds-chips::-webkit-scrollbar{height:0}
  .ds-chips>*{flex:0 0 auto;scroll-snap-align:start}

  /* Abas com respiro menor: elas sao navegacao, nao conteudo. */
  .ds-tabs{gap:2px}
}