/* * Complemento ao sistema de design do template Velzon 4.4.4 (licenciado — * ver static/vendor/velzon/). Carregado DEPOIS do CSS do Velzon em * templates/base.html. * * Decisão de 2026-09-11: a paleta/tipografia do Velzon substituem a * identidade "AppSuite" definida em 2026-09-09 — este arquivo não define * mais cores/tipografia "de marca" nem camadas de dark mode (o Velzon já * resolve dark mode via [data-bs-theme="dark"] em * static/vendor/velzon/css/app.min.css). Um dos usos que sobra aqui é o que * o Velzon não tem pronto: a cor de identificação de cada app no * catálogo/cardápio (apps_compartilhados/configuracao/app_catalog.py), * mapeada para as variáveis semânticas --vz-* do próprio tema (nunca uma cor * "crua" nova) para herdar o dark mode automaticamente. */ .app-cor-roxo { background-color: var(--vz-secondary); } .app-cor-verde { background-color: var(--vz-success); } .app-cor-azul { background-color: var(--vz-primary); } .app-cor-laranja { background-color: var(--vz-warning); } /* * Abas Treinamentos/Módulos/Turmas (apps/treinamentos/templates/ * treinamentos/_abas.html) — cor `#d5d5d5` escolhida e aprovada * visualmente pelo usuário em 2026-09-16 (valor cru mesmo: não * corresponde a nenhuma variável `--vz-*` já definida pelo tema, * confirmado por busca no CSS vendorizado). Usa as próprias variáveis * CSS que o Bootstrap do Velzon já expõe em `.nav-tabs` (não uma * propriedade solta tipo `border-color`, que perderia pra regras mais * específicas do Velzon — ex. `.nav-border-top .nav-link.active` seta * `border-top-color` direto, ver bootstrap.min.css/app.min.css): * `--vz-nav-tabs-border-color` colore a linha inteira que fica embaixo * da barra toda (`.nav-tabs{border-bottom:... var(--vz-nav-tabs-border- * color)}`); `--vz-nav-tabs-link-active-border-color` colore o contorno * (laterais) só da ABA ATIVA (`.nav-tabs .nav-link.active{border-color: * var(--vz-nav-tabs-link-active-border-color)}` — 3 valores: topo, * laterais, base; base continua `--vz-tertiary-bg`, igual ao default do * Velzon, pra continuar "colada" no conteúdo abaixo; o topo real da aba * ativa continua `--vz-primary`, pintado por * `.nav-border-top .nav-link.active{border-top-color:...}` com * especificidade maior — não mexe nisso). Não muda nenhum outro * `.nav-tabs` do projeto (confirmado que esta classe só existe neste * componente). */ .app-abas-treinamentos { --vz-nav-tabs-border-color: #d5d5d5; --vz-nav-tabs-link-active-border-color: #d5d5d5 #d5d5d5 var(--vz-tertiary-bg); } .app-apps-dropdown-dot { display: inline-block; width: 0.6rem; height: 0.6rem; flex-shrink: 0; } /* Ícone circular usado nos cards de link das telas "Início" de cada app (configuracao, treinamentos) — o Velzon não tem um componente pronto equivalente para esse caso específico (card inteiro como link). */ .app-icon-badge { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background-color: RGBA(var(--vz-primary-rgb), 0.12); color: var(--vz-primary); font-size: 1.25rem; flex-shrink: 0; } /* Código da assinatura/licença (): o Bootstrap reduz a fonte para .875em; aqui ele acompanha o tamanho do texto/da tabela onde aparece. */ code { font-size: inherit; } /* Cards do catálogo de apps na tela inicial (apps reais + mockups "Em breve", autenticacao/home.html): pedido do usuário em 2026-09-22 — todos os cards devem ter a mesma altura. `h-100` só estica os cards dentro da MESMA linha flex (`.row`), e cada categoria/seção é uma `.row` separada — descrições de tamanhos diferentes (a mais longa hoje tem ~90 caracteres, contra ~40 dos mockups) fariam cada linha crescer para uma altura diferente. Truncar a descrição em no máximo 2 linhas garante uma altura de card previsível e igual em toda linha, independente do texto. */ .card-descricao-app { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Legenda `` (só para leitores de tela, usada em toda tabela do sistema). O Bootstrap não a tira do fluxo (`.visually-hidden:not(caption)` é quem ganha `position: absolute`), então ela fica no fim da tabela como uma caixa de 1px com margens de -1px; a de baixo a fazia sobrar 1px para fora do contêiner e, dentro de um `.table-responsive` (cujo overflow-y vira `auto` junto com o overflow-x), aparecia uma barra de rolagem vertical desnecessária (visto em "Origem dos dados", 2026-09-21). Zerar só a margem de baixo mantém a caixa dentro do contêiner, sem deslocar nada; a legenda continua exposta a leitores de tela. */ caption.visually-hidden { margin-bottom: 0 !important; } /* Card de app quadrado na seleção de apps da assinatura por aplicativo (2026-09-28). */ .card-app-quadrado { aspect-ratio: 1 / 1; } /* * Tooltip da identidade rengaw (2026-10-04): usado pela descrição cortada dos cartões de app * (static/js/descricao-tooltip.js). Fundo Noite, texto IBM Plex Sans, cantos de 10px; no escuro ganha um contorno * para se separar do fundo da página. */ .tooltip.rw-tooltip { --vz-tooltip-bg: #061C3D; --vz-tooltip-color: #FFFFFF; --vz-tooltip-max-width: 20rem; --vz-tooltip-opacity: 1; --bs-tooltip-bg: #061C3D; --bs-tooltip-max-width: 20rem; --bs-tooltip-opacity: 1; } .tooltip.rw-tooltip .tooltip-inner { background: #061C3D; color: #FFFFFF; max-width: 20rem; text-align: left; font-family: "IBM Plex Sans", sans-serif; font-size: 0.8125rem; line-height: 1.45; padding: 0.6rem 0.8rem; border-radius: 10px; box-shadow: 0 8px 24px rgba(6, 28, 61, 0.22); } .tooltip.rw-tooltip .tooltip-inner strong { font-family: "Exo 2", sans-serif; font-weight: 600; color: #8FCBFF; } .tooltip.rw-tooltip.bs-tooltip-top .tooltip-arrow::before, .tooltip.rw-tooltip.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before { border-top-color: #061C3D; } .tooltip.rw-tooltip.bs-tooltip-bottom .tooltip-arrow::before, .tooltip.rw-tooltip.bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before { border-bottom-color: #061C3D; } .tooltip.rw-tooltip.bs-tooltip-start .tooltip-arrow::before, .tooltip.rw-tooltip.bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before { border-left-color: #061C3D; } .tooltip.rw-tooltip.bs-tooltip-end .tooltip-arrow::before, .tooltip.rw-tooltip.bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before { border-right-color: #061C3D; } [data-bs-theme="dark"] .tooltip.rw-tooltip .tooltip-inner { outline: 1px solid rgba(143, 203, 255, 0.35); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); } /* Selo "IA" nos cards de app (2026-10-15, plano 089): tela inicial e montador de assinatura, claro e escuro. Discreto: uma pílula pequena ao lado do "Abrir" ou do nome; não muda a altura do card. "Requer" leva o fundo cheio. */ .rw-app-rodape { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } .rw-selo-ia { display: inline-flex; align-items: center; gap: 0.2rem; margin-left: 0.4rem; padding: 0.05rem 0.45rem; border-radius: 999px; border: 1px solid rgba(0, 110, 203, 0.35); color: #006ECB; font-family: "IBM Plex Mono", monospace; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; line-height: 1.4; vertical-align: middle; white-space: nowrap; } .rw-selo-ia i { font-size: 0.75rem; } .rw-selo-ia-obrigatoria { background: #006ECB; border-color: #006ECB; color: #FFFFFF; } [data-bs-theme="dark"] .rw-selo-ia { border-color: rgba(0, 144, 244, 0.5); color: #8FCBFF; } [data-bs-theme="dark"] .rw-selo-ia-obrigatoria { background: #0090F4; border-color: #0090F4; color: #061C3D; } .rw-selo-ia-indisponivel { border-color: rgba(178, 58, 31, 0.4); color: #B23A1F; } [data-bs-theme="dark"] .rw-selo-ia-indisponivel { border-color: rgba(255, 160, 139, 0.5); color: #FFA08B; } /* Opcional fica só no contorno; obrigatória ("Requer IA") preenchida: diferença visível sem depender do tooltip. */