/* ============================================================
   Nova — design system do projeto Representantes.
   Subconjunto extraído de Docs Corretos/prototipo-carteira-3.html:
   só os tokens e componentes usados pelas telas já construídas
   (login, home, clientes, produtos). Ao construir uma tela nova
   que precise de um componente ainda não extraído, adicione-o
   aqui — nunca duplique estilo solto em template (PADROES.md §13).
   ============================================================ */

/* ============ Nova tokens ============
   Os tokens (cores, radius, fontes, sombras, espaçamento) vêm da fonte única
   design-system/tokens/tokens.json, gerados por build.py. NÃO declare valores
   aqui — altere o tokens.json e rode o build (feature 042). */
@import url("tokens.generated.3c32d66ba9a8.css");

/* ============ Reset / base ============ */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
body{font-family:var(--nv-font-body);background:var(--nv-canvas);color:var(--nv-ink);letter-spacing:-.01em;line-height:1.5}
h1,h2,h3,h4{font-family:var(--nv-font-display);letter-spacing:-.02em}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
::selection{background:var(--nv-blue-tint)}

/* ============ Buttons ============ */
.nv-btn{border:0;cursor:pointer;font-family:var(--nv-font-display);font-weight:700;font-size:14px;border-radius:var(--nv-r-pill);padding:11px 20px;display:inline-flex;align-items:center;gap:8px;transition:.16s;letter-spacing:-.01em;white-space:nowrap}
.nv-btn--primary{background:var(--nv-blue);color:#fff;box-shadow:var(--nv-shadow-blue)}
.nv-btn--primary:hover{background:var(--nv-blue-press);transform:translateY(-1px)}
.nv-btn--secondary{background:var(--nv-blue-tint);color:var(--nv-blue)}
.nv-btn--secondary:hover{background:#DCE8FF}
.nv-btn--ghost{background:#fff;color:var(--nv-ink);border:1px solid var(--nv-line)}
.nv-btn--ghost:hover{border-color:var(--nv-ink-2)}
.nv-btn--danger{background:var(--nv-red-tint);color:var(--nv-red)}
.nv-btn--sm{padding:8px 14px;font-size:13px}
.nv-btn--block{width:100%;justify-content:center}
.nv-btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none;transform:none}

/* ============ Indicador de meta (barra de progresso, sem lib JS — research.md §5) ============ */
.indicador-meta{margin-bottom:14px}
.barra-progresso{width:100%;height:10px;border-radius:6px;background:var(--nv-line,#e5e7eb);overflow:hidden;margin:6px 0}
.barra-progresso__preenchido{height:100%;background:var(--nv-blue,#2563eb);border-radius:6px;max-width:100%;transition:width .2s}

/* ============ Cards / campos de formulário ============ */
.card{background:#fff;border:1px solid var(--nv-line);border-radius:var(--nv-r-lg);padding:22px;box-shadow:var(--nv-shadow-sm)}
.field{margin-bottom:14px}
.field>label{display:block;font-size:12px;font-weight:600;color:var(--nv-ink-2);margin-bottom:6px}
.inp{display:flex;align-items:center;gap:9px;border:1.5px solid var(--nv-line);border-radius:var(--nv-r-sm);padding:10px 13px;background:#fff;transition:.15s}
.inp:focus-within{border-color:var(--nv-blue);box-shadow:0 0 0 4px var(--nv-blue-tint)}
.inp input,.inp select,.inp textarea{border:0;outline:0;font-family:var(--nv-font-body);font-size:14px;width:100%;color:var(--nv-ink);background:transparent}
.inp select{cursor:pointer}
.inp--qtd{width:90px;padding:7px 10px}
.field .erro{color:var(--nv-red);font-size:12.5px;margin-top:5px}
.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px}
.field-block{margin-bottom:0}
.field-block>label{display:block;font-size:12px;font-weight:600;color:var(--nv-ink-2);margin-bottom:6px}
.field-block .erro{color:var(--nv-red);font-size:12.5px;margin-top:5px}
.field-block.full{grid-column:1/-1}

/* ============ App shell (menu, topbar) ============ */
#app{min-height:100vh}
.shell{display:grid;grid-template-columns:230px 1fr;min-height:100vh}
.side{background:#fff;border-right:1px solid var(--nv-line);padding:18px 14px;display:flex;flex-direction:column}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--nv-font-display);font-weight:800;font-size:18px;padding:6px 8px 18px}
.brand .mark{width:32px;height:32px;border-radius:10px;background:var(--nv-blue);display:grid;place-items:center;color:#fff;font-size:15px;box-shadow:var(--nv-shadow-blue);flex-shrink:0}
.main{display:flex;flex-direction:column;min-width:0}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--nv-blue-tint);color:var(--nv-blue);display:grid;place-items:center;font-family:var(--nv-font-display);font-weight:700;font-size:14px;flex-shrink:0}
.content{padding:28px;max-width:1440px;width:100%;margin:0 auto}

/* ============ Cabeçalho de página / toolbar ============ */
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.page-head h1{font-size:26px;font-weight:800}
.page-head .sub{color:var(--nv-gray);font-size:14px;margin-top:3px}
.page-head .acts{display:flex;gap:10px;flex-wrap:wrap}
.toolbar{display:flex;align-items:center;gap:10px;margin-bottom:18px;flex-wrap:wrap}
.search{display:flex;align-items:center;gap:9px;border:1.5px solid var(--nv-line);border-radius:var(--nv-r-pill);padding:9px 16px;background:#fff;min-width:230px;flex:1;max-width:340px}
.search input{border:0;outline:0;font-size:14px;width:100%;background:transparent;color:var(--nv-ink)}

/* ============ Tabela ============ */
.tbl-wrap{background:#fff;border:1px solid var(--nv-line);border-radius:var(--nv-r-lg);box-shadow:var(--nv-shadow-sm);overflow:hidden}
table.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl thead th{text-align:left;font-family:var(--nv-font-display);font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--nv-gray);padding:14px 18px;border-bottom:1px solid var(--nv-line);white-space:nowrap}
.tbl tbody td{padding:14px 18px;border-bottom:1px solid var(--nv-line);vertical-align:middle}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl tbody tr{transition:.1s}
.tbl tbody tr:hover{background:var(--nv-blue-tint-2)}
.tbl .r{text-align:right} .tbl .num{font-weight:600}
.cell-strong{font-weight:600;color:var(--nv-ink)}
.cell-sub{font-size:12px;color:var(--nv-gray)}
table.tbl tfoot td{padding:14px 18px;border-top:2px solid var(--nv-line);font-weight:700;background:var(--nv-canvas)}

/* ============ Toggle de lente (Mês atual / Período de apuração) ============ */
.seg-lente{display:inline-flex;gap:2px;background:#fff;border:1px solid var(--nv-line);border-radius:var(--nv-r-pill);padding:3px;box-shadow:var(--nv-shadow-sm)}
.seg-btn{font-family:var(--nv-font-display);font-weight:600;font-size:13px;padding:7px 14px;border-radius:var(--nv-r-pill);color:var(--nv-ink-2);text-decoration:none;transition:.12s;white-space:nowrap}
.seg-btn:hover{color:var(--nv-ink)}
.seg-btn.on{background:var(--nv-blue-tint);color:var(--nv-blue)}

/* ============ Pill de status ============ */
.pill{display:inline-flex;align-items:center;gap:6px;font-family:var(--nv-font-display);font-weight:600;font-size:12px;padding:5px 11px;border-radius:var(--nv-r-pill);white-space:nowrap}
.pill .d{width:7px;height:7px;border-radius:50%}
.pill--gray{background:var(--nv-canvas);color:var(--nv-ink-2)} .pill--gray .d{background:var(--nv-gray)}
.pill--blue{background:var(--nv-blue-tint);color:var(--nv-blue)} .pill--blue .d{background:var(--nv-blue)}
.pill--green{background:var(--nv-green-tint);color:#0a8f63} .pill--green .d{background:var(--nv-green)}
.pill--red{background:var(--nv-red-tint);color:var(--nv-red)} .pill--red .d{background:var(--nv-red)}
.pill--amber{background:var(--nv-amber-tint);color:#c46a12} .pill--amber .d{background:var(--nv-amber)}

/* ============ Cards de resumo ============ */
.stat-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:22px}
.stat-card{background:#fff;border:1px solid var(--nv-line);border-radius:var(--nv-r-lg);padding:18px 20px;box-shadow:var(--nv-shadow-sm);border-left:4px solid var(--nv-blue)}
.stat-card__valor{font-family:var(--nv-font-display);font-size:28px;font-weight:800;color:var(--nv-ink);line-height:1.1}
.stat-card__label{color:var(--nv-gray);font-size:13px;margin-top:4px}
.stat-card--azul{border-left-color:var(--nv-blue)}
.stat-card--verde{border-left-color:var(--nv-green)}
.stat-card--amber{border-left-color:var(--nv-amber)}
.stat-card--vermelho{border-left-color:var(--nv-red)}
.stat-card--cinza{border-left-color:var(--nv-gray)}

/* ============ Filtro por ícone ============ */
.filtro-icone{margin-bottom:14px}
.filtro-icone__toggle{list-style:none;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:var(--nv-r-pill);background:#fff;border:1px solid var(--nv-line);color:var(--nv-ink-2);cursor:pointer}
.filtro-icone__toggle::-webkit-details-marker{display:none}
.filtro-icone__toggle:hover{border-color:var(--nv-ink-2)}
.filtro-icone[open] .filtro-icone__toggle{background:var(--nv-blue-tint);color:var(--nv-blue);border-color:var(--nv-blue)}

/* ============ Estado vazio ============ */
.empty{text-align:center;padding:50px 20px;color:var(--nv-gray)}
.empty .ic{width:56px;height:56px;border-radius:16px;background:var(--nv-canvas);display:grid;place-items:center;margin:0 auto 16px}
.empty h3{color:var(--nv-ink);font-size:17px;margin-bottom:6px}

/* ============ Modal ============ */
.overlay{position:fixed;inset:0;background:rgba(16,19,34,.42);backdrop-filter:blur(3px);z-index:100;display:flex;align-items:flex-start;justify-content:center;padding:40px 20px;overflow-y:auto}
.modal{background:#fff;border-radius:var(--nv-r-lg);width:100%;max-width:720px;max-height:88vh;box-shadow:var(--nv-shadow-md);animation:pop .2s ease;display:flex;flex-direction:column;overflow:hidden}
@keyframes pop{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--nv-line)}
.modal-head h3{font-size:18px;font-weight:700}
.modal-head .x{width:34px;height:34px;border-radius:50%;border:0;background:var(--nv-canvas);cursor:pointer;display:grid;place-items:center;color:var(--nv-ink-2);font-size:18px}
.modal-head .x:hover{background:var(--nv-line)}
.modal>form{display:flex;flex-direction:column;min-height:0;flex:1 1 auto}
.modal-body{padding:24px;overflow-y:auto;flex:1 1 auto;min-height:0}
.modal-foot{padding:16px 24px;border-top:1px solid var(--nv-line);display:flex;justify-content:flex-end;gap:10px}
.modal--sm{max-width:520px}

/* Prévia de texto truncada numa célula de tabela (ex.: corpo da mensagem) */
.cell-prev{color:var(--nv-gray);font-size:13px;max-width:340px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Lista de escolha dentro de modal: cada item é título + categoria + prévia,
   clicável (ex.: popup "Escolher mensagem" do WhatsApp na ficha do cliente). */
.msg-escolha{display:flex;flex-direction:column;gap:8px}
.msg-escolha__item{display:block;text-decoration:none;border:1px solid var(--nv-line);border-radius:var(--nv-r-sm);padding:13px 15px;transition:.12s}
.msg-escolha__item:hover{background:var(--nv-green-tint);border-color:#BFEAD9}
.msg-escolha__item>b{display:block;font-family:var(--nv-font-display);font-size:14px;color:var(--nv-ink)}
.msg-escolha__cat{color:var(--nv-gray);font-weight:600;font-size:12px}
.msg-escolha__item>p{margin:5px 0 0;color:var(--nv-ink-2);font-size:12.5px;line-height:1.45}

/* ============ Toast / notice ============ */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--nv-ink);color:#fff;padding:13px 22px;border-radius:var(--nv-r-pill);font-size:14px;font-weight:500;box-shadow:var(--nv-shadow-md);z-index:200;display:flex;align-items:center;gap:10px;animation:pop .2s}
.notice{background:var(--nv-blue-tint-2);border:1px solid var(--nv-blue-tint);border-radius:var(--nv-r-sm);padding:12px 15px;font-size:13px;color:var(--nv-ink-2);display:flex;gap:10px}
.notice.amber{background:var(--nv-amber-tint);border-color:#FCE0C4;color:#8a5216}
.notice.green{background:var(--nv-green-tint);border-color:#C5EEDD;color:#0a8f63}

/* ============ Helpers ============ */
.muted{color:var(--nv-gray)} .b{font-weight:600} .mt{margin-top:14px} .mt2{margin-top:22px}
.flex{display:flex;align-items:center;gap:10px} .between{justify-content:space-between}
.wrap-gap{display:flex;gap:8px;flex-wrap:wrap}
.acts-cell{display:flex;gap:6px;flex-wrap:wrap}
.flex-info{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.clicavel{cursor:pointer}
.thumb-produto{width:36px;height:36px;border-radius:8px;object-fit:cover}
.modal-foot--start{justify-content:flex-start}

/* Abas (ex.: detalhe do cliente: Consolidado / Representadas) — spec 030 */
.tabs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--nv-line);margin-bottom:16px}
.tabs .tab{padding:9px 16px;font-family:var(--nv-font-display);font-weight:600;font-size:14px;color:var(--nv-ink-2);text-decoration:none;border:1px solid transparent;border-bottom:none;border-radius:var(--nv-r-sm) var(--nv-r-sm) 0 0;margin-bottom:-1px}
.tabs .tab:hover{background:var(--nv-canvas);color:var(--nv-ink)}
.tabs .tab.on{background:var(--nv-white);color:var(--nv-blue);border-color:var(--nv-line);border-bottom-color:var(--nv-white)}

/* Stepper do wizard (ex.: nova cotação: Representada / Cliente / Itens / Totais) — spec 031 */
.steps{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 22px}
.steps .step{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:var(--nv-r-pill);background:var(--nv-canvas);border:1px solid var(--nv-line);color:var(--nv-ink-2);font-family:var(--nv-font-display);font-weight:600;font-size:13px}
.steps .step .n{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--nv-white);border:1px solid var(--nv-line);font-size:12px;color:var(--nv-ink-2)}
.steps .step.on{background:var(--nv-blue-tint);border-color:var(--nv-blue);color:var(--nv-blue)}
.steps .step.on .n{background:var(--nv-blue);border-color:var(--nv-blue);color:#fff}
.steps .step.done{background:var(--nv-green-tint);border-color:var(--nv-green);color:#0a8f63}
.steps .step.done .n{background:var(--nv-green);border-color:var(--nv-green);color:#fff}
.steps .step-sep{flex:0 0 22px;height:2px;background:var(--nv-line);border-radius:2px}
.muted-sm{font-size:13px}
.d-inline{display:inline}
.nv-header__right--auto{margin-left:auto}
.divider{height:1px;background:var(--nv-line);margin:16px 0}
.kv{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--nv-line);font-size:14px}
a.kv{color:inherit;text-decoration:none}
a.kv:hover{color:var(--nv-blue)}
.kv:last-child{border-bottom:0}
.kv .k{color:var(--nv-gray)} .kv .v{font-weight:600;text-align:right}

/* ============ Escolha visual de layout de catálogo ============ */
.layout-escolha{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;margin-top:4px}
.layout-opcao{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px;border:2px solid var(--nv-line);border-radius:var(--nv-r-md);cursor:pointer;text-align:center}
.layout-opcao input{position:absolute;opacity:0;pointer-events:none}
.layout-opcao__miniatura{display:block;width:100%;border-radius:6px;overflow:hidden;background:#f2f3f7}
.layout-opcao__miniatura img{display:block;width:100%;height:auto}
.layout-opcao__nome{font-size:12px;color:var(--nv-ink-2)}
.layout-opcao:has(input:checked){border-color:var(--nv-blue);background:var(--nv-blue-tint)}
.layout-opcao:has(input:checked) .layout-opcao__nome{color:var(--nv-blue);font-weight:600}

/* ============ Responsivo ============ */
@media(max-width:900px){
  .shell{grid-template-columns:1fr}
  .side{position:fixed;left:0;top:0;bottom:0;z-index:60;transform:translateX(-100%);transition:.25s;width:230px;box-shadow:var(--nv-shadow-md)}
  .side.open{transform:none}
  .content{padding:18px}
}

/* ============ Header único (design system, docs/superpowers/specs/2026-08-05) ============ */
.nv-header{background:linear-gradient(180deg,var(--nv-blue),var(--nv-blue-deep));color:#fff;padding:10px 28px;display:flex;align-items:center;gap:24px}
.nv-header__nav{display:flex;align-items:center;gap:2px;flex:1;overflow-x:auto}
.nv-header__item{display:flex;align-items:center;gap:6px;padding:9px 12px;border-radius:var(--nv-r-sm);font-size:13px;font-weight:600;color:rgba(255,255,255,.85);white-space:nowrap}
.nv-header__item:hover{background:rgba(255,255,255,.12)}
.nv-header__item.on{background:rgba(255,255,255,.18);color:#fff}
.nv-header__item svg{width:16px;height:16px;flex:none}
.nv-header__right{display:flex;align-items:center;gap:12px}
.nv-header__gear{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.14)}
.nv-header__gear svg{width:18px;height:18px}
.nv-avatar{width:32px;height:32px;border-radius:50%;background:#fff;color:var(--nv-blue);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;flex:none}
.nv-header__user{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600}
.nv-header__sair{background:rgba(255,255,255,.14);border:0;color:#fff;padding:6px 12px;border-radius:var(--nv-r-pill);font-size:12px;font-weight:700;cursor:pointer}

/* ============ Hub de módulos (design system, docs/superpowers/specs/2026-08-05) ============ */
.hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px;margin-top:20px}
.module-card{background:#fff;border:1px solid var(--nv-line);border-radius:var(--nv-r-lg);padding:22px;box-shadow:var(--nv-shadow-sm);display:block;text-decoration:none;color:inherit}
.module-card__icon{width:46px;height:46px;border-radius:50%;background:var(--nv-blue-tint);color:var(--nv-blue);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.module-card__icon svg{width:22px;height:22px}
.module-card h3{font-size:16px;margin-bottom:6px}
.module-card p{font-size:13px;color:var(--nv-gray);margin-bottom:16px;min-height:36px}
.module-card .nv-btn{width:100%;justify-content:space-between;background:var(--nv-canvas);color:var(--nv-ink)}

/* ============ Página de detalhe (design system, docs/superpowers/specs/2026-08-05) ============ */
.breadcrumb{font-size:13px;color:var(--nv-gray);margin-bottom:14px}
.breadcrumb b{color:var(--nv-ink)}
.detail-card{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap}
.detail-card h1{font-size:22px}
.detail-card__attrs{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:18px;margin-top:20px;padding-top:20px;border-top:1px solid var(--nv-line)}
.attr{display:flex;gap:10px;align-items:flex-start}
.attr svg{width:18px;height:18px;color:var(--nv-blue);flex:none;margin-top:2px}
.attr .lbl{font-size:12px;color:var(--nv-gray);margin-bottom:2px}
.attr .val{font-size:14px;font-weight:600}
.grid2{display:grid;grid-template-columns:1.6fr 1fr;gap:20px;margin-top:20px}
@media (max-width:860px){.grid2{grid-template-columns:1fr}}
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.stat{background:var(--nv-canvas);border-radius:var(--nv-r-md);padding:16px}
.stat b{font-size:22px;display:block}
.stat span{font-size:12px;color:var(--nv-gray)}

/* ============================================================
   Roteiro / Agenda (spec 027) — reaproveita tokens do design system
   ============================================================ */
.rot-ajuda{color:var(--nv-gray);margin:.4rem 0 1rem}
.rot-vazio{color:var(--nv-gray);padding:.8rem;text-align:center}
.rot-subtitulo{font:600 .95rem/1.3 var(--nv-font-display);color:var(--nv-ink-2);margin:.2rem 0 .6rem}
.rot-busca{margin:.6rem 0 1rem}
.inp-busca{width:100%;padding:.7rem 1rem;border:1px solid var(--nv-line);border-radius:var(--nv-r-sm);font:1rem var(--nv-font-body);background:var(--nv-white)}
.inp-busca:focus{outline:none;border-color:var(--nv-blue)}

.rot-grid{display:grid;grid-template-columns:1fr 340px;gap:1.2rem;align-items:start}
@media (max-width:820px){.rot-grid{grid-template-columns:1fr}}

.rot-lista{display:flex;flex-direction:column;gap:.6rem}
.rot-card{border:1px solid var(--nv-line);border-radius:var(--nv-r-md);padding:.8rem 1rem;background:var(--nv-white);box-shadow:var(--nv-shadow-sm)}
.rot-card--destaque{border-color:var(--nv-blue);background:var(--nv-blue-tint-2)}
.rot-card__topo{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem}
.rot-card__nome{font:600 1rem var(--nv-font-display);color:var(--nv-ink)}
.rot-card__dist{font:600 .85rem var(--nv-font-body);color:var(--nv-blue);white-space:nowrap}
.rot-card__meta{display:flex;flex-wrap:wrap;gap:.3rem;color:var(--nv-gray);font-size:.85rem;margin:.2rem 0}
.rot-card__end{color:var(--nv-ink-2);font-size:.88rem;margin-top:.15rem}
.rot-card__botoes{display:flex;gap:.5rem;margin-top:.6rem}

/* Rail vertical da pilha */
.rot-pilha{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.4rem}
.rot-pilha__linha{display:flex;align-items:center;gap:.6rem;border-radius:var(--nv-r-sm);padding:.55rem .7rem;border:1px solid var(--nv-line)}
.rot-pilha__linha--atual{background:var(--nv-green-tint);border-color:var(--nv-green)}
.rot-pilha__linha--outro{background:var(--nv-blue-tint-2);border-color:var(--nv-blue-tint)}
.rot-pilha__conteudo{display:flex;align-items:center;gap:.6rem;flex:1;cursor:default}
.rot-pilha__linha--outro .rot-pilha__conteudo{cursor:pointer}
.rot-pilha__ordem{width:1.6rem;height:1.6rem;flex:none;display:grid;place-items:center;border-radius:var(--nv-r-pill);background:var(--nv-white);font:600 .85rem var(--nv-font-body);color:var(--nv-ink-2)}
.rot-pilha__nome{font:600 .92rem var(--nv-font-display);color:var(--nv-ink);display:flex;align-items:center;gap:.4rem}
.rot-pilha__end{color:var(--nv-gray);font-size:.8rem}
.rot-pilha__acoes{display:flex;align-items:center;gap:.4rem;flex:none}
.rot-pilha__trecho{color:var(--nv-blue-deep);font:600 .8rem var(--nv-font-body);white-space:nowrap}
.rot-pilha__x{border:none;background:transparent;color:var(--nv-red);font-size:1.1rem;cursor:pointer;padding:.1rem .3rem;border-radius:var(--nv-r-sm)}
.rot-pilha__x:hover{background:var(--nv-red-tint)}
.rot-pilha__mover{display:flex;flex-direction:column;gap:.15rem;flex:none}
.rot-pilha__seta{border:1px solid var(--nv-line);background:var(--nv-white);color:var(--nv-ink-2);font-size:.75rem;line-height:1;cursor:pointer;width:1.3rem;height:1.1rem;border-radius:var(--nv-r-sm)}
.rot-pilha__seta:hover{background:var(--nv-blue-tint);color:var(--nv-blue)}

.rot-tag{font:600 .68rem var(--nv-font-body);text-transform:uppercase;letter-spacing:.03em;background:var(--nv-green);color:#fff;padding:.08rem .4rem;border-radius:var(--nv-r-pill)}
.rot-tag--info{background:var(--nv-violet)}

.rot-acoes{display:flex;gap:.5rem;margin-top:1rem;flex-wrap:wrap}
.rot-painel{border:1px solid var(--nv-line);border-radius:var(--nv-r-md);padding:1rem;background:var(--nv-blue-tint-2);margin-bottom:1rem}
.rot-resumo{margin:.4rem 0;padding-left:1.2rem;color:var(--nv-ink-2);line-height:1.7}
.rot-obs{color:var(--nv-ink-2);margin:.5rem 0 1rem}

.rot-status{font:600 .75rem var(--nv-font-body);padding:.12rem .55rem;border-radius:var(--nv-r-pill)}
.rot-status--agendado{background:var(--nv-blue-tint);color:var(--nv-blue-deep)}
.rot-status--concluido{background:var(--nv-green-tint);color:var(--nv-green)}
.rot-status--cancelado{background:var(--nv-red-tint);color:var(--nv-red)}

/* Autocomplete de cidade (spec 032) */
.loc-cidade{position:relative}
.loc-ac{position:absolute;left:0;right:0;top:100%;z-index:20;background:var(--nv-white);border:1px solid var(--nv-line);border-radius:0 0 var(--nv-r-sm) var(--nv-r-sm);box-shadow:var(--nv-shadow-md);max-height:220px;overflow-y:auto}
.loc-ac__lista{list-style:none;margin:0;padding:4px}
.loc-ac__item{padding:8px 10px;border-radius:var(--nv-r-sm);cursor:pointer;font-size:14px;color:var(--nv-ink)}
.loc-ac__item:hover{background:var(--nv-blue-tint)}
.loc-ac__aviso{padding:10px;color:var(--nv-gray);font-size:13px}

/* Paginação padrão (design system) */
.paginacao{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px}
.paginacao__tamanho{display:flex;align-items:center;gap:6px}
.paginacao__opc{padding:2px 9px;border-radius:var(--nv-r-sm);text-decoration:none;color:var(--nv-ink-2);border:1px solid var(--nv-line)}
.paginacao__opc.on{border-color:var(--nv-blue);color:var(--nv-blue);font-weight:600;background:var(--nv-blue-tint)}
.paginacao__paginas{display:flex;align-items:center;gap:10px}
/* Bloco de totais / dica de preço (clareza de valores em cotações) */
.row--destaque{font-weight:700;font-size:1.05em;border-top:1px solid var(--nv-line);padding-top:6px;margin-top:4px}
.preco-hint{margin:6px 0;font-size:.95em;color:var(--nv-ink-2)}

/* Layout de 2 colunas (form + resumo) — wizard de Totais/Resumo e edição de cotação, specs/039 */
.split{display:grid;grid-template-columns:1.6fr 1fr;gap:20px;align-items:start}
@media (max-width:860px){.split{grid-template-columns:1fr}}
.cascade .row{display:flex;justify-content:space-between;padding:7px 0;font-size:14px;color:var(--nv-ink-2)}
.cascade .row .v{font-weight:600;color:var(--nv-ink)}
.cascade .row .eq{font-weight:800;color:var(--nv-ink);font-size:1.05em}

/* Memorial de cálculo do desconto (ícone "?" com composição por origem, specs/038) */
.memorial-desconto{display:inline-block;position:relative;margin-left:6px}
.memorial-desconto>summary{list-style:none;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;border:1.5px solid var(--nv-line);color:var(--nv-ink-2);font-size:11px;font-weight:700;cursor:pointer;user-select:none}
.memorial-desconto>summary::-webkit-details-marker{display:none}
.memorial-desconto[open]>summary{border-color:var(--nv-blue);color:var(--nv-blue)}
.memorial-desconto__pop{position:absolute;z-index:20;right:0;top:24px;min-width:220px;background:#fff;border:1px solid var(--nv-line);border-radius:var(--nv-r-sm);box-shadow:var(--nv-shadow-sm);padding:8px 12px}
/* .tbl-wrap usa overflow:hidden para arredondar os cantos da tabela — isso corta o pop-up
   do memorial de desconto quando ele é aberto dentro de uma célula. Libera o overflow só
   enquanto o pop-up estiver aberto, senão o conteúdo (origem do desconto) fica invisível. */
.tbl-wrap:has(.memorial-desconto[open]){overflow:visible}

/* Campo fixo (somente leitura) dentro de um field-grid — ex.: Cliente/Representada na edição de cotação */
.campo-fixo{display:flex;align-items:center;gap:9px;border:1.5px solid var(--nv-line);border-radius:var(--nv-r-sm);padding:10px 13px;background:var(--nv-canvas);color:var(--nv-ink-2);font-size:14px}

/* Filtro de múltipla seleção (checkboxes) — alinhado ao padrão dos demais campos do toolbar */
.field--checkgroup{min-width:180px}
.chk-group{display:flex;flex-wrap:wrap;gap:6px;padding:6px 0}
.chk-group ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.chk-group li{margin:0}
.chk-group label{display:inline-flex;align-items:center;gap:5px;border:1.5px solid var(--nv-line);border-radius:var(--nv-r-pill);padding:5px 10px;font-size:13px;cursor:pointer;background:#fff}
.chk-group input[type="checkbox"]{margin:0}
.chk-group input[type="checkbox"]:checked+*, .chk-group label:has(input:checked){border-color:var(--nv-blue);color:var(--nv-blue);background:var(--nv-blue-tint)}

/* Consulta de CNPJ — botão de lupa + área de status (feature 050) */
.doc-lookup{display:inline-flex;align-items:center;margin-left:6px}
.doc-lookup__btn{border:1.5px solid var(--nv-line);background:#fff;border-radius:var(--nv-r-pill);padding:3px 8px;cursor:pointer;font-size:13px;line-height:1}
.doc-lookup__btn:hover{border-color:var(--nv-blue)}
.doc-lookup__btn:disabled{opacity:.5;cursor:progress}
.doc-lookup__status{font-size:12px;margin-top:3px;min-height:14px}
.doc-lookup__status[data-estado="loading"]{color:var(--nv-blue)}
.doc-lookup__status[data-estado="success"]{color:#127a3d}
.doc-lookup__status[data-estado="error"],.doc-lookup__status[data-estado="invalid"]{color:#b42318}

/* Wizard de configuração (feature 053) — cabeçalho de passo, blocos, escolha com
   explicação, prévia, resumo e rodapé de navegação. Validado antes no protótipo
   docs/prototypes/comissoes-wizard/. */
.passo-head{margin-bottom:18px}
.passo-head__cima{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.passo-head h1{font-size:24px;font-weight:800}
.passo-head .conta{font-size:13px;color:var(--nv-gray);font-weight:600}
.passo-head .sub{color:var(--nv-gray);font-size:14px;line-height:1.55;max-width:70ch}

.bloco{background:#fff;border:1px solid var(--nv-line);border-radius:var(--nv-r-lg);padding:22px;box-shadow:var(--nv-shadow-sm);margin-bottom:18px}
.bloco__intro{font-size:13.5px;color:var(--nv-gray);margin:4px 0 16px;line-height:1.55}
.bloco h2{font-size:17px;font-weight:700}

.tag{display:inline-flex;align-items:center;gap:5px;font:700 10.5px/1 'Plus Jakarta Sans',sans-serif;text-transform:uppercase;letter-spacing:.04em;padding:5px 10px;border-radius:999px;white-space:nowrap}
.tag--obrig{background:var(--nv-red-tint);color:var(--nv-red)}
.tag--recom{background:var(--nv-blue-tint);color:var(--nv-blue)}

.escolhas{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.escolha{display:block;border:2px solid var(--nv-line);border-radius:var(--nv-r-md);padding:15px;background:#fff;cursor:pointer;transition:.15s}
.escolha:hover{border-color:var(--nv-blue)}
.escolha input{position:absolute;opacity:0;pointer-events:none}
.escolha__t{font-family:var(--nv-font-display);font-weight:700;font-size:14px;margin-bottom:5px}
.escolha__d{font-size:12.5px;color:var(--nv-gray);line-height:1.5}
.escolha:has(input:checked){border-color:var(--nv-blue);background:var(--nv-blue-tint)}
.escolha:has(input:checked) .escolha__t{color:var(--nv-blue)}

.ajuda{display:block;font-size:12.5px;color:var(--nv-gray);line-height:1.5;margin:-2px 0 7px}
.previa{margin-top:12px;font-size:13px;color:var(--nv-ink-2);background:var(--nv-canvas);border:1px dashed var(--nv-line);border-radius:var(--nv-r-sm);padding:14px 16px}
.previa__titulo{font-family:var(--nv-font-display);font-weight:700;font-size:12.5px;color:var(--nv-ink);margin-bottom:8px;display:block}
.previa ol{margin:0;padding-left:18px}
.previa li{padding:3px 0;font-variant-numeric:tabular-nums}
.previa code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:700;color:var(--nv-blue)}

.wizard-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;background:#fff;border:1px solid var(--nv-line);border-radius:var(--nv-r-lg);padding:16px 20px;box-shadow:var(--nv-shadow-sm)}
.wizard-foot__esq{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.wizard-foot__dir{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.link-sair{font-size:13px;color:var(--nv-gray);text-decoration:underline;cursor:pointer;background:none;border:0;font-family:inherit}
.link-sair:hover{color:var(--nv-ink-2)}

/* Configuração inicial (onboarding) — barra de progresso e lista-checklist de passos */
.oc-progresso{height:10px;border-radius:999px;background:var(--nv-canvas);border:1px solid var(--nv-line);overflow:hidden}
.oc-progresso__barra{height:100%;background:var(--nv-blue);border-radius:999px;transition:width .3s}
.oc-lista{display:flex;flex-direction:column;gap:10px}
.oc-item{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--nv-line);border-left:3px solid var(--nv-line);border-radius:var(--nv-r-md);padding:14px 18px;box-shadow:var(--nv-shadow-sm)}
.oc-item--concluido{border-left-color:var(--nv-green)}
.oc-item--pendente{border-left-color:var(--nv-blue)}
.oc-item--pulado{border-left-color:var(--nv-amber,#e0a531)}
.oc-item__ic{flex:none;display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--nv-canvas);border:1px solid var(--nv-line);font-weight:700;font-size:13px;color:var(--nv-ink-2)}
.oc-item--concluido .oc-item__ic{background:var(--nv-green);border-color:var(--nv-green);color:#fff}
.oc-item__corpo{flex:1;min-width:0}
.oc-item__topo{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.oc-item__topo strong{font-size:15px}
.oc-item__estado{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--nv-gray)}
.oc-item--concluido .oc-item__estado{color:#0a8f63}
.oc-item__desc{font-size:13px;color:var(--nv-gray);line-height:1.5;margin-top:4px}
.oc-item__acao{flex:none}
@media (max-width:640px){.oc-item{flex-wrap:wrap}.oc-item__acao{width:100%}.oc-item__acao .nv-btn{width:100%;justify-content:center}}

.resumo-lista{list-style:none;margin:0;padding:0}
.resumo-lista li{display:flex;align-items:flex-start;gap:11px;padding:11px 0;border-bottom:1px solid var(--nv-line);font-size:14px}
.resumo-lista li:last-child{border-bottom:0}
.resumo-lista .ok{color:var(--nv-green);font-weight:800;flex:none}
.resumo-lista .pend{color:var(--nv-amber);font-weight:800;flex:none}
.resumo-lista .impacto{display:block;font-size:12.5px;color:var(--nv-gray);margin-top:3px}
.resumo-secao{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.resumo-secao__editar{flex:none;font-size:12.5px;font-weight:700;color:var(--nv-blue);text-decoration:none}
.resumo-secao__editar:hover{text-decoration:underline}

/* Ficha do cliente (feature 054) — "Ver mais" ao fim de um bloco relacionado recortado a 3 itens */
.ver-mais{display:block;margin-top:8px;font-size:13px;font-weight:600;color:var(--nv-blue);text-decoration:none}
.ver-mais:hover{text-decoration:underline}

/* ============================================================
   Análise de Clientes (design, docs/superpowers/specs/2026-08-31)
   ============================================================ */
.motivos-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:20px}
.motivo-card{display:flex;align-items:center;gap:14px;text-align:left;text-decoration:none;background:#fff;border:1.5px solid var(--nv-line);border-radius:var(--nv-r-lg);padding:16px 18px;box-shadow:var(--nv-shadow-sm);transition:.15s;color:inherit}
.motivo-card:hover{border-color:var(--nv-ink-2)}
.motivo-card.on{border-color:var(--nv-blue);background:var(--nv-blue-tint-2);box-shadow:0 0 0 3px var(--nv-blue-tint)}
.motivo-card__ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;flex:none}
.motivo-card__ic svg{width:20px;height:20px}
.motivo-card--blue .motivo-card__ic{background:var(--nv-blue-tint);color:var(--nv-blue)}
.motivo-card--amber .motivo-card__ic{background:var(--nv-amber-tint);color:#c46a12}
.motivo-card--red .motivo-card__ic{background:var(--nv-red-tint);color:var(--nv-red)}
.motivo-card--violeta .motivo-card__ic{background:#EDE9FE;color:#6D28D9}
.motivo-card__valor{font-family:var(--nv-font-display);font-size:24px;font-weight:800;color:var(--nv-ink);line-height:1}
.motivo-card__label{color:var(--nv-gray);font-size:12.5px;margin-top:3px;line-height:1.3;display:block}

.filtros-analise{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-bottom:18px}
.filtros-analise .field-inline{min-width:160px}
.filtros-analise .field-inline label{display:block;font-size:11px;font-weight:600;color:var(--nv-gray);margin-bottom:4px;text-transform:uppercase;letter-spacing:.04em}

.clientes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.cliente-card{background:#fff;border:1px solid var(--nv-line);border-radius:var(--nv-r-lg);padding:18px;box-shadow:var(--nv-shadow-sm);display:flex;flex-direction:column;gap:12px}
.cliente-card__topo{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.cliente-card__nome{font-family:var(--nv-font-display);font-weight:700;font-size:15.5px;color:var(--nv-ink);line-height:1.3}
.cliente-card__sub{font-size:12.5px;color:var(--nv-gray);margin-top:2px}
.cliente-card__badges{display:flex;flex-wrap:wrap;gap:6px}
.cliente-card__info{display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:var(--nv-ink-2);border-top:1px solid var(--nv-line);padding-top:10px}
.cliente-card__info .li{display:flex;align-items:center;gap:8px}
.cliente-card__info svg{width:14px;height:14px;color:var(--nv-gray);flex:none}
.cliente-card__info .valor{margin-left:auto;font-weight:600;color:var(--nv-ink)}
.cliente-card__acoes{display:flex;gap:8px;flex-wrap:wrap;margin-top:2px}
.cliente-card__resp{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--nv-gray);background:var(--nv-canvas);padding:4px 10px;border-radius:999px;width:fit-content}

.pill--violeta{background:#EDE9FE;color:#6D28D9}
.pill--violeta .d{background:#8B5CF6}

.menu-silenciar{position:relative;flex:none}
.menu-silenciar>summary{list-style:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:var(--nv-gray)}
.menu-silenciar>summary::-webkit-details-marker{display:none}
.menu-silenciar:hover>summary,.menu-silenciar[open]>summary{background:var(--nv-canvas);color:var(--nv-ink)}
.menu-silenciar__pop{position:absolute;right:0;top:34px;z-index:30;width:230px;background:#fff;border:1px solid var(--nv-line);border-radius:var(--nv-r-md);box-shadow:var(--nv-shadow-md);padding:6px}
.menu-silenciar__item{display:flex;flex-direction:column;gap:2px;padding:9px 10px;border-radius:var(--nv-r-sm);cursor:pointer;width:100%;text-align:left;border:0;background:none;font-family:inherit}
.menu-silenciar__item:hover{background:var(--nv-blue-tint)}
.menu-silenciar__item b{font-size:13px;color:var(--nv-ink)}
.menu-silenciar__item span{font-size:11.5px;color:var(--nv-gray)}
.menu-silenciar__item.perigo b{color:var(--nv-red)}

.wpp-menu{position:relative;display:inline-block;vertical-align:middle;margin-left:6px}
.wpp-menu>summary{list-style:none;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;cursor:pointer;color:#fff;background:var(--nv-green)}
.wpp-menu>summary::-webkit-details-marker{display:none}
.wpp-menu>summary svg{width:19px;height:19px}
.wpp-menu:hover>summary,.wpp-menu[open]>summary{filter:brightness(.94)}
.wpp-menu__pop{position:absolute;left:0;top:36px;z-index:30;width:250px;background:#fff;border:1px solid var(--nv-line);border-radius:var(--nv-r-md);box-shadow:var(--nv-shadow-md);padding:6px}
.wpp-menu__item{display:flex;flex-direction:column;gap:2px;padding:9px 10px;border-radius:var(--nv-r-sm);cursor:pointer;width:100%;text-align:left;border:0;background:none;font-family:inherit;text-decoration:none}
.wpp-menu__item:hover{background:var(--nv-green-tint)}
.wpp-menu__item b{font-size:13px;color:var(--nv-ink)}
.wpp-menu__item span{font-size:11.5px;color:var(--nv-gray)}

.visib-opcoes{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.visib-opcao{display:block}
.visib-opcao .item{display:flex;align-items:center;gap:10px;border:1.5px solid var(--nv-line);border-radius:var(--nv-r-md);padding:11px 13px;width:100%;text-align:left;background:none;font-family:inherit;cursor:pointer}
.visib-opcao .item:hover{border-color:var(--nv-blue)}
.visib-opcao b{display:block;font-size:13.5px;color:var(--nv-ink)}
.visib-opcao span{font-size:12px;color:var(--nv-gray)}
.visib-opcao--atual .item{border-color:var(--nv-blue);background:var(--nv-blue-tint)}

/* Diff da tela de auditoria */
.aud-diff { margin: 6px 0 0; padding-left: 18px; }
.aud-diff__antes { color: var(--red, #b42318); text-decoration: line-through; }
.aud-diff__depois { color: var(--green, #067647); }

/* --- Tela de login (base_auth) --- */
.auth-body{margin:0;background:var(--nv-canvas);font-family:var(--nv-font-body)}
.login-split{display:flex;min-height:100vh}
.login-brand{flex:0 0 45%;background:linear-gradient(135deg,var(--nv-blue) 0%,var(--nv-blue-deep) 100%);color:var(--nv-white);padding:var(--nv-space-10);display:flex;flex-direction:column;justify-content:center;gap:var(--nv-space-4)}
.login-brand__mark{font-family:var(--nv-font-display);font-weight:800;font-size:34px;letter-spacing:.5px}
.login-brand__tag{font-size:18px;line-height:1.5;max-width:22ch;opacity:.92}
.login-form-wrap{flex:1;display:flex;align-items:center;justify-content:center;padding:var(--nv-space-6)}
.login-card{width:100%;max-width:360px;background:var(--nv-white);border:1px solid var(--nv-line);border-radius:var(--nv-r-lg);padding:var(--nv-space-8);box-shadow:var(--nv-shadow-md)}
.login-card__title{font-family:var(--nv-font-display);font-size:26px;margin:0 0 4px;color:var(--nv-ink)}
.login-card__sub{color:var(--nv-gray);margin:0 0 var(--nv-space-6)}
.login-form .field-block{margin-bottom:var(--nv-space-4)}
.login-btn{width:100%;margin-top:var(--nv-space-2);box-shadow:var(--nv-shadow-blue)}
.login-erro{background:var(--nv-red-tint);color:var(--nv-red);border-radius:var(--nv-r-sm);padding:var(--nv-space-3);margin-bottom:var(--nv-space-4);font-size:14px}
.login-foot{margin:var(--nv-space-6) 0 0;text-align:center;font-size:14px}
@media (max-width:880px){.login-brand{display:none}}