/* ===================================================================
   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:#c94410; --qmorange-light:#ff7a4a;
  --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}
.ds-only-desk{display:inline-flex}
.ds-only-mobile{display:none}

/* ---------- 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}
.ds-nav__section{font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;color:#8a8a8a;padding:14px 8px 6px}
.ds-nav__item{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:7px;color:#cbd5e1;font-weight:500;font-size:.9rem;margin-bottom:2px;transition:background .15s,color .15s}
.ds-nav__item:hover{background:rgba(255,255,255,.06);color:#fff}
.ds-nav__item.is-active{background:var(--qmorange);color:#fff}
.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{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}
.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:#fff}
.ds-btn--orange:hover{background:var(--qmorange-dark)}
.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-pagehead{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.ds-pagehead h2{font-size:1.35rem;color:var(--qmblue)}
.ds-pagehead p{margin:3px 0 0;color:var(--qmgray-700);font-size:.85rem}
.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}
.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)}
.ds-kpi__sub{font-size:.74rem;color:var(--qmgray-500);margin-top:5px}

/* ---------- 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-500);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-500)}

/* ---------- 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-500);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:#fff}
.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-500);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{grid-template-columns:repeat(2,1fr)}.ds-grid-2{grid-template-columns:1fr}}
@media(max-width:767px){
  .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}
  .ds-pagehead h2{font-size:1.2rem}
  /* 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}
  .ds-table--cards td{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:7px 0;
    border:0!important;border-bottom:1px solid var(--qmgray-100)!important;text-align:right;width:auto!important}
  .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-500);font-size:.85rem;margin:3px 0 0}
.ds-authnote{text-align:center;color:var(--qmgray-500);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;display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--qmgray-500);
  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)}
.ds-tab--cta{position:relative;top:-14px}
.ds-tab--cta .ds-tab__ic{width:52px;height:52px;border-radius:50%;background:var(--qmorange);color:#fff;
  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)}
.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-500);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-500)}
.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-500);font-size:.76rem}
.ds-qitem__seller{color:var(--qmgray-500);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-500)}
.ds-pag__btn--off{opacity:.45;pointer-events:none}

/* ---------- 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-500)}
.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-500);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-500);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:#fff}
.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-500);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-500);cursor:pointer;text-decoration:none;line-height:1}
.ds-results__empty{padding:14px 12px;color:var(--qmgray-500);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-500);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-500);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-500);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-500);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-500);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-500)}

/* 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) */
.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) */
.ds .badge{background:var(--qmgray-500)}
.ds .badge--admin{background:var(--qmblue)}
.ds .badge--representante,.ds .badge--rep{background:var(--qmorange)}
.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-500);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-500);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-500);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-500)}
.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-500);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}

/* 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-500);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]{
  width:18px;height:18px;
  accent-color:var(--qmorange);
  flex:0 0 auto;
}
.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}

/* ==================================================================
   Entrega A — Resultado comercial da cotação (Ganhou / Perdeu)
   Aditivo; reaproveita .badge e .ds-btn existentes.
   ================================================================== */
.ds .badge--ganhou{background:#1e6b3a}
.ds .badge--perdeu{background:#b3341c}
.ds .badge--emaberto{background:var(--qmgray-500)}
.ds-btn--ok{background:#1e6b3a;color:#fff;border-color:#1e6b3a}
.ds-btn--ok:hover{background:#17532d;border-color:#17532d}
.ds-input--sm{height:38px;font-size:.9rem;max-width:200px}
.ds-result-win{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
/* badge de resultado na lista do início */
.ds-qitem__res{font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;
  padding:2px 7px;border-radius:5px;color:#fff}
.ds-qitem__res--ganhou{background:#1e6b3a}
.ds-qitem__res--perdeu{background:#b3341c}
.ds-qitem__cnpj{color:var(--qmgray-500);font-size:.72rem}

/* ==================================================================
   Entrega C (D1) — Painel analítico evoluído: KPIs c/ comparação,
   funil, pipeline em aberto e rankings em abas. Aditivo; escopado .ds.
   ================================================================== */

/* Pill como link (toggle de ordenação, sem form) — mesmo visual do
   .ds-pill baseado em input, mas para <a>. */
.ds-pill.is-on{border-color:var(--qmorange);background:var(--qmorange);color:#fff}

/* KPIs: variantes de cor extras + selo de comparação vs. período anterior */
.ds-kpi--win::before{background:#1e6b3a}
.ds-kpi--win .ds-kpi__val{color:#1e6b3a}
.ds-kpi--lose::before{background:#b3341c}
.ds-kpi--lose .ds-kpi__val{color:#b3341c}
.ds-kpi__cmp{font-weight:700}
.ds-kpi__cmp.is-good{color:#1e6b3a}
.ds-kpi__cmp.is-bad{color:#b3341c}
@media(min-width:900px){.ds-kpis--analitico{grid-template-columns:repeat(3,1fr)}}

/* Funil de resultado */
.ds-funil{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.ds-funil__step{flex:1 1 150px;background:#fff;border:1px solid var(--qmgray-200);border-left:4px solid var(--qmgray-500);
  border-radius:8px;padding:14px 16px;text-align:center}
.ds-funil__step--aberto{border-left-color:#8a8a8a}
.ds-funil__step--ganhou{border-left-color:#1e6b3a}
.ds-funil__step--perdeu{border-left-color:#b3341c}
.ds-funil__n{font-size:1.5rem;font-weight:800;color:var(--qmblue)}
.ds-funil__lb{font-size:.78rem;font-weight:700;color:var(--qmgray-700);text-transform:uppercase;letter-spacing:.03em;margin:2px 0}
.ds-funil__v{font-size:.85rem;color:var(--qmgray-700)}

/* Abas de rankings — 100% CSS (radio + label + ~ sibling), sem JS */
.ds-tabs{position:relative}
.ds-tabs>input[type=radio]{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
.ds-tabs__bar{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.ds-tabs__bar label{border:1px solid var(--qmgray-200);background:#fff;color:var(--qmgray-700);
  border-radius:999px;padding:7px 15px;font-size:.82rem;font-weight:700;cursor:pointer;user-select:none}
.ds-tabpanel{display:none}
#tab-prof:checked ~ .ds-tabpanels .ds-tabpanel--prof,
#tab-reg:checked  ~ .ds-tabpanels .ds-tabpanel--reg,
#tab-ger:checked  ~ .ds-tabpanels .ds-tabpanel--ger,
#tab-cli:checked  ~ .ds-tabpanels .ds-tabpanel--cli,
#tab-prod:checked ~ .ds-tabpanels .ds-tabpanel--prod{display:block}
#tab-prof:checked ~ .ds-tabs__bar label[for=tab-prof],
#tab-reg:checked  ~ .ds-tabs__bar label[for=tab-reg],
#tab-ger:checked  ~ .ds-tabs__bar label[for=tab-ger],
#tab-cli:checked  ~ .ds-tabs__bar label[for=tab-cli],
#tab-prod:checked ~ .ds-tabs__bar label[for=tab-prod]{background:var(--qmblue);color:#fff;border-color:var(--qmblue)}

/* Filtros: badge de "N ativo(s)" no summary do details */
.ds-disc--filtros>summary{align-items:center}

/* ── Entrega G1 — atribuição / carteira ─────────────────────────────────
   Acrescentado ao FIM do arquivo de propósito: o ds.css de produção é
   superconjunto de tudo que já existe, e subir uma versão que perdesse
   classe antiga regride o portal inteiro (lição da Entrega C/D1). */
.ds-atrib__carteira{background:var(--qmgray-50);border-left:3px solid var(--qmorange);
  padding:9px 12px;border-radius:0 6px 6px 0;margin:0 0 12px}
.ds-atrib__warn{background:#FFF6E9;border:1px solid #F0C48A;color:#7A4B10;
  border-radius:8px;padding:11px 13px;font-size:.83rem;line-height:1.45;margin:10px 0 0}
.ds-carteira__semdono{color:var(--qmgray-500);font-style:italic}