/* * Ajustes do BitCRM sobre o CSS do Gentelella. * * Carregado depois do bundle do template, para sobrepor sem editá-lo — o * arquivo do template é asset de terceiro e some na próxima atualização do * pacote (ver docs/02-template.md). */ /* --------------------------------------------------------------------------- * Respiro entre cards empilhados * * O template dá margem a `.alert` (12px), `.page-header` (20px) e `.row` (16px), * mas **não a `.card`**: nas páginas de demonstração todo card mora dentro de * uma `.row`, e é o `gap` do grid que separa. Cards empilhados direto no fluxo * — como nas telas de catálogo e de perfis — ficavam encostados. * ------------------------------------------------------------------------- */ .card { margin-bottom: var(--space-5, 24px); } /* Dentro de uma .row quem espaça é o gap do grid; a margem aqui só aumentaria a altura da linha. */ .row > .card, .row > * > .card:last-child { margin-bottom: 0; } /* --------------------------------------------------------------------------- * Abas das páginas de detalhe (componentes `x-abas` / `x-aba`) * * A regra do `:not([data-pronto])` evita o piscar: os scripts carregam no fim do * `body`, então sem ela os painéis apareceriam todos por um instante antes de o * script esconder os inativos. Ela depende do `data-js` que o layout marca no * `` — com JavaScript desligado nada é escondido, e a página volta a ser * a pilha de cards que sempre foi. * ------------------------------------------------------------------------- */ html[data-js] .abas:not([data-pronto]) > .abas__painel:not(:first-of-type) { display: none; } .abas__nav { display: flex; flex-wrap: wrap; gap: var(--space-1, 4px); margin-bottom: var(--space-5, 24px); border-bottom: 1px solid var(--border-color, #e6e7eb); } .abas__aba { display: inline-flex; align-items: center; gap: var(--space-2, 8px); padding: var(--space-3, 12px) var(--space-4, 16px); border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; color: var(--text-muted, #7e8896); font: inherit; font-weight: 500; line-height: 1.2; cursor: pointer; white-space: nowrap; } .abas__aba:hover { color: var(--text-color, inherit); } /* Sub-abas (a aba "Instalações" do cliente, RF-3.25). Em pílula e menores, sem a linha de baixo: duas barras de abas com o mesmo desenho, uma dentro da outra, não deixam claro qual está dentro de qual — e quem clica na de baixo achando que é a de cima some da página. */ .abas--internas > .abas__nav { border-bottom: 0; margin-bottom: var(--space-4, 16px); gap: var(--space-2, 8px); } .abas--internas > .abas__nav > .abas__aba { padding: var(--space-2, 6px) var(--space-3, 12px); border: 1px solid var(--border-color, #e6e7eb); border-radius: 999px; margin-bottom: 0; font-size: 13px; } .abas--internas > .abas__nav > .abas__aba.is-ativa { border-color: var(--primary, #1abb9c); background: color-mix(in srgb, var(--primary, #1abb9c) 12%, transparent); } /* O código de ativação: grande e em fonte de largura fixa, porque é ditado por telefone — "é 8 ou B?" é a pergunta que o desenho precisa evitar. */ .codigo-ativacao { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3, 12px); margin-bottom: var(--space-3, 12px); } .codigo-ativacao__valor { font-size: 28px; font-weight: 700; letter-spacing: 0.12em; padding: var(--space-2, 8px) var(--space-4, 16px); border: 1px dashed var(--border-color, #e6e7eb); border-radius: var(--radius-2, 4px); user-select: all; } .abas__aba.is-ativa { color: var(--primary, #1abb9c); border-bottom-color: var(--primary, #1abb9c); } /* O foco precisa aparecer: a navegação por seta entre abas é o caminho de teclado, e sem anel visível ele fica cego. */ .abas__aba:focus-visible { outline: 2px solid var(--primary, #1abb9c); outline-offset: -2px; border-radius: var(--radius-2, 4px); } /* Contador no rótulo — devolve o faro que a aba tirou. */ .abas__contador { padding: 1px var(--space-2, 8px); border-radius: 999px; background: var(--bg-surface-secondary, #f9fafb); border: 1px solid var(--border-color-light, #eff0f3); font-size: 12px; font-variant-numeric: tabular-nums; color: var(--text-muted, #7e8896); } .abas__aba.is-ativa .abas__contador { background: var(--primary-lt, #1abb9c0f); border-color: transparent; color: var(--primary-dk, #169f85); } /* O painel não recebe anel de foco: ele só é focável para que a seta do teclado chegue ao conteúdo, e a moldura ali não indicaria nada acionável. */ .abas__painel:focus { outline: none; } /* Papel impresso não tem aba para clicar: imprime tudo, na ordem. */ @media print { .abas__nav { display: none; } .abas__painel[hidden] { display: block !important; } } /* --------------------------------------------------------------------------- * Sanfona (`x-sanfona`) — card que abre e fecha * * `
` nativo, então o estado, o teclado e a busca do navegador já vêm * prontos. O que falta é só parecer um card do template. * ------------------------------------------------------------------------- */ .sanfona__cabecalho { display: flex; align-items: center; gap: var(--space-3, 12px); padding: var(--space-4, 16px) var(--space-5, 24px); cursor: pointer; list-style: none; user-select: none; } /* O triângulo padrão do WebKit ignora `list-style` — precisa deste pseudo. */ .sanfona__cabecalho::-webkit-details-marker { display: none; } .sanfona__cabecalho:hover { background: var(--bg-surface-secondary, #f9fafb); } .sanfona__cabecalho:focus-visible { outline: 2px solid var(--primary, #1abb9c); outline-offset: -2px; } .sanfona__seta { width: 0; height: 0; border-left: 5px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent; color: var(--text-muted, #7e8896); transition: transform .12s ease; } .sanfona[open] .sanfona__seta { transform: rotate(90deg); } .sanfona[open] .sanfona__cabecalho { border-bottom: 1px solid var(--border-color-light, #eff0f3); } /* Fechada, a sanfona é uma linha: o corpo não deve deixar respiro sobrando. */ .sanfona .card-body { padding-top: var(--space-4, 16px); } /* No papel não há o que clicar: sai tudo aberto. */ @media print { .sanfona__seta { display: none; } .sanfona:not([open]) .card-body { display: block !important; } } .sanfona__opcoes { display: flex; align-items: center; gap: var(--space-2, 8px); margin-left: auto; } /* Em tela estreita a barra de abas rola na horizontal em vez de quebrar em várias linhas: cinco abas empilhadas empurrariam o conteúdo para fora da primeira tela, que é o oposto do que as abas vieram resolver. */ @media (max-width: 767px) { .abas__nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .abas__nav::-webkit-scrollbar { display: none; } } /* --------------------------------------------------------------------------- * Checklist das etapas de implantação * * A marcação é feita por `js/checklist.js`, sem recarregar a página. O que fica * aqui é só a linha: caixa, texto e a linha de "quando/quem", que existe mesmo * vazia porque é onde o script escreve. * ------------------------------------------------------------------------- */ .checklist__item { display: flex; align-items: flex-start; gap: var(--space-3, 12px); padding: var(--space-2, 8px) 0; } .checklist__caixa { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--primary, #1abb9c); cursor: pointer; flex: none; } .checklist__caixa:disabled { cursor: default; } .checklist__texto { flex: 1; } /* Vazia, a linha de "marcado em / por quem" não deve abrir espaço. */ .checklist__texto [data-checklist-quando]:empty { display: none; } /* --------------------------------------------------------------------------- * Quadro do funil de oportunidades * * As classes `kanban-*` vêm do Gentelella — coluna, cartão, estados de arrasto * e soltura já estão lá. O que falta é o que os quadros do BitCRM têm a mais: o * cartão é um link (o template usa `
`) e o cabeçalho da coluna carrega um * resumo — a mensalidade prevista no funil, o SLA em risco na fila de chamados. * ------------------------------------------------------------------------- */ a.kanban-card { display: block; color: inherit; text-decoration: none; } /* O foco precisa aparecer: com o cartão focado, ← e → movem de coluna, e sem anel visível ninguém descobre que está com um cartão na mão. */ a.kanban-card:focus-visible { outline: 2px solid var(--primary, #1abb9c); outline-offset: 2px; } .kanban-column-resumo { margin-left: auto; font-size: 11px; font-variant-numeric: tabular-nums; color: var(--text-muted, #7e8896); white-space: nowrap; } /* Enquanto o cartão está no ar, a coluna de origem não deve parecer um alvo. */ .kanban-column-body:has(.dragging) { outline: none; } @media print { .kanban-board { overflow: visible; } } /* Quatro colunas que ocupam a largura disponível e encolhem até 220px antes de rolar. O template fixa 260–320px, o que sobra rolagem horizontal já em tela de 1280 — e o funil inteiro cabendo de uma vez é metade do valor do quadro. */ .kanban-board { grid-template-columns: repeat(4, minmax(220px, 1fr)); } /* Coluna vazia diz que está vazia — e continua sendo alvo de soltura. O `:has` faz isso sozinho: some no instante em que um cartão é solto ali, sem o script ter de lembrar de esconder um aviso. O texto vem do `data-vazio` porque cada quadro tem o seu: "nenhuma oportunidade" numa coluna de chamados seria o tipo de descuido que ninguém percebe até um cliente ver. */ .kanban-column-body[data-vazio]:not(:has([data-kanban-cartao]))::after { content: attr(data-vazio); display: block; padding: 16px 8px; text-align: center; font-size: 12px; color: var(--text-muted, #7e8896); } /* Alternador entre lista e quadro. Dois links, não abas: cada vista é um endereço, então dá para mandar o link da vista certa para um colega. */ .vista-alternador { display: flex; gap: var(--space-2, 8px); margin-bottom: var(--space-4, 16px); } /* --------------------------------------------------------------------------- * Cadastro de etiquetas * * A cor é escolhida por amostra, não por nome numa lista: "amarelo" em texto não * diz como a etiqueta vai ficar no cartão. * ------------------------------------------------------------------------- */ .etiqueta-cores, .etiqueta-modulos { display: flex; flex-wrap: wrap; gap: var(--space-3, 12px); align-items: center; } .etiqueta-cor { display: inline-flex; align-items: center; gap: var(--space-2, 8px); cursor: pointer; } .etiqueta-cor input { accent-color: var(--primary, #1abb9c); } /* As etiquetas do cartão herdam `.kanban-card-labels` do template; fora do quadro (telas de detalhe e listagens) precisam do mesmo respiro. */ .etiquetas-do-registro { display: flex; flex-wrap: wrap; gap: var(--space-1, 4px); align-items: center; } /* Memorando: texto longo digitado pelo operador, com as quebras de linha que ele escreveu. `pre` porque a quebra é informação — um passo a passo de VPN colado em parágrafo único vira ilegível —, mas com quebra automática, senão uma linha comprida rola a página inteira para o lado. */ .memo { margin: 0 0 12px; padding: 12px; border-radius: var(--radius, 6px); background: var(--bg-surface-secondary, #f9fafb); border: 1px solid var(--border-color-light, #eff0f3); font: inherit; white-space: pre-wrap; word-break: break-word; } /* Bloco de etapa no formulário de nova implantação: uma moldura leve para separar uma etapa da seguinte sem transformar o formulário numa pilha de cards dentro de um card. */ .etapa-bloco { margin: 0 0 var(--space-4, 16px); padding: var(--space-4, 16px); border: 1px solid var(--border-color-light, #eff0f3); border-radius: var(--radius, 6px); } .etapa-bloco:last-child { margin-bottom: 0; } /* --------------------------------------------------------------------------- * Calendário da agenda de treinamento * * Grade de sete colunas, um cartão por sessão. O template não traz calendário * usável (o `calendar-*.js` dele é uma demonstração com dados fixos), então a * grade é nossa — mas os tokens de cor e espaçamento são os dele. * ------------------------------------------------------------------------- */ .calendario-navegacao { display: flex; align-items: center; gap: var(--space-3, 12px); margin-bottom: var(--space-4, 16px); } .calendario-mes { font-size: 15px; } .calendario { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--border-color, #e6e7eb); border: 1px solid var(--border-color, #e6e7eb); border-radius: var(--radius, 6px); overflow: hidden; } .calendario__cabecalho { padding: var(--space-2, 8px); background: var(--bg-surface-secondary, #f9fafb); text-align: center; font-size: 12px; font-weight: 600; color: var(--text-muted, #7e8896); } .calendario__dia { min-height: 96px; padding: var(--space-2, 8px); background: var(--bg-surface, #fff); transition: background .1s; } /* Dia de outro mês fica apagado, não em branco: uma grade que começa com buracos faz o dia 1º parecer estar na coluna errada. */ .calendario__dia--fora { background: var(--bg-surface-secondary, #f9fafb); } .calendario__dia--fora .calendario__numero { opacity: .45; } .calendario__dia--hoje .calendario__numero { color: var(--primary, #1abb9c); font-weight: 700; } .calendario__dia.drop-target { background: var(--primary-lt, #1abb9c0f); outline: 2px dashed var(--primary, #1abb9c); outline-offset: -3px; } .calendario__numero { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--text-muted, #7e8896); margin-bottom: 4px; } .calendario__sessao { display: block; margin-bottom: 4px; padding: 4px 6px; border-radius: var(--radius-sm, 4px); border-left: 3px solid var(--blue, #066fd1); background: var(--bg-surface-secondary, #f9fafb); color: inherit; text-decoration: none; font-size: 11.5px; line-height: 1.35; cursor: grab; } .calendario__sessao:hover { border-color: var(--primary, #1abb9c); } .calendario__sessao:focus-visible { outline: 2px solid var(--primary, #1abb9c); outline-offset: 1px; } .calendario__sessao.dragging { opacity: .5; cursor: grabbing; } /* Realizada e cancelada não se arrastam — e a borda diz isso antes da tentativa. */ .calendario__sessao--realizado { border-left-color: var(--green, #2fb344); cursor: default; } .calendario__sessao--cancelado { border-left-color: var(--red, #d63939); cursor: default; text-decoration: line-through; opacity: .6; } .calendario__hora { font-variant-numeric: tabular-nums; font-weight: 600; margin-right: 4px; } .calendario__duracao { display: block; color: var(--text-muted, #7e8896); } /* Em tela estreita a grade de sete colunas vira ilegível; o calendário rola na horizontal em vez de espremer sete dias em 375px. */ @media (max-width: 767px) { .calendario { min-width: 640px; } .calendario-envolucro { overflow-x: auto; } } /* --------------------------------------------------------------------------- * Modal de cadastro (`x-modal`) * * `` nativo. O UA já dá o backdrop e o `display:none` quando fechado; o * que falta é a aparência de card do template e o comportamento sem JavaScript. * ------------------------------------------------------------------------- */ .modal { /* `margin: auto` explícito: o reset do template zera a margem de tudo, e sem isto o diálogo encosta no canto superior esquerdo em vez de centrar. */ margin: auto; width: min(720px, calc(100vw - 32px)); max-height: calc(100vh - 64px); padding: 0; border: 1px solid var(--border-color, #e6e7eb); border-radius: var(--radius-lg, 10px); background: var(--bg-surface, #fff); color: var(--text, inherit); overflow: auto; } .modal::backdrop { background: #0f172a99; } .modal__cabecalho { display: flex; align-items: flex-start; gap: var(--space-4, 16px); padding: var(--space-4, 16px) var(--space-5, 24px); border-bottom: 1px solid var(--border-color-light, #eff0f3); position: sticky; top: 0; background: var(--bg-surface, #fff); z-index: 1; } .modal__titulo { margin: 0; font-size: 15px; font-weight: 600; } .modal__subtitulo { margin: 4px 0 0; font-size: 12.5px; color: var(--text-muted, #7e8896); } .modal__fechar { margin-left: auto; padding: 4px; border: 0; border-radius: var(--radius-sm, 4px); background: none; color: var(--text-muted, #7e8896); cursor: pointer; line-height: 0; } .modal__fechar:hover { background: var(--bg-surface-secondary, #f9fafb); color: var(--text, inherit); } .modal__corpo { padding: var(--space-5, 24px); } /* Sem JavaScript o link para a âncora abre o diálogo no fluxo da página: sem sobreposição, mas com o formulário inteiro utilizável. */ .modal:target { display: block; position: static; margin: var(--space-5, 24px) 0; max-width: none; width: auto; } /* Botão só de ícone, para as ações de linha da listagem. */ .btn-icone { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 5px 7px; line-height: 0; } .acoes-da-linha { display: flex; align-items: center; gap: 4px; justify-content: flex-end; } /* Ação que pertence ao painel inteiro, não a um card dele — como "acrescentar etapa" na aba de etapas da implantação. */ .acoes-do-painel { margin: 0 0 var(--space-4, 16px); } /* Barra de filtros: quantos campos couberem, cada um com no mínimo 180px. Uma `col-3` fixa espremia cinco filtros em três colunas e quebrava o rótulo. */ .row.filtros { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } /* Campo de senha: o input ocupa o que sobra, os botões ficam do lado direito e não encolhem — botão de revelar espremido a dois pixels não é clicável. */ .campo-senha__linha { display: flex; align-items: center; gap: 6px; } .campo-senha__linha .form-control { flex: 1 1 auto; min-width: 0; } .campo-senha__linha .btn { flex: 0 0 auto; } /* Senha revelada vira monoespaçada: é para ser lida caractere a caractere, e é na fonte proporcional que `l`, `1` e `I` viram a mesma coisa. */ .campo-senha__linha .form-control[type='text'] { font-family: var(--font-mono, ui-monospace, 'SFMono-Regular', 'Consolas', monospace); letter-spacing: 0.04em; } /* --------------------------------------------------------------------------- * Contraste do tema claro * * O fundo do template (`#f5f7fb`) fica a três pontos do branco dos cards: a * borda existe, mas o **card não se destaca do papel** — a página lê como uma * superfície só, e quem passa os olhos não separa um card do outro sem procurar * a linha entre eles. * * Os tokens vão em `[data-theme='light']`, e não em `:root`. O tema é sempre * escrito no `` pelo script do layout, e `:root` aqui teria a mesma * especificidade de `[data-theme=dark]` do template — como este arquivo carrega * depois, um `:root` venceria também no escuro e levaria junto o tema que está * certo. * ------------------------------------------------------------------------- */ [data-theme='light'] { --body-bg: #e9edf4; } /* --------------------------------------------------------------------------- * Duas cores a mais para o selo de situação * * O template desenha `.status-` só em azul, verde, amarelo e vermelho — as * quatro da convenção de `docs/04-componentes.md`. O cadastro de status dos * quadros oferece também verde-água e roxo, que já eram usados pelos `x-stat`; * sem estas duas regras o selo sairia com a cor do texto comum, e a escolha da * tela não apareceria. * ------------------------------------------------------------------------- */ .status-teal { color: var(--primary); } .status-purple { color: var(--purple); } /* --------------------------------------------------------------------------- * Lista com caixas de seleção * * A linha do "marcar todos" fica grudada no topo enquanto se rola a lista: numa * lista de duzentos clientes, o atalho que exige rolar de volta ao topo não é * atalho. O contador vai à direita, onde o olho volta depois de marcar. * ------------------------------------------------------------------------- */ .selecao-topo { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 8px; padding: 10px 12px; margin-bottom: 4px; background: var(--bg-surface-secondary); border: 1px solid var(--border-color); border-radius: var(--radius, 6px); } .selecao-topo [data-selecao-contador] { margin-left: auto; font-size: 12px; } /* --------------------------------------------------------------------------- * Botões da faixa de filtros * * Numa barra de filtros o botão é um controle como os outros: ele pertence à * linha dos campos, não ao fundo da faixa. Duas coisas o tiravam de lá: * * - **O rótulo.** Os campos têm rótulo em cima; os botões não tinham, e subiam * a altura de um. O `align-self:end` mascarava isso alinhando pela base — * até um vizinho ganhar texto de ajuda, que estica a faixa e empurra os * botões para baixo da linha dos campos. A correção é um rótulo vazio, que * reserva o mesmo espaço e não depende de ninguém. * * - **A altura.** O `.btn` tem 32px e o `.form-control`, 36px. Alinhados pela * base, sobra a diferença no topo e o olho enxerga o degrau. Na faixa de * filtros o botão passa a ter a altura do campo. * ------------------------------------------------------------------------- */ .row.filtros > .filtros-acoes { align-self: start; } /* Reserva a altura exata do rótulo dos vizinhos, seja qual for a fonte. */ .row.filtros > .filtros-acoes > .form-label::after { content: '\00a0'; } .filtros-acoes__botoes { display: flex; align-items: center; gap: 8px; } .row.filtros > .filtros-acoes .btn { height: 36px; } /* --------------------------------------------------------------------------- * Etapas da implantação * * O título da etapa carrega situação, responsável e prazo. O bloco de texto vai * mais discreto que os selos: são três informações na mesma linha, e todas com o * mesmo peso viram uma parede. * ------------------------------------------------------------------------- */ .etapa-meta { color: var(--text-muted); font-size: 11.5px; white-space: nowrap; } /* Uma linha por item na edição do checklist: o texto ocupa o que sobra e as duas caixas ficam à direita, alinhadas ao campo. */ .checklist-edicao { display: flex; align-items: flex-end; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--border-color-light); } .checklist-edicao .form-group { flex: 1 1 auto; margin-bottom: 0; min-width: 0; } .checklist-edicao .form-check { flex: 0 0 auto; padding-bottom: 8px; white-space: nowrap; } /* Uma etapa dentro do modelo de roteiro (RF-6.11). Não usa `.checklist-edicao`: lá cada linha é um texto curto e duas caixas, e cabe numa linha só. Aqui a etapa tem nome, um checklist de várias linhas e ordem — espremidos lado a lado, o campo do checklist ficava com dois dedos de largura para receber seis itens. Então empilha: nome, checklist, e uma última linha com o que é curto. */ .etapa-modelo { padding: 14px 0; border-bottom: 1px solid var(--border-color-light); } .etapa-modelo .form-group { margin-bottom: 10px; } .etapa-modelo__rodape { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; } .etapa-modelo__rodape .form-group { flex: 0 0 110px; margin-bottom: 0; } .etapa-modelo__rodape .form-check { flex: 0 0 auto; padding-bottom: 8px; white-space: nowrap; } /* Linha de ações no rodapé de um modal: a principal à esquerda, a destrutiva na ponta oposta. Colada no botão principal, a ação que não se desfaz vira clique errado. */ .modal__acoes { display: flex; align-items: center; justify-content: space-between; gap: 12px; } /* --- Colunas do quadro ---------------------------------------------------- */ /* A coluna precisa se destacar do fundo da página **e** dos cartões, que ficam dentro dela. São três superfícies empilhadas, e o tema traz duas quase iguais: no claro, o fundo da página é #f5f7fb e a coluna vinha #f9fafb — mais clara que o próprio fundo, o que apagava o limite de onde uma lista termina e a outra começa. No escuro a distância existia, mas era pequena demais para a borda aparecer. A regra aqui é a mesma nos dois temas: **a coluna afunda, o cartão sobe**. No claro a coluna fica mais cinza que a página e o cartão continua branco; no escuro a coluna fica mais escura que a página e o cartão, mais claro. Nos dois casos são três níveis distintos, e o cartão é sempre o que está por cima — que é o objeto que se pega e se arrasta. A borda fecha o contorno para quem está com um cartão na mão e precisa ver onde soltar. */ /* O tom claro estava a **um ponto** do fundo da página (`#e9edf4` contra `#e8ecf4`): a raia existia no código e não na tela, e o quadro lia como uma faixa contínua. Vinte e dois pontos separam a coluna do papel a um relance, sem escurecer a ponto de a coluna competir com o cartão branco. */ :root { --kanban-coluna: #d3dcea; --kanban-coluna-borda: #bdc9db; } [data-theme="dark"] { --kanban-coluna: #0a1019; --kanban-coluna-borda: rgba(255, 255, 255, 0.07); } .kanban-column { background: var(--kanban-coluna); border: 1px solid var(--kanban-coluna-borda); } /* O contador herdava o fundo branco do tema e sumia sobre a coluna clara. */ .kanban-column-head .count { background: var(--bg-surface); border: 1px solid var(--kanban-coluna-borda); } /* Grupo, prazo e responsável no mesmo rodapé: em coluna estreita eles precisam quebrar de linha em vez de espremer as palavras uma letra por linha. */ .kanban-card-foot { flex-wrap: wrap; row-gap: 4px; } .kanban-card-meta { flex-wrap: wrap; row-gap: 2px; } /* --- Imagens do catálogo e da marca --------------------------------------- */ .logomarca-previa { display: inline-flex; align-items: center; justify-content: center; padding: 8px 12px; border: 1px solid var(--border-color-light); border-radius: var(--radius-lg, 8px); background: var(--bg-surface); } .logomarca-previa img { max-height: 56px; max-width: 200px; object-fit: contain; } /* A galeria de imagens do plano: cada item é a imagem com os campos dela. */ .galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 24px; } .galeria__item { border: 1px solid var(--border-color-light); border-radius: var(--radius-lg, 8px); padding: 12px; background: var(--bg-surface); } .galeria__item img { width: 100%; height: 160px; object-fit: contain; background: var(--bg-surface-secondary); border-radius: 4px; margin-bottom: 12px; } .galeria__acoes { display: flex; align-items: center; justify-content: space-between; gap: 8px; } /* * Busca de telas no cabecalho. * * A lista flutua sobre o conteudo, ancorada na caixa de busca. `position: * relative` vai na caixa, e nao no cabecalho inteiro, para a lista acompanhar o * campo quando a largura muda. */ .busca-telas { position: relative; width: 240px; } .busca-telas input { width: 100%; height: 32px; padding: 0 10px 0 32px; font: inherit; font-size: 13px; color: var(--text); background: var(--body-bg); border: 1px solid var(--border-color); border-radius: var(--radius); outline: none; } .busca-telas input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-lt); } .busca-telas .s-icon { position: absolute; top: 50%; left: 9px; width: 14px; height: 14px; color: var(--text-muted); transform: translateY(-50%); } .busca-telas kbd { position: absolute; top: 50%; right: 6px; padding: 0 5px; font-family: inherit; font-size: 10px; line-height: 18px; color: var(--text-muted); background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: 3px; transform: translateY(-50%); } .paleta-resultados { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60; margin: 0; padding: 4px; list-style: none; background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-lg, 8px); box-shadow: 0 12px 32px rgba(0, 0, 0, .18); max-height: 60vh; overflow-y: auto; } .paleta-resultados li { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 6px; cursor: pointer; } .paleta-resultados li.is-selecionado { background: var(--bg-surface-secondary); } .paleta-titulo { font-weight: 500; } .paleta-caminho, .paleta-vazio { font-size: 11px; color: var(--text-secondary); } .paleta-vazio { padding: 10px; cursor: default; } /* Menu da conta: duas opcoes, ancoradas no avatar do cabecalho. */ .tb-conta-wrapper { position: relative; } .tb-conta { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border-color); background: var(--accent-color, #1abb9c); color: #fff; font: inherit; font-weight: 600; cursor: pointer; } .tb-conta-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; min-width: 220px; padding: 6px; background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-lg, 8px); box-shadow: 0 12px 32px rgba(0, 0, 0, .18); } .tb-conta-menu__cabecalho { padding: 8px 10px 10px; border-bottom: 1px solid var(--border-color-light); margin-bottom: 4px; font-size: 12px; } .tb-conta-menu__item { display: block; width: 100%; padding: 8px 10px; border: 0; border-radius: 6px; background: none; color: inherit; font: inherit; text-align: left; text-decoration: none; cursor: pointer; } .tb-conta-menu__item:hover, .tb-conta-menu__item:focus-visible { background: var(--bg-surface-secondary); } /* Sino de notificacoes: contador no botao e o painel ancorado nele. */ .tb-avisos-wrapper { position: relative; } .tb-avisos__contador { position: absolute; top: -2px; right: -2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--danger, #e74c3c); color: #fff; font-size: 10px; line-height: 16px; text-align: center; } .tb-avisos-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; width: 320px; max-width: calc(100vw - 32px); padding: 6px; background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-lg, 8px); box-shadow: 0 12px 32px rgba(0, 0, 0, .18); } .tb-avisos-menu__cabecalho { display: flex; justify-content: space-between; padding: 8px 10px 10px; border-bottom: 1px solid var(--border-color-light); margin-bottom: 4px; font-size: 12px; } .tb-avisos-menu__item { display: block; padding: 8px 10px; border-radius: 6px; color: inherit; font-size: 12px; text-decoration: none; } .tb-avisos-menu__item span { display: block; } .tb-avisos-menu__item:hover, .tb-avisos-menu__item:focus-visible, .tb-avisos-menu__rodape:hover, .tb-avisos-menu__rodape:focus-visible { background: var(--bg-surface-secondary); } .tb-avisos-menu__vazio { margin: 0; padding: 12px 10px; color: var(--text-secondary); font-size: 12px; } .tb-avisos-menu__rodape { display: block; margin-top: 4px; padding: 8px 10px; border-top: 1px solid var(--border-color-light); border-radius: 0 0 6px 6px; color: inherit; font-size: 12px; text-decoration: none; } /* Em tela estreita a busca sai: o cabecalho nao comporta os tres. */ @media (max-width: 860px) { .busca-telas { display: none; } } /* * Respiro entre o sino e o avatar. * * O contador do sino fica no canto do botao, meio grau fora dele; com o `gap: * 2px` da barra, o numero encostava no avatar e os dois viravam uma coisa so. */ .tb-avisos-wrapper { margin-right: 10px; }