/* VIS7 (redesenho visual, fase 7): Dinheiro e gestão (Financeiro, Relatórios, Indicadores com Metas, Catálogo com Estoque e Compras,
   Configurações em abas com Equipe e Minha conta, Assinatura) sobre os tokens --v-* (tokens-v2.css). Arquivo próprio para não pisar no VIS5a e no
   VIS6 (que mexem no kit.css em paralelo); carregado DEPOIS do funil-nova-proposta.css. O app.css segue intocado até a fase 8: as classes antigas
   continuam no HTML (os e2e dependem delas) e o visual novo SOMA (class="card k-dg-cartao") ou entra pelo contexto (.k-dg .card).
   Mobile-first: base = celular; 761 px divide; 1100 px abre as duas colunas. Mocks: mocks-visual/fase7/*.html. docs/operacao.md §76. */

/* ============================== peças comuns da fase ============================== */
.k-dg { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--v-space-5); font-family: var(--v-font-body); color: var(--v-ink); }
.k-dg > * { min-width: 0; margin: 0; }
/* cabeçalho da tela: título, uma linha do que é a tela e as ações (no celular as ações ocupam a largura) */
.k-dg-cab { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--v-space-3) var(--v-space-4); }
.k-dg-tit { margin: 0; font: 800 var(--v-t-xl)/1.15 var(--v-font-display); letter-spacing: -.02em; color: var(--v-ink); }
.k-dg-sub { margin: var(--v-space-1) 0 0; font-size: var(--v-t-sm); color: var(--v-ink-2); }
.k-dg-acoes { display: flex; flex-wrap: wrap; gap: var(--v-space-2); width: 100%; }
.k-dg-acoes > * { flex: 1 1 auto; margin: 0; }
/* números: um cartão, células com linha entre elas (2 por linha no celular, até 4 a partir de 761 px); valor sempre vindo pronto do servidor */
.k-dg-num { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: hidden; border: 1px solid var(--v-line); border-radius: var(--v-radius-card); background: var(--v-surface); box-shadow: var(--v-shadow-1); }
.k-dg-num > * { min-width: 0; display: grid; gap: 2px; align-content: start; margin: 0; padding: var(--v-space-3); border: 0; border-radius: 0; background: var(--v-surface); color: var(--v-ink); box-shadow: none; }
.k-dg-num > :nth-child(2n) { border-left: 1px solid var(--v-line); }
.k-dg-num > :nth-child(n+3) { border-top: 1px solid var(--v-line); }
.k-dg-num > :last-child:nth-child(odd) { grid-column: 1 / -1; }   /* número sozinho na última linha ocupa a largura (a linha de cima fecha inteira) */
.k-dg-num-rot, .k-dg-num .kpi-rotulo { margin: 0; font-size: var(--v-t-sm); font-weight: 600; color: var(--v-ink-2); }
.k-dg-num-val, .k-dg-num .kpi-valor { margin: var(--v-space-1) 0 0; font: 800 var(--v-t-md)/1.15 var(--v-font-display); letter-spacing: -.01em; color: var(--v-ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.k-dg-num-sub, .k-dg-num .kpi-sub { margin: 0; font-size: var(--v-t-sm); color: var(--v-ink-3); }
/* abas da tela (sub-seções): sublinhado amarelo na aberta; rolam DENTRO da faixa no celular */
.k-dg-abas { display: flex; gap: var(--v-space-1); margin: 0; padding: 0; border: 0; border-bottom: 1px solid var(--v-line); background: none; overflow-x: auto; scrollbar-width: none; }
.k-dg-abas::-webkit-scrollbar { display: none; }
.k-dg-abas > button {
    flex: none; display: inline-flex; align-items: center; gap: var(--v-space-2); min-height: var(--v-alvo); margin: 0 0 -1px; padding: 0 var(--v-space-4);
    border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: none; color: var(--v-ink-2); font: 700 var(--v-t-sm)/1 var(--v-font-body); white-space: nowrap; cursor: pointer;
}
.k-dg-abas > button:hover { background: var(--v-surface-2); color: var(--v-ink); filter: none; }
.k-dg-abas > button:focus-visible { outline: 3px solid var(--v-info); outline-offset: -3px; }
.k-dg-abas > button:is([aria-pressed="true"], [aria-selected="true"], [aria-current="page"], .active) { border-bottom-color: var(--v-action); background: none; color: var(--v-ink); }
/* cartão: soma ao .card antigo (class="card k-dg-cartao") ou vem pelo contexto */
.k-dg-cartao, .k-dg :where(.card) { margin: 0; padding: var(--v-space-4); border: 1px solid var(--v-line); border-radius: var(--v-radius-card); background: var(--v-surface); box-shadow: var(--v-shadow-1); color: var(--v-ink); }
.k-dg :where(.card-titulo) { margin: 0; font: 700 var(--v-t-lg)/1.25 var(--v-font-display); color: var(--v-ink); }
.k-dg :where(.card-nota) { color: var(--v-ink-3); font-size: var(--v-t-sm); }
.k-dg :where(.card-cabeca) { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--v-space-1) var(--v-space-3); margin-bottom: var(--v-space-4); }
.k-dg-cartao--tab { padding: 0; overflow: hidden; }
/* botões antigos dentro da fase: contorno (secundário). Amarelo só na ação principal da tela, que leva k-btn k-btn--pri. Perigo, texto e ícone
   ficam como estão; :where() deixa a regra com o peso de uma classe só (.k-dg), então quem for mais específico no app.css continua valendo */
.k-dg :where(.btn:not(.btn-perigo, .btn-txt, .btn-ico, .k-btn, .excluir)) { border: 1px solid var(--v-ink-3); border-radius: var(--v-radius-ctl); background: var(--v-surface); color: var(--v-ink); font-family: var(--v-font-body); font-weight: 700; }
.k-dg :where(.btn:not(.btn-perigo, .btn-txt, .btn-ico, .k-btn, .excluir)):hover { background: var(--v-surface-2); filter: none; }
.k-dg :where(.btn, .k-btn):focus-visible { outline: 3px solid var(--v-info); outline-offset: 2px; }
.k-dg :where(.form-control) { border-color: var(--v-ink-3); border-radius: var(--v-radius-ctl); background-color: var(--v-surface); color: var(--v-ink); }
.k-dg :where(.form-control):focus { outline: 3px solid var(--v-info); outline-offset: 1px; border-color: var(--v-info); }
.k-dg :where(.form-label) { font: 700 var(--v-t-sm)/1.3 var(--v-font-body); color: var(--v-ink); }
/* tabela: cabeçalho em versalete, linhas finas; rola DENTRO do cartão (.k-dg-rola), nunca a página */
.k-dg-rola { overflow-x: auto; }
.k-dg-tab { width: 100%; border-collapse: collapse; font-size: var(--v-t-sm); color: var(--v-ink-2); }
.k-dg-tab th { padding: var(--v-space-3) var(--v-space-4); border-bottom: 1px solid var(--v-line); background: var(--v-surface); color: var(--v-ink-3); font: 700 12px/1.2 var(--v-font-body); letter-spacing: .07em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.k-dg-tab td { padding: var(--v-space-2) var(--v-space-4); border-bottom: 1px solid var(--v-line); vertical-align: middle; }
.k-dg-tab tbody tr:last-child td { border-bottom: 0; }
.k-dg-tab tbody tr:hover { background: var(--v-surface-2); }
.k-dg-tab :is(th, td).k-dg-n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.k-dg-tab .k-dg-forte { color: var(--v-ink); font-weight: 700; }
.k-dg-tab tfoot td { border-top: 2px solid var(--v-line); border-bottom: 0; color: var(--v-ink); font-weight: 700; }
/* estado: sempre cor + texto (+ ícone quando houver) */
.k-dg-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 2px 10px; border-radius: 999px; font-size: var(--v-t-xs); font-weight: 700; line-height: 1.2; white-space: nowrap; }
.k-dg-chip .ic { width: 14px; height: 14px; }
.k-dg-chip--ok { background: var(--v-ok-bg); color: var(--v-ok); }
.k-dg-chip--warn { background: var(--v-warn-bg); color: var(--v-warn); }
.k-dg-chip--err { background: var(--v-err-bg); color: var(--v-err); }
.k-dg-chip--info { background: var(--v-info-bg); color: var(--v-info); }
.k-dg-chip--neutro { background: var(--v-surface-2); color: var(--v-ink-2); }
/* lista: título forte, linha de detalhe e a ação à direita */
.k-dg-lista { display: grid; margin: 0; padding: 0; list-style: none; }
.k-dg-lista > * { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--v-space-2) var(--v-space-4); padding: var(--v-space-3) 0; border: 0; border-top: 1px solid var(--v-line); background: none; }
.k-dg-lista > :first-child { border-top: 0; }
.k-dg-lista-tit { margin: 0; font-weight: 700; color: var(--v-ink); }
.k-dg-lista-meta { margin: 2px 0 0; font-size: var(--v-t-sm); color: var(--v-ink-3); }
/* duas colunas (principal larga + lateral) a partir de 1100 px */
.k-dg-duas { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--v-space-5); align-items: start; }
.k-dg-duas > * { min-width: 0; }

@media (min-width: 761px) {
    .k-dg-tit { font-size: var(--v-t-2xl); }
    .k-dg-acoes { width: auto; }
    .k-dg-acoes > * { flex: none; }
    .k-dg-cartao, .k-dg :where(.card) { padding: var(--v-space-5); }
    .k-dg-cartao--tab { padding: 0; }
    .k-dg-num { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
    .k-dg-num > * { padding: var(--v-space-4) var(--v-space-5); border-top: 0; border-left: 1px solid var(--v-line); }
    .k-dg-num > :first-child { border-left: 0; }
    .k-dg-num > :last-child:nth-child(odd) { grid-column: auto; }
    .k-dg-num-val, .k-dg-num .kpi-valor { font-size: var(--v-t-lg); }
}
@media (min-width: 1100px) {
    .k-dg-duas { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); }
}

/* Cada frente escreve SÓ entre os seus marcadores (o merge das frentes não conflita). */
/* ==== VIS7-FIN ==== */
/* Financeiro (js/abas/financeiro.js; mock fase7/financeiro.html). Escopo .fin-k (o wrapper da aba) e #solar_financeiro; as classes antigas ficam no HTML
   (e2e e testes node casam .linha, .fin-*, .chip-erro, #pagTotais...). [hidden] precisa vencer o display: grid do .k-dg-duas (#finVista). */
#solar_financeiro [hidden] { display: none; }
.fin-k .fin-abas { margin: 0; }
.fin-k .fin-abas .btn { flex: none; margin: 0 0 -1px; }
.fin-k .card-cabeca:has(> .k-dica) { justify-content: flex-start; align-items: center; gap: 0; }
.fin-k .card-cabeca .card-nota { margin: 0; }
.fin-k .linha-titulo { overflow: visible; white-space: normal; font: 700 var(--v-t-sm)/1.3 var(--v-font-body); color: var(--v-ink); }
.fin-k .linha-fraca { font-size: var(--v-t-sm); color: var(--v-ink-3); }
.fin-k div.linha { gap: var(--v-space-2) var(--v-space-4); padding: var(--v-space-3) 0; border: 0; border-top: 1px solid var(--v-line); background: none; }
.fin-k .sub-titulo { font: 700 var(--v-t-md)/1.3 var(--v-font-display); color: var(--v-ink); }
/* estado sempre com cor e texto: os chips antigos (chip-ok/aviso/erro) no visual novo, sem trocar a classe (flx1/vinc1 casam "chip chip-erro") */
.fin-k .chip { min-height: 28px; padding: 2px 10px; border: 0; border-radius: 999px; background: var(--v-surface-2); color: var(--v-ink-2); font: 700 var(--v-t-xs)/1.2 var(--v-font-body); white-space: nowrap; }
.fin-k .chip-ok { background: var(--v-ok-bg); color: var(--v-ok); }
.fin-k .chip-aviso { background: var(--v-warn-bg); color: var(--v-warn); }
.fin-k .chip-erro { background: var(--v-err-bg); color: var(--v-err); }
/* A receber: cartão com tabela; até 760 px cada linha é um cartão (o cabeçalho da tabela fica só para o leitor de tela) */
.fin-k .k-dg-cartao--tab > .card-cabeca { margin: 0; padding: var(--v-space-4) var(--v-space-4) var(--v-space-3); }
.fin-k .k-dg-cartao--tab > :is(.aviso, .vazio) { margin: 0 var(--v-space-4) var(--v-space-3); }
#finAVencer { display: grid; gap: var(--v-space-4); }
.fin-tab { display: block; }
.fin-tab thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fin-tab tbody { display: grid; }
.fin-tab tr.linha { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--v-space-1) var(--v-space-3); padding: var(--v-space-3) var(--v-space-4); border: 0; border-top: 1px solid var(--v-line); }
.fin-tab td { display: block; min-width: 0; padding: 0; border: 0; }
.fin-tab td:first-child, .fin-tab .fin-acao { grid-column: 1 / -1; }
.fin-tab .fin-acao .btn { width: 100%; margin: var(--v-space-1) 0 0; }
.fin-sub-linha { display: block; font-size: var(--v-t-xs); color: var(--v-ink-3); }
/* comissão: valor do servidor à direita (dono/gerente) ou em destaque (vendedor) */
.fin-com-valor { margin: 0; font: 800 var(--v-t-md)/1.2 var(--v-font-display); color: var(--v-ink); white-space: nowrap; }
.fin-valor-g { margin: 0 0 var(--v-space-2); font: 800 var(--v-t-xl)/1.1 var(--v-font-display); letter-spacing: -.02em; color: var(--v-ink); font-variant-numeric: tabular-nums; }
.fin-restrito { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--v-space-3); align-items: start; margin: var(--v-space-4) 0 0; padding: var(--v-space-4); border: 1px dashed var(--v-ink-3); border-radius: var(--v-radius-ctl); color: var(--v-ink-2); font-size: var(--v-t-sm); }
.fin-restrito .ic { width: 22px; height: 22px; color: var(--v-ink-3); }
/* Fluxo (Opção A): gráfico que rola DENTRO dele no celular; a página nunca rola de lado */
.fin-aviso-neg { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--v-space-3); align-items: start; margin: var(--v-space-4) 0 0; padding: var(--v-space-3) var(--v-space-4); border-radius: 12px; background: var(--v-err-bg); color: var(--v-ink); font-size: var(--v-t-sm); }
.fin-aviso-neg .ic { width: 22px; height: 22px; color: var(--v-err); }
.fin-aviso-neg p { margin: 0; }
.fin-graf-rola { overflow-x: auto; margin: var(--v-space-4) 0 0; }
.fin-graf-rola:focus-visible { outline: 3px solid var(--v-info); outline-offset: 2px; }
.fin-graf { display: block; width: 100%; min-width: 600px; height: auto; }
.fin-graf text { fill: var(--v-ink-3); font: 600 11px var(--v-font-body); }
.fin-zero { stroke: var(--v-ink-3); stroke-width: 1.5; }
.fin-b-entra { fill: var(--v-ok); }
.fin-b-sai { fill: var(--v-err); opacity: .75; }
.fin-b-com { fill: var(--v-warn); opacity: .8; }
.fin-l-saldo { fill: none; stroke: var(--v-ink); stroke-width: 2.5; stroke-linejoin: round; }
.fin-p-saldo { fill: var(--v-ink); }
.fin-p-neg { fill: var(--v-err); stroke: var(--v-surface); stroke-width: 2; }
.fin-leg { display: flex; flex-wrap: wrap; gap: var(--v-space-2) var(--v-space-4); margin: var(--v-space-2) 0 0; font-size: var(--v-t-xs); color: var(--v-ink-2); }
.fin-leg b { display: inline-block; width: 12px; height: 12px; margin-right: 6px; border-radius: 3px; vertical-align: -1px; }
.fin-q-entra { background: var(--v-ok); }
.fin-q-sai { background: var(--v-err); }
.fin-q-com { background: var(--v-warn); }
.fin-leg .fin-q-saldo { width: 18px; height: 0; border-top: 3px solid var(--v-ink); border-radius: 0; vertical-align: middle; }
.fin-explica { margin: var(--v-space-3) 0 0; border: 1px solid var(--v-line); border-radius: var(--v-radius-ctl); background: var(--v-surface); }
.fin-explica summary { display: flex; align-items: center; gap: var(--v-space-2); min-height: var(--v-alvo); padding: 0 var(--v-space-4); font: 700 var(--v-t-sm)/1.2 var(--v-font-body); color: var(--v-ink); cursor: pointer; }
.fin-explica summary:focus-visible { outline: 3px solid var(--v-info); outline-offset: 2px; }
.fin-explica summary .ic { width: 20px; height: 20px; color: var(--v-ink-3); }
.fin-explica[open] summary { border-bottom: 1px solid var(--v-line); }
.fin-explica > .card-nota { margin: var(--v-space-3) var(--v-space-4); }
.fin-tab-fluxo tbody th { padding: var(--v-space-2) var(--v-space-4); border-bottom: 1px solid var(--v-line); background: none; color: var(--v-ink); font: 700 var(--v-t-sm)/1.3 var(--v-font-body); letter-spacing: 0; text-transform: none; white-space: nowrap; }
@media (min-width: 761px) {
    .fin-tab { display: table; }
    .fin-tab thead { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; display: table-header-group; }
    .fin-tab tbody { display: table-row-group; }
    .fin-tab tr.linha { display: table-row; padding: 0; border: 0; }
    .fin-tab td { display: table-cell; padding: var(--v-space-2) var(--v-space-3); border-bottom: 1px solid var(--v-line); }
    .fin-tab td:first-child { padding-left: var(--v-space-5); }
    .fin-tab .fin-acao { padding-right: var(--v-space-4); }
    .fin-tab .fin-acao .btn { padding: 0 var(--v-space-3); }
    .fin-tab tbody tr:last-child td { border-bottom: 0; }
    .fin-tab .fin-acao { text-align: right; }
    .fin-tab .fin-acao .btn { width: auto; margin: 0; }
    .fin-rot { display: none; }
    .fin-k .k-dg-cartao--tab > .card-cabeca { padding: var(--v-space-5) var(--v-space-5) var(--v-space-3); }
}
/* ==== fim VIS7-FIN ==== */

/* ==== VIS7-IND ==== */
/* Relatórios (.k-rel): galeria de cartões no computador (Opção A); no celular o campo "Relatório" de sempre (#rel_tipo, que segue sendo o estado) */
.k-rel-passo { display: none; margin: 0 0 var(--v-space-3); font: 700 var(--v-t-md)/1.3 var(--v-font-display); color: var(--v-ink); }
.k-rel-gal { display: none; margin: 0 0 var(--v-space-5); padding: 0; list-style: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--v-space-3); }
.k-rel-c {
    display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 2px var(--v-space-3); align-content: start; width: 100%; height: 100%; min-height: var(--v-alvo); margin: 0;
    padding: var(--v-space-3) var(--v-space-4); border: 1px solid var(--v-line); border-radius: 14px; background: var(--v-surface); color: var(--v-ink); font-family: var(--v-font-body); text-align: left; cursor: pointer;
}
.k-rel-c:hover { border-color: var(--v-ink-3); filter: none; }
.k-rel-c:focus-visible { outline: 3px solid var(--v-info); outline-offset: 2px; }
.k-rel-c .ic { margin-top: 2px; color: var(--v-ink-2); }
.k-rel-c b { font-size: var(--v-t-sm); font-weight: 700; }
.k-rel-c small { grid-column: 2; font-size: var(--v-t-xs); line-height: 1.35; color: var(--v-ink-3); }
.k-rel-c[aria-pressed="true"] { padding: calc(var(--v-space-3) - 1px) calc(var(--v-space-4) - 1px); border: 2px solid var(--v-ink); background: var(--v-surface-2); }
.k-rel-c[aria-pressed="true"] .ic { color: var(--v-ink); }
.k-rel .rel-filtros { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--v-space-3); }
.k-rel-tipo { grid-column: 1 / -1; }
.k-rel #relDica { margin: 0 0 var(--v-space-3); }
.k-rel #relDica.k-rel-lgpd { padding: var(--v-space-3) var(--v-space-4); border-radius: 12px; background: var(--v-warn-bg); color: var(--v-ink); font-weight: 700; }
.k-rel .card-acoes { justify-content: flex-start; gap: var(--v-space-3); }
.k-rel .card-acoes > .btn { flex: 1 1 100%; }
.k-rel #btnCsvRel { display: inline-flex; align-items: center; justify-content: center; gap: var(--v-space-2); }
.k-rel-res { overflow: hidden; border: 1px solid var(--v-line); border-radius: var(--v-radius-card); background: var(--v-surface); box-shadow: var(--v-shadow-1); }
.k-rel-res:empty { display: none; }
.k-rel #relContagem { margin: 0; padding: var(--v-space-4); border-bottom: 1px solid var(--v-line); font: 700 var(--v-t-md)/1.3 var(--v-font-display); color: var(--v-ink); }
.k-rel-res > .vazio { margin: 0; padding: var(--v-space-5) var(--v-space-4); }
.k-rel-res > .k-dg-rola:focus-visible { outline: 3px solid var(--v-info); outline-offset: -3px; }
.k-rel .rel-tabela { width: 100%; border-collapse: collapse; font-size: var(--v-t-sm); color: var(--v-ink-2); }
.k-rel .rel-tabela th { padding: var(--v-space-3) var(--v-space-4); border-bottom: 1px solid var(--v-line); color: var(--v-ink-3); font: 700 12px/1.2 var(--v-font-body); letter-spacing: .07em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.k-rel .rel-tabela td { padding: var(--v-space-2) var(--v-space-4); border-bottom: 1px solid var(--v-line); vertical-align: middle; }
.k-rel .rel-tabela tbody tr:hover td { background: var(--v-surface-2); }
.k-rel .rel-tabela tfoot td { border-top: 2px solid var(--v-line); border-bottom: 0; color: var(--v-ink); font-weight: 700; }
.k-rel .rel-tabela :is(th, td).num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.k-rel .rel-tabela :is(th, td):first-child { background: var(--v-surface); }
.k-rel .rel-tabela tbody tr:hover td:first-child { background: var(--v-surface-2); }
.k-rel-pag { margin: 0; padding: var(--v-space-3) var(--v-space-4); border-top: 1px solid var(--v-line); font-size: var(--v-t-sm); color: var(--v-ink-3); }

/* Indicadores (.k-ind): filtros soltos, números em cartões (3 por linha no computador), barras horizontais (Opção A) */
.k-ind-filtros { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--v-space-3); }
.k-ind #indPeriodoTxt { margin: 0 0 var(--v-space-4); }
.k-ind-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--v-space-3); margin: 0 0 var(--v-space-5); }
.k-ind-kpis .kpi {
    display: grid; gap: 2px; align-content: start; min-width: 0; padding: var(--v-space-3); border: 1px solid var(--v-line); border-radius: var(--v-radius-card);
    background: var(--v-surface); box-shadow: var(--v-shadow-1); color: var(--v-ink);
}
.k-ind-kpis .kpi > p { margin: 0; }
.k-ind-kpis .kpi-rotulo { display: flex; align-items: center; min-height: var(--v-alvo); margin: -10px 0 -6px; font-size: var(--v-t-sm); font-weight: 600; color: var(--v-ink-2); }
.k-ind-kpis .kpi-valor { margin-top: var(--v-space-1); font: 800 var(--v-t-lg)/1.15 var(--v-font-display); letter-spacing: -.02em; color: var(--v-ink); font-variant-numeric: tabular-nums; }
.k-ind-kpis .kpi-sub { font-size: var(--v-t-sm); color: var(--v-ink-3); }
.k-ind-kpis .k-ind-dest { grid-column: 1 / -1; border-color: var(--v-surface-2); background: var(--v-surface-2); }
.k-ind-kpis .k-ind-dest .kpi-rotulo { color: var(--v-ink-2); }
.k-ind-kpis .k-ind-dest .kpi-sub { color: var(--v-ink-3); }
.k-ind .ind-delta { font-size: var(--v-t-xs); font-weight: 700; }
.k-ind-delta--bom { color: var(--v-ok); }
.k-ind-delta--ruim { color: var(--v-err); }
.k-ind-delta--neutro { color: var(--v-ink-3); }
.k-ind-metades { gap: var(--v-space-4); margin: 0 0 var(--v-space-4); }
.k-ind .inicio-lista.k-ind-hb { display: grid; gap: var(--v-space-3); margin: var(--v-space-3) 0 0; padding: 0; list-style: none; }
.k-ind-hb .ind-linha { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px var(--v-space-3); min-height: 0; padding: 0; border: 0; font-size: var(--v-t-sm); color: var(--v-ink); }
.k-ind-hb .ind-linha-num { text-align: right; white-space: nowrap; }
.k-ind-hb .ind-linha-num .fraco { display: block; font-size: var(--v-t-xs); }
.k-ind-hb .fraco { color: var(--v-ink-3); }
.k-ind-barra { position: relative; grid-column: 1 / -1; height: 10px; overflow: hidden; border-radius: 999px; background: var(--v-surface-2); }
.k-ind-barra > i { position: absolute; top: 0; bottom: 0; left: 0; width: 0; border-radius: inherit; }
.k-ind-total { background: var(--v-line); }
.k-ind-pond { background: var(--v-brand); }
.k-ind-leg { display: flex; flex-wrap: wrap; gap: var(--v-space-2) var(--v-space-4); margin: var(--v-space-3) 0 0; font-size: var(--v-t-xs); color: var(--v-ink-2); }
.k-ind-leg > span::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 6px; border-radius: 3px; vertical-align: -1px; background: var(--v-brand); }
.k-ind-leg > .k-ind-leg-total::before { background: var(--v-line); }
.k-ind .ig-txt { fill: var(--v-ink); }
.k-ind .ig-num { fill: var(--v-ink-3); }
.k-ind .ig-fundo { fill: var(--v-surface-2); }
.k-ind .ig-barra { fill: var(--v-brand); }
.k-ind .k-ind-perdas .ig-barra { fill: var(--v-err); }
.k-ind-explica { margin: 0; border: 1px solid var(--v-line); border-radius: var(--v-radius-ctl); background: var(--v-surface); color: var(--v-ink-2); }
.k-ind-explica summary { display: flex; align-items: center; gap: var(--v-space-2); min-height: var(--v-alvo); padding: 0 var(--v-space-4); font-size: var(--v-t-sm); font-weight: 700; color: var(--v-ink); cursor: pointer; }
.k-ind-explica summary:focus-visible { outline: 3px solid var(--v-info); outline-offset: 2px; }
.k-ind-explica > p { margin: 0; padding: 0 var(--v-space-4) var(--v-space-4); }

/* Metas do mês, dentro de Indicadores (como hoje): um bloco por vendedor com avatar, as 3 metas lado a lado no computador e a faixa em texto */
.k-ind + #indMetas { margin-top: var(--v-space-5); padding: var(--v-space-4); border: 1px solid var(--v-line); border-radius: var(--v-radius-card); background: var(--v-surface); box-shadow: var(--v-shadow-1); color: var(--v-ink); font-family: var(--v-font-body); }
#indMetas .card-titulo { margin: 0; font: 700 var(--v-t-lg)/1.25 var(--v-font-display); color: var(--v-ink); }
#indMetas .card-nota { color: var(--v-ink-3); font-size: var(--v-t-sm); }
#indMetas .meta-vendedor { margin-top: var(--v-space-3); padding: var(--v-space-4); border: 1px solid var(--v-line); border-radius: 14px; }
#indMetas .meta-nome { display: flex; align-items: center; gap: var(--v-space-3); margin: 0 0 var(--v-space-4); font: 700 var(--v-t-lg)/1.25 var(--v-font-display); color: var(--v-ink); }
.k-meta-avatar { display: grid; flex: none; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--v-brand); color: var(--v-surface); font: 700 var(--v-t-xs)/1 var(--v-font-display); }
.k-meta-linhas { display: grid; gap: var(--v-space-4); }
#indMetas .meta-linha { display: grid; gap: var(--v-space-2); align-content: start; margin: 0; }
#indMetas .meta-rotulo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--v-space-1) var(--v-space-2); margin: 0; font-size: var(--v-t-sm); font-weight: 700; }
#indMetas .meta-texto { margin: 0; font-size: var(--v-t-sm); color: var(--v-ink-3); }
#indMetas .meta-texto strong { color: var(--v-ink); }
#indMetas .meta-barra { height: 10px; border-radius: 999px; background: var(--v-surface-2); }
#indMetas .meta-barra::-webkit-progress-bar { border-radius: 999px; background: var(--v-surface-2); }
#indMetas .meta-cheia::-webkit-progress-value { border-radius: 999px; background: var(--v-ok); }
#indMetas .meta-meio::-webkit-progress-value { border-radius: 999px; background: var(--v-warn); }
#indMetas .meta-baixa::-webkit-progress-value { border-radius: 999px; background: var(--v-err); }
#indMetas .meta-cheia::-moz-progress-bar { border-radius: 999px; background: var(--v-ok); }
#indMetas .meta-meio::-moz-progress-bar { border-radius: 999px; background: var(--v-warn); }
#indMetas .meta-baixa::-moz-progress-bar { border-radius: 999px; background: var(--v-err); }
#indMetas .linha-fraca { margin: 0; padding: var(--v-space-2) var(--v-space-3); border: 1px dashed var(--v-line); border-radius: var(--v-radius-ctl); font-size: var(--v-t-sm); color: var(--v-ink-3); }
#indMetas .meta-edicao { margin-top: var(--v-space-3); }
#indMetas .meta-edicao summary { font-size: var(--v-t-sm); font-weight: 700; color: var(--v-ink); }
#indMetas .meta-edicao summary:focus-visible { outline: 3px solid var(--v-info); outline-offset: 2px; }
#indMetas .form-control { border-color: var(--v-ink-3); border-radius: var(--v-radius-ctl); background-color: var(--v-surface); color: var(--v-ink); }
#indMetas .card-acoes { justify-content: flex-start; }

@media (min-width: 761px) {
    .k-rel-passo { display: block; }
    .k-rel-gal { display: grid; }
    /* escondido só à vista, com caixa de 44 px (o campo segue sendo o estado e o contrato dos e2e: selectOption precisa de caixa visível) */
    .k-rel-tipo { position: absolute; width: var(--v-alvo); height: var(--v-alvo); overflow: hidden; opacity: 0; pointer-events: none; }
    .k-rel-tipo select { width: var(--v-alvo); height: var(--v-alvo); }
    .k-rel .card-acoes > .btn { flex: none; }
    .k-rel #relContagem { padding: var(--v-space-4) var(--v-space-5); }
    .k-ind-filtros { grid-template-columns: repeat(2, 240px); }
    .k-ind-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--v-space-4); }
    .k-ind-kpis .kpi { padding: var(--v-space-4) var(--v-space-5); }
    .k-ind-kpis .k-ind-dest { grid-column: auto; }
    .k-ind + #indMetas { padding: var(--v-space-5); }
    #indMetas .meta-vendedor { padding: var(--v-space-5); }
    .k-meta-linhas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--v-space-5); }
}
@media (min-width: 1100px) {
    .k-rel-gal { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .k-rel .rel-filtros { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .k-ind-metades { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--v-space-5); }
}
/* ==== fim VIS7-IND ==== */

/* ==== VIS7-CAT ==== */
/* VIS7-CAT: Catálogo com Estoque e Compras como sub-abas (Opção A dos mocks catalogo.html e estoque-compras.html). Kits, componentes, itens de estoque e
   ordens de compra usam o MESMO <table>: cartão no celular (a .k-cat-meta, linha de detalhe de sempre, resume os números) e tabela a partir de 1100 px
   (cada número na sua coluna .k-cat-col e a .k-cat-meta some). As classes antigas (.linha, .linha-acoes, .est-item, .comp-ordem) seguem: são contrato. */
.k-cat .cat-corpo { margin: 0; }
.k-cat :is(#estCorpo, #compCorpo) { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--v-space-4); }
.k-cat :is(#estCorpo, #compCorpo) > * { min-width: 0; margin: 0; }
.k-cat .k-dg-abas > button { box-shadow: none; }   /* o .seg button[aria-pressed] do app.css põe sombra na aba aberta */
.k-cat .k-dg-num { gap: 0; margin: 0; }   /* o .obra-kpis do app.css separa os números com vão */
.k-cat .sub-titulo { margin: var(--v-space-2) 0 0; font: 700 var(--v-t-md)/1.3 var(--v-font-display); color: var(--v-ink); }
.k-cat-aviso { margin: 0; padding: var(--v-space-3) var(--v-space-4); border-radius: var(--v-radius-ctl); background: var(--v-info-bg); color: var(--v-ink); }
/* filtros das ordens: pílulas (a escolhida em tinta escura) */
.k-cat-filtros { display: flex; flex-wrap: wrap; gap: var(--v-space-2); padding: 0; border-radius: 0; background: none; }
.k-cat-filtros button { flex: none; min-height: var(--v-alvo); padding: 0 var(--v-space-4); border: 1px solid var(--v-line); border-radius: 999px; background: var(--v-surface); color: var(--v-ink); font: 700 var(--v-t-sm)/1.2 var(--v-font-body); box-shadow: none; }
.k-cat-filtros button:hover { background: var(--v-surface-2); filter: none; }
.k-cat-filtros button[aria-pressed="true"] { border-color: var(--v-ink); background: var(--v-ink); color: var(--v-surface); box-shadow: none; }
.k-cat-filtros button:focus-visible { outline: 3px solid var(--v-info); outline-offset: 2px; }
/* celular: cada linha é um cartão; o cabeçalho da tabela fica só para o leitor de tela */
.k-cat-tab { display: block; }
.k-cat-tab thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.k-cat-tab tbody { display: grid; grid-template-columns: minmax(0, 1fr); }
.k-cat-tab tr.linha { display: grid; gap: var(--v-space-2); padding: var(--v-space-4); border: 0; border-top: 1px solid var(--v-line); background: none; }
.k-cat-tab tr.linha:first-child { border-top: 0; }
.k-cat-tab tbody tr:hover { background: none; }
.k-cat-tab td { display: block; min-width: 0; padding: 0; border: 0; }
.k-cat-tab td:empty, .k-cat-tab .k-cat-col { display: none; }
.k-cat-tab .linha-titulo { overflow: visible; white-space: normal; overflow-wrap: anywhere; font: 700 var(--v-t-md)/1.3 var(--v-font-display); color: var(--v-ink); }
.k-cat-tab .linha-titulo .chip { margin-left: var(--v-space-1); vertical-align: middle; }
.k-cat-tab .linha-fraca { margin-top: 2px; font-size: var(--v-t-sm); color: var(--v-ink-3); overflow-wrap: anywhere; }
.k-cat-tab .comp-linhas { color: var(--v-ink-2); font-size: var(--v-t-sm); }
.k-cat-tab td.linha-acoes { display: flex; flex-wrap: wrap; gap: var(--v-space-2); margin: 0; }
.k-cat-tab td.linha-acoes:empty { display: none; }
.k-cat-tab .linha-acoes .btn { flex: 1 1 auto; margin: 0; }
.k-cat-tab .btn-sm { border-radius: var(--v-radius-ctl); }
@media (min-width: 1100px) {
    .k-cat-tab { display: table; }
    .k-cat-tab thead { position: static; width: auto; height: auto; overflow: visible; clip: auto; display: table-header-group; }
    .k-cat-tab tbody { display: table-row-group; }
    .k-cat-tab tr.linha { display: table-row; padding: 0; border: 0; }
    .k-cat-tab tbody tr:hover { background: var(--v-surface-2); }
    .k-cat-tab td, .k-cat-tab td:empty, .k-cat-tab .k-cat-col { display: table-cell; padding: var(--v-space-2) var(--v-space-4); border-bottom: 1px solid var(--v-line); vertical-align: middle; }
    .k-cat-tab tbody tr:last-child td { border-bottom: 0; }
    .k-cat-tab .k-cat-meta { display: none; }
    .k-cat-tab .linha-titulo { font: 700 var(--v-t-sm)/1.3 var(--v-font-body); }
    .k-cat-tab td.linha-corpo { min-width: 220px; padding-top: var(--v-space-3); padding-bottom: var(--v-space-3); }
    .k-cat-tab td.linha-acoes, .k-cat-tab td.linha-acoes:empty { display: table-cell; text-align: right; }
    .k-cat-tab td.linha-acoes > * { margin: 2px 0 2px var(--v-space-2); }
    .k-cat-tab .linha-acoes .btn { flex: none; }
    .k-cat-tab .est-item td.linha-acoes, .k-cat-tab .comp-ordem td.linha-acoes { min-width: 240px; }
}
/* ==== fim VIS7-CAT ==== */

/* ==== VIS7-CONF ==== */
/* Configurações em ABAS (decisão do usuário: abas, não página única), Equipe (senha provisória como hoje), Minha conta e Assinatura (só apresentação).
   Os painéis seguem com .config-grade (classe antiga); aqui viram UMA coluna, como no mock. hidden some pelo [hidden] global do app.css. */
.k-cfg .k-cfg-painel { grid-template-columns: minmax(0, 1fr); gap: var(--v-space-5); }
.k-cfg .k-cfg-painel .card-largo { grid-column: auto; }
.k-cfg .card-cabeca .k-dg-sub { margin-top: 2px; }
.k-cfg .form-acoes { gap: var(--v-space-2); margin-top: var(--v-space-2); }
.k-cfg .form-acoes .btn { margin: 0; }
/* rótulo com ou sem o ícone de ajuda (44 px) na mesma altura: os campos lado a lado ficam alinhados */
.k-cfg .form-group > .form-label { display: inline-flex; align-items: center; min-height: var(--v-alvo); margin: 0; }
/* a ação principal da aba que abre primeiro (Salvar dados comerciais) é a única amarela; as outras ficam contorno (regra comum do .k-dg) */
.k-cfg #btnSalvarCfg { border-color: transparent; background: var(--v-action); color: var(--v-action-ink); }
.k-cfg #btnSalvarCfg:hover { background: var(--v-action); filter: brightness(.96); }
.k-cfg .fin-linha { margin: 0 0 var(--v-space-3); padding: var(--v-space-3) var(--v-space-4); border: 1px solid var(--v-line); border-radius: 12px; }
.k-cfg .fin-linha legend { padding: 0 var(--v-space-1); font: 700 var(--v-t-sm)/1.3 var(--v-font-body); color: var(--v-ink); }
.k-cfg .check-linha { color: var(--v-ink-2); font-weight: 400; }
.k-cfg .check-linha input { accent-color: var(--v-action); }
.k-cfg .faixa-aviso { border-radius: 12px; background: var(--v-warn-bg); color: var(--v-ink); }
.k-cfg .faixa-aviso > .ic { color: var(--v-warn); }
.k-cfg .marcador { min-height: var(--v-alvo); border: 1px solid var(--v-line); background: var(--v-surface-2); color: var(--v-ink-2); }
/* Equipe: vagas, linhas como cartão no celular e como tabela a partir de 761 px; ações sempre à vista (44 px) */
.k-cfg .equipe-resumo { flex-wrap: wrap; gap: var(--v-space-2) var(--v-space-3); color: var(--v-ink-2); font-size: var(--v-t-sm); }
.k-cfg-vagas { inline-size: 120px; block-size: 8px; accent-color: var(--v-action); }
#cardEquipe .equipe-lista { display: grid; border-top: 1px solid var(--v-line); }
#cardEquipe .equipe-linha { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--v-space-2); padding: var(--v-space-3) 0; border-bottom: 1px solid var(--v-line); }
#cardEquipe .linha-titulo { font-weight: 700; color: var(--v-ink); }
#cardEquipe .linha-fraca { font-size: var(--v-t-sm); color: var(--v-ink-3); overflow-wrap: anywhere; }
#cardEquipe .btn-sm:not(.k-btn) { min-height: var(--v-alvo); padding: 0 var(--v-space-3); border: 1px solid var(--v-ink-3); border-radius: var(--v-radius-ctl); background: var(--v-surface); color: var(--v-ink); font: 700 var(--v-t-sm)/1.2 var(--v-font-body); }
#cardEquipe .btn-sm:not(.k-btn):hover { background: var(--v-surface-2); filter: none; }
#cardEquipe .btn-sm:focus-visible { outline: 3px solid var(--v-info); outline-offset: 2px; }
#cardEquipe .btn-sm.excluir { border-color: var(--v-err); color: var(--v-err); }
#cardEquipe .btn-sm.excluir:hover { background: var(--v-err-bg); }
#cardEquipe #btnAddMembro { min-height: var(--v-alvo); padding: 0 var(--v-space-4); font-size: var(--v-t-sm); }
.k-cfg-cargos { margin: var(--v-space-4) 0 0; padding: var(--v-space-3) var(--v-space-4); border-radius: 12px; background: var(--v-info-bg); color: var(--v-ink); }
/* Minha conta: códigos da 2 etapas e senha provisória com a linha tracejada do kit */
.k-cfg .senha-temp, .k-cfg .df-codigos code { border-color: var(--v-ink-3); background: var(--v-surface-2); color: var(--v-ink); }
/* Assinatura */
.k-assin .pagina-topo { margin: 0; }
.k-assin .k-dg-tit { font: 800 var(--v-t-xl)/1.15 var(--v-font-display); letter-spacing: -.02em; }
.k-assin .k-dg-sub { font-size: var(--v-t-sm); color: var(--v-ink-2); }
.k-assin .assin-grade > div { display: grid; gap: var(--v-space-5); align-content: start; }
.k-assin .assin-preco { margin: var(--v-space-2) 0 var(--v-space-3); font: 800 var(--v-t-2xl)/1.1 var(--v-font-display); letter-spacing: -.02em; color: var(--v-ink); }
.k-assin .assin-preco span { font: 500 var(--v-t-sm)/1 var(--v-font-body); color: var(--v-ink-3); }
.k-assin .assin-ajuda { color: var(--v-ink-2); }
.k-assin .assin-linha { border-top-color: var(--v-line); }
.k-assin .assin-linha dt { color: var(--v-ink-2); }
.k-assin .assin-linha dd { color: var(--v-ink); }
.k-assin #btnAssinar { width: 100%; margin-top: var(--v-space-3); }
.k-assin #btnCancelarAssin { min-height: var(--v-alvo); border-color: var(--v-err); background: var(--v-surface); color: var(--v-err); }
.k-assin-seguro { margin: var(--v-space-3) 0 0; font-size: var(--v-t-sm); color: var(--v-ink-3); }
.k-assin-legenda { margin-top: var(--v-space-4); border: 1px solid var(--v-line); border-radius: var(--v-radius-ctl); }
.k-assin-legenda summary { display: flex; align-items: center; min-height: var(--v-alvo); padding: 0 var(--v-space-4); font-weight: 700; font-size: var(--v-t-sm); color: var(--v-ink); cursor: pointer; }
.k-assin-legenda summary:focus-visible { outline: 3px solid var(--v-info); outline-offset: 2px; }
.k-assin-legenda ul { display: grid; gap: var(--v-space-2); margin: 0; padding: 0 var(--v-space-4) var(--v-space-4); list-style: none; font-size: var(--v-t-sm); color: var(--v-ink-2); }
.k-assin-legenda li .k-dg-chip { margin-right: var(--v-space-2); }

@media (min-width: 761px) {
    .k-assin .k-dg-tit { font-size: var(--v-t-2xl); }
    #cardEquipe .equipe-linha { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; align-items: center; gap: var(--v-space-4); }
    #cardEquipe .equipe-linha .linha-acoes { justify-content: flex-end; }
}
@media (min-width: 1100px) {
    .k-cfg #formConfigEmpresa .form-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* ==== fim VIS7-CONF ==== */