/* Aba 🎟️ Qbank e consultoria — complementa styles.css, com as MESMAS variáveis de tema. * * Só o que é próprio da aba. O que já existe é reusado como está: `.panel`, `.chip-btn` * (inclusive o `.ativo` de contratos.css), `.f`, `.tablewrap`, `.field`, `.newlead-btn`, * `.muted`, `.hint` e a barra de filtros `.ct-barra`. * * ⚠️ NADA DE LAYOUT MOBILE AQUI. A camada public/mobile/ é a dona disso: a tabela vira * cartão sozinha porque cada tem `data-lab` (opt-in `:has(td[data-lab])` em * mobile/30-cartao.css) e a célula de ações tem a classe própria `.qb-acoes`. */ /* Os cartões de indicador. Mesma gramática do `.nf-resumo` das Vendas (styles.css:659) — repetida em vez de reusada porque aqui um deles tem uma nota em e a classe `.alerta` acende por número, não por tipo de dado. */ .qb-cartoes { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 14px } .qb-cartoes > div, .qb-cartoes > .qb-cartao { flex: 1 1 130px; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; background: var(--surface-2) } /* Os cartões que abrem a lista por trás do número são BOTÕES (teclado e leitor de tela), com a cara dos outros. Aceso = é o filtro à vista. */ .qb-cartoes > .qb-cartao { font: inherit; color: inherit; text-align: left; cursor: pointer } .qb-cartoes > .qb-cartao:hover { border-color: var(--border-strong) } .qb-cartoes > .qb-cartao.ativo { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset } .qb-cartoes b { display: block; font-size: 18px; line-height: 1.2 } .qb-cartoes span { font-size: 11.5px; color: var(--muted) } .qb-cartoes span small { display: block; color: var(--muted-2); font-size: 10.5px } /* Acende só quando o número é diferente de zero: cartão âmbar com "0" treina a pessoa a ignorar a cor, que é justamente o único aviso que este módulo tem. */ .qb-cartoes .alerta { border-color: var(--amber); background: var(--amber-soft) } .qb-cartoes .alerta b { color: var(--amber) } .qb-vazio { padding: 18px 4px } .qb-lista td { vertical-align: top } .qb-sub { font-size: 11.5px; line-height: 1.45; display: inline-block } /* ⚠️ SEM `min-width` na faixa de ações (o `.ct-acoes{min-width:230px}` de contratos.css obrigou mobile/30-cartao.css a desfazê-lo com um seletor só para isso, porque fora de media query ele ainda valia na banda 641–780px). */ .qb-acoes .chip-btn { margin: 0 2px 5px 0 } tr.qb-novo > td { background: var(--accent-soft) } /* O selo do status do Qbank. `liberar` é o único que pede ação HOJE, então é o único com preenchimento; `aguardando` só tem borda (é espera, não trabalho); `sem_qbank` é cinza porque é PLANO, não pendência — e é a maioria (98 de 112). */ .qb-st { display: inline-block; border-radius: 999px; padding: 3px 9px; font-size: 11.5px; font-weight: 600; white-space: nowrap; border: 1px solid var(--border); color: var(--muted) } .qb-st.liberar { color: var(--accent-text); border-color: var(--accent); background: var(--accent-soft) } .qb-st.aguardando { color: var(--amber); border-color: currentColor } .qb-st.entregue { color: var(--green); border-color: currentColor } .qb-st.sem_qbank { color: var(--muted); border-color: var(--border) } .qb-selo { display: inline-block; border-radius: 999px; padding: 2px 8px; font-size: 11px; font-weight: 600; white-space: nowrap; border: 1px solid currentColor } /* Venda cancelada NÃO sai da fila e NÃO é apagada por automação (decisão do dono): o selo é o aviso, e quem decide é ele. Por isso ele grita — mas não some com a linha. */ .qb-selo.cancelada { color: var(--rose) } .qb-selo.adiado { color: var(--muted); border-color: var(--border); background: var(--surface-2) } /* Os 3 estados da consultoria como botões. O aceso usa o mesmo par accent de `.chip-btn.ativo` (contratos.css) — mas escrito aqui porque estes convivem lado a lado e o não-aceso precisa parecer clicável, não desabilitado. */ .qb-cs { font-size: 11.5px; padding: 3px 9px; margin: 0 2px 4px 0 } .qb-cs.ativo { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-text); font-weight: 600 } .chip-btn.qb-destaque { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-text); font-weight: 600 } .chip-btn.qb-apagar { color: var(--rose) } .chip-btn.qb-apagar:hover { border-color: var(--rose) } /* O plano (Step 1/2/3) ao lado do status: é o que diz QUAL Qbank entregar. */ .qb-selo.plano { color: var(--accent-text); border-color: var(--border); background: var(--surface) } /* Notas clicáveis na linha: parecem texto, abrem o painel. Botão de verdade (teclado e leitor de tela), com a aparência de anotação — sem borda, quebrando linha como o texto que é. */ .qb-nota, .qb-link { all: unset; cursor: pointer; font-size: 11.5px; line-height: 1.45; color: var(--muted); white-space: normal; overflow-wrap: anywhere } .qb-nota:hover, .qb-link:hover, .qb-nota:focus-visible, .qb-link:focus-visible { color: var(--text); text-decoration: underline } .qb-link { color: var(--accent-text) } /* ⚠️ O CHAMADO PARA REGISTRAR com quem e quando: âmbar, porque é o único jeito de o campo opcional ser preenchido de verdade (pedido do dono). Só aparece na consultoria marcada feita no CRM. */ .chip-btn.qb-registrar { border-color: var(--amber); background: var(--amber-soft); color: var(--amber); font-weight: 600; margin-top: 4px } .chip-btn.qb-chip-registro:not(.ativo) { border-color: var(--amber); color: var(--amber) } /* ── o painel de notas e detalhes, dentro da linha ── */ tr.qb-painel > td { background: var(--surface-2); border-top: 0; padding: 12px 14px 14px } /* De quem é o painel: no celular o cartão do aluno pode estar rolado para fora da tela. */ .qb-painel-quem { margin: 0 0 10px; font-weight: 700; font-size: 13.5px; overflow-wrap: anywhere } .qb-painel-quem .muted { font-weight: 500; font-size: 12px; margin-left: 4px } .qb-painel-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px } .qb-painel-bloco { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; background: var(--surface) } .qb-painel-bloco h4 { margin: 0 0 8px; font-size: 13px } .qb-painel-bloco h4 small { font-weight: 500; color: var(--muted); margin-left: 4px } .qb-painel-bloco .field { margin: 0 0 8px; display: block } .qb-painel-bloco .field > span { display: block; font-size: 11.5px; font-weight: 700; color: var(--muted); margin-bottom: 4px } .qb-painel-bloco .field > span small { font-weight: 500; color: var(--muted-2); margin-left: 4px } .qb-painel-bloco input:not([type="checkbox"]), .qb-painel-bloco select, .qb-painel-bloco textarea { width: 100%; box-sizing: border-box } .qb-check { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 10px; font-size: 13px; cursor: pointer } .qb-check small { display: block; color: var(--muted); font-size: 11px } /* A caixa em tamanho de dedo: o rótulo inteiro já é clicável, mas a caixa de 13px do navegador some no celular. */ .qb-check input[type="checkbox"] { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--accent) } .qb-check.desligado { opacity: .55; cursor: default } /* O campo opcional VAZIO chama atenção — a borda âmbar some assim que alguém escreve. */ .qb-incentivo.vazio input { border-color: var(--amber); background: var(--amber-soft) } .qb-incentivo.vazio > span { color: var(--amber) } .qb-sugestao { margin: -4px 0 8px; font-size: 11.5px } tr.qb-painel .qb-botoes { margin-top: 10px } /* ── formulário ── */ .qb-form { margin-bottom: 16px } .qb-form h3 { gap: 10px; flex-wrap: wrap } .qb-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px } .qb-grade .field { margin: 0 } .qb-grade .qb-largo { grid-column: span 2 } /* O `.field` da casa põe o rótulo em