/* ------------------------------------------------------------------ */ /* Obrify Design System — camada de componentes (piloto: Atividades) */ /* */ /* Tudo aqui é escopado por `.obrify-theme-lab` (classe aplicada só no */ /* de tasks#index — ver ApplicationHelper#obrify_theme_lab?) e */ /* consome exclusivamente os tokens --ob-* definidos em */ /* obrify_tokens.css. Nenhum HEX solto, nenhum componente novo: os */ /* mesmos .btn/.card/.table/.badge/.progress/.dropdown-menu do resto */ /* do app, apenas re-temizados. */ /* */ /* Este arquivo precisa carregar DEPOIS do core.css/demo.css do Vuexy */ /* (tag explícita em _head.html.erb, após os links do tema) para que */ /* os overrides de cor vençam por ordem de cascata sem depender de */ /* !important em tudo — mesmo racional já documentado em custom.css. */ /* ------------------------------------------------------------------ */ /* ---------- Base ---------------------------------------------------- */ .obrify-theme-lab { background-color: var(--ob-background); } .obrify-theme-lab .content-wrapper { background-color: var(--ob-background); } /* Só título/KPI/valores de destaque usam Barlow Condensed. Corpo, tabela, formulários e botões usam a fonte de interface do projeto (Public Sans, já carregada globalmente) — no máximo duas famílias no escopo. */ .obrify-theme-lab h1, .obrify-theme-lab h2, .obrify-theme-lab h3, .obrify-theme-lab h4, .obrify-theme-lab h5, .obrify-theme-lab h6, .obrify-theme-lab .card-title, .obrify-theme-lab .ob-page-title, .obrify-theme-lab .ob-kpi-value { font-family: var(--ob-font-display); } /* ---------- Escala tipográfica --------------------------------------- */ /* Mapeamento de papéis (tamanho / peso). Fonte de verdade única — o corpo da tabela e o cabeçalho da tabela agora dividem o MESMO tamanho (13px), diferindo só por peso/caixa, para eliminar a sensação de mistura de tipografias que a tabela tinha. Não usar tamanhos fora desta lista. Papel Tamanho/Peso Fonte Classe Título da página 24–30 / 700 Barlow Condensed .ob-page-title Título de card 18 / 600 Barlow Condensed .card-title Valor de KPI 30 / 700 Barlow Condensed .ob-kpi-value Label 14 / 500 interface .ob-kpi-label Botão / Input 14 / 500 interface .btn / .form-control Cabeçalho de tabela 13 / 600 caps interface .table thead th Texto de tabela 13 / 400 interface .table td Etapa / rodapé da tabela 13 / 700 interface .ob-row-stage / .ob-row-total Valor de indicador 13 / 600 interface .ob-meta-chip-value Item de legenda/menu 13 / 400 interface .ob-comp-legend-item / .dropdown-item Badge 11.5 / 600 interface .ob-badge Percentual de avanço (tab.) 11 / 400 interface .ob-row-progress-value Label de chip 11 / 500 caps interface .ob-meta-chip-label Texto auxiliar 12 / 400 interface .ob-caption O cabeçalho da tabela () chegou a carregar `font-size: unset !important` inline (resquício do markup pré-redesign), que batia o !important desta folha e fazia o cabeçalho renderizar num tamanho diferente do corpo — removido do ERB; agora os dois herdam só desta escala. */ .obrify-theme-lab .card-title { /* Vuexy define --bs-card-title-color com um tom fixo (pensado só para fundo claro), sem herdar de --bs-body-color/--bs-emphasis-color — sem este override o título fica praticamente ilegível no dark. */ color: var(--ob-text-primary) !important; font-size: 18px; font-weight: 600; letter-spacing: 0.01em; line-height: 1.3; } .obrify-theme-lab .ob-page-title { font-size: 24px; font-weight: 700; letter-spacing: 0; line-height: 1.2; } @media (min-width: 768px) { .obrify-theme-lab .ob-page-title { font-size: 28px; } } @media (min-width: 1200px) { .obrify-theme-lab .ob-page-title { font-size: 30px; } } .obrify-theme-lab .ob-page-subtitle { font-size: 13px; margin-top: 2px; } /* Título + metadados + CTA na mesma linha (ver nota no ERB): o bloco do título não pode encolher o texto do h5/subtítulo quando o espaço aperta. */ .obrify-theme-lab .ob-header-title-block { flex-shrink: 0; } /* Metadados institucionais da obra (Valor orçado / Atualizado em): mesmo componente de chip usado no card Prazo — reaproveitado, não um padrão novo. Fica junto ao título, discreto, sem competir com o dashboard. */ .obrify-theme-lab .ob-page-meta-chips .ob-meta-chip { padding: var(--ob-space-4) var(--ob-space-8); background-color: transparent; border-color: transparent; } /* Botão de importar/exportar: mesma linha e mesma altura de Cronograma/ Adicionar (nenhum padding-top/bottom próprio — herda o padding vertical de .btn) — só o padding horizontal é mais estreito, por ser só ícone. */ .obrify-theme-lab .ob-btn-import-export { display: inline-flex; align-items: center; justify-content: center; padding-left: var(--ob-space-12); padding-right: var(--ob-space-12); } .obrify-theme-lab .ob-caption { font-size: 12px; font-weight: 400; color: var(--ob-text-muted); } /* ---------- Transições suaves (~250ms) ------------------------------ */ /* Escopadas por componente (não *-universal) para não interferir em */ /* animações já existentes (spinner, rotating-icon, orbs do FAB). */ .obrify-theme-lab, .obrify-theme-lab .card, .obrify-theme-lab #layout-navbar, .obrify-theme-lab #layout-menu, .obrify-theme-lab .menu-inner, .obrify-theme-lab .menu-item, .obrify-theme-lab .btn, .obrify-theme-lab .form-control, .obrify-theme-lab .form-select, .obrify-theme-lab .table, .obrify-theme-lab .table > :not(caption) > * > *, .obrify-theme-lab .badge, .obrify-theme-lab .progress-bar, .obrify-theme-lab .dropdown-menu, .obrify-theme-lab .ob-theme-switch, .obrify-theme-lab .ob-theme-switch-thumb { transition: background-color var(--ob-transition), border-color var(--ob-transition), color var(--ob-transition), box-shadow var(--ob-transition), transform var(--ob-transition-fast); } /* ---------- Header --------------------------------------------------- */ .obrify-theme-lab #layout-navbar { background-color: var(--ob-header-bg) !important; -webkit-backdrop-filter: saturate(180%) blur(10px); backdrop-filter: saturate(180%) blur(10px); box-shadow: 0 1px 0 var(--ob-border), var(--ob-shadow); } .obrify-theme-lab #layout-navbar .nav-link, .obrify-theme-lab #layout-navbar .fw-bold { color: var(--ob-text-primary); } /* ---------- Switch de tema (sol/lua) --------------------------------- */ .ob-theme-switch { --ob-switch-w: 52px; --ob-switch-h: 28px; display: inline-flex; align-items: center; justify-content: space-between; width: var(--ob-switch-w); height: var(--ob-switch-h); padding: 0 6px; border-radius: var(--ob-radius-pill); border: 1px solid var(--ob-border); background-color: var(--ob-surface-secondary); cursor: pointer; position: relative; flex-shrink: 0; } .ob-theme-switch:focus-visible { outline: 2px solid var(--ob-primary); outline-offset: 2px; } .ob-theme-switch i { font-size: 13px; line-height: 1; color: var(--ob-text-muted); position: relative; z-index: 1; } .ob-theme-switch .ob-theme-switch-icon-light { color: var(--ob-warning); } .ob-theme-switch-thumb { position: absolute; top: 2px; left: 2px; width: calc(var(--ob-switch-h) - 4px); height: calc(var(--ob-switch-h) - 4px); border-radius: 50%; background-color: var(--ob-card); box-shadow: var(--ob-shadow-strong); transform: translateX(0); } [data-obrify-theme="dark"] .ob-theme-switch-thumb { transform: translateX(calc(var(--ob-switch-w) - var(--ob-switch-h))); } /* ---------- Sidebar (identidade institucional) ----------------------- */ /* Light: mantém verde institucional (já vem do override global em */ /* custom.css via --bs-menu-bg). Dark: verde quase grafite, nunca preto. */ .obrify-theme-lab[data-obrify-theme="dark"] #layout-menu { background-color: var(--ob-sidebar-bg) !important; } .obrify-theme-lab[data-obrify-theme="dark"] #layout-menu, .obrify-theme-lab[data-obrify-theme="dark"] #layout-menu .menu-link { --bs-menu-bg: var(--ob-sidebar-bg); --bs-menu-bg-rgb: var(--ob-sidebar-bg-rgb); --bs-menu-color: rgba(245, 245, 245, 0.68); --bs-menu-color-rgb: 245, 245, 245; --bs-menu-hover-color: #ffffff; --bs-menu-active-color: #ffffff; --bs-menu-sub-active-color: #ffffff; --bs-menu-divider-color: rgba(245, 245, 245, 0.12); } .obrify-theme-lab[data-obrify-theme="dark"] .menu-vertical .menu-item.active > .menu-link, .obrify-theme-lab[data-obrify-theme="dark"] .menu-vertical .menu-item.active > .menu-toggle { background-color: rgba(88, 184, 90, 0.18) !important; border-radius: var(--ob-radius-sm); } /* Wordmark "Obrify" na sidebar: é um PNG de cor sólida fixa (cinza-chumbo), sem contraste sobre o fundo verde-escuro/grafite da sidebar — em Light e em Dark, já que a sidebar permanece escura nos dois temas. Clareado via filtro (o símbolo verde ao lado não é afetado, é uma imagem separada). */ .obrify-theme-lab .app-brand-text img { filter: brightness(0) invert(1); opacity: 1; } /* ---------- Cards ------------------------------------------------------ */ /* Novo padrão: sem preenchimento sólido colorido. Branco/grafite, sombra */ /* extremamente suave, borda discreta — "premium", não "template". */ .obrify-theme-lab .card { background-color: var(--ob-card); border: 1px solid var(--ob-border); border-radius: var(--ob-radius); box-shadow: var(--ob-shadow); } .obrify-theme-lab .card .text-body-secondary, .obrify-theme-lab .card .text-secondary, .obrify-theme-lab .card .text-muted { color: var(--ob-text-secondary) !important; } /* Camada "canvas": o wrapper que agrupa toda a tela (título, KPIs, filtros, tabela) fica um degrau abaixo dos cards que ele contém — é isso que cria sensação de profundidade em vez de tudo no mesmo plano. */ .obrify-theme-lab .card.ob-page-canvas { background-color: var(--ob-background-secondary); border-color: var(--ob-border); box-shadow: none; } @media (min-width: 768px) { .obrify-theme-lab .ob-header-row { flex-wrap: nowrap !important; } .obrify-theme-lab .ob-header-title-block { flex-shrink: 0 !important; } .obrify-theme-lab .ob-page-meta-chips { margin-left: auto !important; margin-right: auto !important; flex-shrink: 0 !important; flex-wrap: nowrap !important; } .obrify-theme-lab .ob-tasks-actions-row { width: auto !important; flex-shrink: 0 !important; } } .obrify-theme-lab .card.ob-page-canvas .card, .obrify-theme-lab .card.ob-page-canvas .ob-kpi-card, .obrify-theme-lab .card.ob-page-canvas .ob-table-card { box-shadow: var(--ob-shadow); } /* ---------- KPIs --------------------------------------------------- */ .obrify-theme-lab .ob-kpi-card { background-color: var(--ob-card); border: 1px solid var(--ob-border); border-radius: var(--ob-radius); box-shadow: var(--ob-shadow); padding: var(--ob-space-16); /* Coluna: cabeçalho (título/badge) fixo no topo, corpo abaixo ocupa o resto da altura — sem isso, os 3 cards irmãos (esticados por .h-100 à altura do mais alto) sobravam espaço solto só embaixo do conteúdo mais curto, em vez de distribuir/centralizar. */ display: flex; flex-direction: column; } .obrify-theme-lab .ob-kpi-body { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; } /* Label acima do valor grande (ex.: "Avanço físico"). Escala: 14/500. */ .obrify-theme-lab .ob-kpi-label { font-size: 14px; font-weight: 500; color: var(--ob-text-label); margin-bottom: var(--ob-space-4); } /* Ícone do rótulo do KPI: mesmo selo (.ob-meta-chip-icon) já usado em Decorrido/Restante — antes era um ícone tabler solto e maior (20px sem selo), destoando do resto do painel; agora reaproveita o mesmo selo em todo lugar que precisa de ícone + texto avulso (ver .ob-icon-label). */ .obrify-theme-lab .ob-icon-label { display: inline-flex; align-items: center; gap: var(--ob-space-8); } .obrify-theme-lab .ob-kpi-value { font-size: 30px; line-height: 1.1; font-weight: 700; color: var(--ob-text-primary); letter-spacing: 0; font-variant-numeric: tabular-nums; } /* ---------- Execução (Avanço Físico + Financeiro lado a lado) ---------- */ /* Um único card, dois indicadores de mesmo peso separados por um divisor vertical discreto — não dois cards inteiros. */ .obrify-theme-lab .ob-exec-split { display: flex; align-items: stretch; } .obrify-theme-lab .ob-exec-item { flex: 1 1 50%; min-width: 0; } .obrify-theme-lab .ob-exec-divider { width: 1px; align-self: stretch; background-color: var(--ob-border); margin: 0 var(--ob-space-16); } /* Espaço extra acima dos blocos Físico/Financeiro: abre respiro para o badge maior de status ("Tendência de atraso" / "Em dia") no cabeçalho do card, sem alterar a altura total do card (que segue igualada à do card Prazo via .h-100 no .row do _summary). */ .obrify-theme-lab .ob-exec-split-spaced { margin-top: var(--ob-space-8); } /* Percentuais do card Execução (34% / 4%): levemente menores que o padrão de KPI genérico (30px) e com a barra mais próxima do número — os dois indicadores (Físico/Financeiro) usam exatamente as mesmas regras, então mantêm o mesmo peso visual entre si por construção. */ .obrify-theme-lab .ob-exec-item .ob-kpi-value { font-size: 24px; margin-bottom: 2px; } .obrify-theme-lab .ob-kpi-desc { font-size: 12px; color: var(--ob-text-muted); margin-top: var(--ob-space-4); } /* ---------- Chips de metadado ------------------------------------------ */ /* Substituem o texto solto de "Valor orçado / Última atualização / Status / Prazos" por pequenos blocos horizontais com ícone — compactos, com grid responsivo (auto-fit) em vez de colunas Bootstrap fixas, para não quebrar o label em duas linhas quando a sidebar está expandida. */ .obrify-theme-lab .ob-meta-chip-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: var(--ob-space-8); } /* Variante de 2 colunas fixas (cards "Prazo decorrido"/"Prazo restante" sob a linha do tempo) — sempre lado a lado, preenchendo o espaço disponível do card, independentemente da largura. */ .obrify-theme-lab .ob-meta-chip-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ob-space-8); } /* Decorrido/Restante: ícone+texto centralizados como bloco compacto no card, não empacotados à esquerda (que é o padrão do chip genérico). */ .obrify-theme-lab .ob-meta-chip-grid-2 .ob-meta-chip { justify-content: center; } .obrify-theme-lab .ob-meta-chip-grid-2 .ob-meta-chip-body { flex: 0 1 auto; } .obrify-theme-lab .ob-meta-chip-grid-2 .ob-meta-chip-label, .obrify-theme-lab .ob-meta-chip-grid-2 .ob-meta-chip-value { text-align: center; } .obrify-theme-lab .ob-meta-chip { display: flex; align-items: center; gap: var(--ob-space-8); padding: var(--ob-space-8) var(--ob-space-12); background-color: var(--ob-card-inner); border: 1px solid var(--ob-border); border-radius: var(--ob-radius-sm); height: 100%; min-width: 0; } .obrify-theme-lab .ob-meta-chip-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 24px; height: 24px; border-radius: var(--ob-radius-sm); background-color: var(--ob-primary-soft); color: var(--ob-primary); font-size: 13px; } .obrify-theme-lab .ob-meta-chip-icon.ob-meta-chip-icon-danger { background-color: color-mix(in srgb, var(--ob-danger) 16%, transparent); color: var(--ob-danger); } .obrify-theme-lab .ob-meta-chip-body { min-width: 0; flex: 1 1 auto; } .obrify-theme-lab .ob-meta-chip-label { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ob-text-label); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .obrify-theme-lab .ob-meta-chip-value { font-size: 13px; font-weight: 600; color: var(--ob-text-primary); line-height: 1.3; overflow-wrap: anywhere; } /* ---------- Linha do tempo do contrato (instrumento Prazo) ------------- */ /* Só dados existentes: datas do projeto + prazo decorrido/restante. Sem comparação com avanço (fase futura). */ .obrify-theme-lab .ob-timeline-dates { display: flex; justify-content: space-between; font-size: 12px; color: var(--ob-text-label); /* Precisa de espaço suficiente para o badge do marcador (que fica 22px acima da trilha, ver .ob-timeline-marker-badge) nunca encostar no texto das datas, mesmo com o marcador em 0% ou 100% (badge alinhado bem em cima da data correspondente). */ margin-bottom: 28px; } .obrify-theme-lab .ob-timeline-track { /* Mesma espessura das barras de Execução (.ob-progress-primary) — os dois instrumentos do dashboard precisam ler como parte do mesmo sistema, não como componentes de pesos diferentes. */ position: relative; height: 4px; border-radius: var(--ob-radius-pill); background-color: var(--ob-card-inner); } .obrify-theme-lab .ob-timeline-fill { position: absolute; inset: 0 auto 0 0; border-radius: var(--ob-radius-pill); background-color: var(--ob-chart-gray); } .obrify-theme-lab .ob-timeline-marker { position: absolute; top: -4px; bottom: -4px; width: 2px; transform: translateX(-1px); background-color: var(--ob-text-secondary); border-radius: 1px; } .obrify-theme-lab .ob-timeline-marker::after { content: ""; position: absolute; top: -5px; left: 50%; transform: translateX(-50%); width: 7px; height: 7px; border-radius: 50%; background-color: var(--ob-text-secondary); } /* Badge do % de prazo consumido: acima do marcador, para permitir comparação imediata com o Avanço Físico do card Execução. O container (.ob-timeline-track) não tem overflow:hidden, então não é cortado. */ .obrify-theme-lab .ob-timeline-marker-badge { position: absolute; top: -22px; transform: translateX(-50%); font-size: 10px; font-weight: 700; line-height: 1; padding: 2px 6px; border-radius: var(--ob-radius-pill); background-color: var(--ob-surface-secondary); color: var(--ob-text-secondary); white-space: nowrap; font-variant-numeric: tabular-nums; pointer-events: none; } .obrify-theme-lab .ob-timeline-meta { display: flex; justify-content: space-between; font-size: 13px; color: var(--ob-text-secondary); margin-top: var(--ob-space-12); } .obrify-theme-lab .ob-timeline-meta strong { color: var(--ob-text-primary); font-weight: 600; font-variant-numeric: tabular-nums; } /* ---------- Distribuição das atividades (instrumento Atividades) ------- */ /* Linha de composição fina no topo + lista em 2 colunas, clicável. A cor carrega STATUS (já existente no sistema); não confundir com a semântica de desempenho das barras de avanço, que segue neutra. */ .obrify-theme-lab .ob-comp-bar { display: flex; height: 6px; border-radius: var(--ob-radius-pill); overflow: hidden; background-color: var(--ob-card-inner); margin-bottom: var(--ob-space-12); } .obrify-theme-lab .ob-comp-segment + .ob-comp-segment { margin-left: 2px; } /* Segmento da barra: preenchimento sólido */ .obrify-theme-lab .ob-comp-segment.ob-comp-neutral { background-color: var(--ob-chart-gray); } .obrify-theme-lab .ob-comp-segment.ob-comp-info { background-color: var(--ob-info); } .obrify-theme-lab .ob-comp-segment.ob-comp-danger { background-color: var(--ob-danger); } .obrify-theme-lab .ob-comp-segment.ob-comp-success { background-color: var(--ob-success); } .obrify-theme-lab .ob-comp-legend { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ob-space-4) var(--ob-space-8); } .obrify-theme-lab .ob-comp-legend-item { /* Sem justify-content:center aqui de propósito: como os rótulos têm comprimentos diferentes ("Atrasadas" vs. "Em andamento"), centralizar o grupo bolinha+texto por item deslocava a bolinha de cada linha para um x diferente — quebrava o alinhamento vertical das bolinhas entre as duas linhas da mesma coluna. A bolinha fica fixa à esquerda (mesmo padding em todos os itens da coluna); só o rótulo é flexível. */ display: flex; align-items: center; gap: var(--ob-space-8); padding: var(--ob-space-4) var(--ob-space-8); border-radius: var(--ob-radius-sm); font-size: 13px; color: var(--ob-text-secondary); text-decoration: none; min-width: 0; } .obrify-theme-lab .ob-comp-legend-item:hover { background-color: var(--ob-table-row-hover); color: var(--ob-text-primary); } .obrify-theme-lab .ob-comp-legend-item.is-active { background-color: var(--ob-card-inner); color: var(--ob-text-primary); } .obrify-theme-lab .ob-comp-legend-item.is-empty { color: var(--ob-text-muted); } /* Bolinha com a contagem dentro — mesmo padrão de tom suave já usado nos badges de status (.ob-badge-*), só em formato circular. */ .obrify-theme-lab .ob-comp-dot { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; } .obrify-theme-lab .ob-comp-dot.ob-comp-neutral { background-color: var(--ob-card-inner); color: var(--ob-text-secondary); } .obrify-theme-lab .ob-comp-dot.ob-comp-info { background-color: color-mix(in srgb, var(--ob-info) 18%, transparent); color: var(--ob-info); } .obrify-theme-lab .ob-comp-dot.ob-comp-danger { background-color: color-mix(in srgb, var(--ob-danger) 18%, transparent); color: var(--ob-danger); } .obrify-theme-lab .ob-comp-dot.ob-comp-success { background-color: color-mix(in srgb, var(--ob-success) 18%, transparent); color: var(--ob-success); } .obrify-theme-lab .ob-comp-legend-label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---------- Barra de filtros ------------------------------------------ */ .obrify-theme-lab .ob-filter-bar .form-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ob-text-label); margin-bottom: var(--ob-space-4); } .obrify-theme-lab .form-control, .obrify-theme-lab .form-select { min-height: 38px; font-size: 14px; font-weight: 500; border-radius: var(--ob-radius-sm); border-color: var(--ob-border); background-color: var(--ob-surface); color: var(--ob-text-primary); } /* ---------- Toggle de recolher o painel de indicadores ------------------ */ /* Fica FORA de #atividadesDashboard (senão desapareceria junto ao recolher) e centralizado logo abaixo dele — uma alça discreta, não um botão com borda competindo com os cards acima. */ .obrify-theme-lab .ob-dashboard-toggle-row { display: flex; justify-content: center; margin-top: var(--ob-space-4); margin-bottom: var(--ob-space-4); } .obrify-theme-lab .ob-dashboard-toggle { display: inline-flex; align-items: center; justify-content: center; width: auto; height: auto; padding: 4px 10px; border: 1px solid var(--ob-border); border-radius: var(--ob-radius-pill); background-color: var(--ob-surface); color: var(--ob-text-secondary); opacity: 0.85; cursor: pointer; } .obrify-theme-lab .ob-dashboard-toggle:hover { color: var(--ob-text-primary); opacity: 1; background-color: var(--ob-card-hover); } .obrify-theme-lab .ob-dashboard-toggle i { font-size: 16px; transition: transform var(--ob-transition); } .obrify-theme-lab .ob-dashboard-toggle[aria-expanded="false"] i { transform: rotate(180deg); } .obrify-theme-lab .form-control::placeholder { color: var(--ob-text-muted); opacity: 1; } .obrify-theme-lab .form-control:focus, .obrify-theme-lab .form-select:focus { border-color: var(--ob-primary); box-shadow: 0 0 0 3px var(--ob-primary-soft); } /* Radius uniforme no grupo busca+botão: em vez de depender de regras independentes por corner (que perdiam a disputa de especificidade contra o CSS do Bootstrap e liam como arredondado só à esquerda), o próprio input-group vira o container com o radius e recorta os filhos via overflow:hidden — garante os dois lados arredondados sempre. */ .obrify-theme-lab .input-group { border-radius: var(--ob-radius-sm); overflow: hidden; } .obrify-theme-lab .input-group .btn, .obrify-theme-lab .input-group .form-control { border-radius: 0; } /* ---------- Tabela ------------------------------------------------------ */ /* A tabela é sua própria superfície (tom "Tabela" do sistema de camadas), com moldura própria — não fica solta dentro do canvas. */ .obrify-theme-lab .ob-table-card { background-color: var(--ob-table-bg); border: 1px solid var(--ob-border); border-radius: var(--ob-radius); box-shadow: var(--ob-shadow); /* overflow:hidden foi removido daqui de propósito: ele quebrava o position:sticky do cabeçalho E a scrollbar do container filho (.ob-table-scroll) — dois elementos com "overflow" na mesma cadeia de ancestrais disputam o contexto de rolagem. O recorte de cantos agora é feito só no elemento que efetivamente rola, logo abaixo. */ } /* Toolbar fundida ao topo da tabela: os filtros pertencem visualmente à lista que eles controlam — não a um card próprio acima do dashboard. Mas precisa respirar: padding confortável, proporção equilibrada entre os 3 campos (busca ~metade da largura, Status/Tipo dividindo o resto). */ .obrify-theme-lab .ob-toolbar { padding: var(--ob-space-12) var(--ob-space-16); border-bottom: 1px solid var(--ob-border); background-color: var(--ob-card-inner); } .obrify-theme-lab .ob-toolbar-form { display: flex; gap: var(--ob-space-12); flex-wrap: wrap; align-items: center; } .obrify-theme-lab .ob-toolbar-search { flex: 1 1 54%; min-width: 260px; } .obrify-theme-lab .ob-toolbar-search .btn { /* Botão de busca não é a ação primária da tela — fica no tom neutro da toolbar, sem competir com o "+ Novo Registro" (esse sim, verde). */ color: var(--ob-text-secondary); background-color: transparent; border-color: var(--ob-border); } .obrify-theme-lab .ob-toolbar-search .btn:hover { background-color: var(--ob-card-hover); color: var(--ob-text-primary); } /* Cantos externos com o mesmo raio dos dropdowns de filtro (Status/Tipo) — a costura interna entre input e botão continua reta (0), só as pontas do grupo arredondam. */ .obrify-theme-lab .ob-toolbar-search .form-control { border-top-left-radius: var(--ob-radius-sm); border-bottom-left-radius: var(--ob-radius-sm); } .obrify-theme-lab .ob-toolbar-search .btn { border-top-right-radius: var(--ob-radius-sm); border-bottom-right-radius: var(--ob-radius-sm); } .obrify-theme-lab .ob-toolbar-select { flex: 1 1 20%; min-width: 150px; width: auto; } /* Altura do scroll da tabela: acompanha a viewport agora que o dashboard é mais baixo (antes: 500px fixos). overflow-y explícito (não só -x) e border-radius só nos cantos inferiores — é este elemento, e não o card pai, que precisa recortar cantos, porque é ele que efetivamente rola (ver nota em .ob-table-card acima). */ .obrify-theme-lab .ob-table-scroll { overflow-x: auto; overflow-y: auto; max-height: min(62vh, 720px); border-radius: 0 0 var(--ob-radius) var(--ob-radius); transition: max-height var(--ob-transition); } /* Com o painel de indicadores recolhido (#atividadesDashboard.d-none), a tabela ocupa o espaço que ele deixou livre — recolher só o dashboard sem a tabela crescer não aumenta o número de linhas visíveis, que é o pedido: "recolher deve deixar só a planilha à mostra". */ .obrify-theme-lab .ob-table-scroll.ob-table-scroll-expanded { max-height: min(84vh, 960px); } .obrify-theme-lab .table thead th { position: sticky; top: 0; z-index: 5; background-color: var(--ob-table-bg) !important; color: var(--ob-text-label); border-bottom: 1px solid var(--ob-border); box-shadow: none; font-family: "Public Sans", sans-serif; font-size: 13px !important; font-weight: 600; line-height: 18px; text-transform: uppercase; letter-spacing: 0.03em; padding: 12px 20px; } .obrify-theme-lab .table td { padding: 12px 20px; vertical-align: middle; border-color: var(--ob-divider); color: var(--ob-text-primary); font-family: "Public Sans", sans-serif; font-size: 13px; font-weight: 400; line-height: 18px; font-variant-numeric: tabular-nums; } .obrify-theme-lab .table-hover > tbody > tr:hover > * { /* Sutil de propósito: só indicar "sob o cursor", não "selecionada". */ background-color: var(--ob-table-row-hover); } .obrify-theme-lab .table tbody tr:focus-within > * { background-color: var(--ob-selected); } /* Hierarquia WBS: etapa (linha-pai) vs. atividade (linha-filha). A diferenciação é só por peso tipográfico + leve diferença de superfície + borda discreta — sem cor de destaque (nada de verde). Mesmo tamanho de fonte da atividade: não é um componente diferente, é a mesma linha com mais peso. */ .obrify-theme-lab .table tr.ob-row-stage { background-color: var(--ob-row-stage-bg) !important; box-shadow: inset 3px 0 0 var(--ob-text-muted); } .obrify-theme-lab .table tr.ob-row-stage td { color: var(--ob-text-primary); font-size: 13px; font-weight: 700; border-top: 1px solid var(--ob-border); border-bottom: 1px solid var(--ob-border); } .obrify-theme-lab .table tr.ob-row-activity { background-color: var(--ob-row-activity-bg) !important; } .obrify-theme-lab .table tr.ob-row-activity td { color: var(--ob-text-secondary); font-size: 13px; font-weight: 400; } .obrify-theme-lab .table tr.ob-row-activity td.ob-col-description { color: var(--ob-text-primary); } /* Total Geral (rodapé da tabela) */ .obrify-theme-lab .table tr.ob-row-total { background-color: var(--ob-card-inner) !important; } .obrify-theme-lab .table tr.ob-row-total td { /* Sticky: fica sempre visível no fim do .ob-table-scroll, independente da rolagem — mesmo racional do cabeçalho (thead th), só que ancorado embaixo. O background precisa estar no td (não só na tr) para não ficar transparente sobre as linhas que passam por baixo ao rolar. */ position: sticky; bottom: 0; z-index: 4; color: var(--ob-text-primary); background-color: var(--ob-card-inner) !important; font-size: 13px; font-weight: 700; border-top: 1px solid var(--ob-border); border-bottom: none; } /* ---------- Badges de status ------------------------------------------- */ .obrify-theme-lab .ob-badge { display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em; padding: 0.32em 0.7em; /* Mesmo raio de botões/cards/inputs (--ob-radius-sm) — pill destoava do resto da tela, que não usa esse formato em nenhum outro componente. */ border-radius: var(--ob-radius-sm); text-transform: none; } .obrify-theme-lab .ob-badge-neutral { background-color: var(--ob-surface-secondary); color: var(--ob-text-secondary); } .obrify-theme-lab .ob-badge-info { background-color: color-mix(in srgb, var(--ob-info) 16%, transparent); color: var(--ob-info); } .obrify-theme-lab .ob-badge-danger { background-color: color-mix(in srgb, var(--ob-danger) 16%, transparent); color: var(--ob-danger); } .obrify-theme-lab .ob-badge-success { background-color: color-mix(in srgb, var(--ob-success) 16%, transparent); color: var(--ob-success); } /* 5ª variante, introduzida para o chip de "planejamento parcial" de Planejamento (obrify_planning_theme.css) — mesmo sentido de "merece atenção, não é erro" que --ob-warning já carrega em .ob-row-progress-value-over, aqui como badge cheio em vez de contorno. */ .obrify-theme-lab .ob-badge-warning { background-color: color-mix(in srgb, var(--ob-warning) 18%, transparent); color: var(--ob-warning); } /* Variante maior, usada como 3º indicador do grupo "Situação da Obra" (ao lado de Avanço físico/financeiro) — mesmo componente, só escala. */ .obrify-theme-lab .ob-badge-lg { font-size: 14px; padding: 0.5em 0.85em; } .obrify-theme-lab .ob-badge-lg i { font-size: 15px; } /* ---------- Progress bars ------------------------------------------------ */ .obrify-theme-lab .progress { height: 5px !important; border-radius: var(--ob-radius-pill) !important; background-color: var(--ob-surface-secondary) !important; overflow: hidden; } /* Barras de avanço: NEUTRAS em toda a tela (dashboard e tabela). Decisão desta fase: a barra representa apenas quantidade executada — não há base validada para semântica de desempenho (verde/amarelo/vermelho), então nenhuma cor de estado é usada. Verde fica reservado para ações primárias, badges de status e identidade. */ .obrify-theme-lab .progress .progress-bar, .obrify-theme-lab .progress-bar { border-radius: var(--ob-radius-pill) !important; background-color: var(--ob-chart-gray) !important; background-image: none !important; box-shadow: none !important; transition: width 500ms cubic-bezier(0.22, 1, 0.36, 1); } /* Barras do card Execução (Avanço Físico e Avanço Financeiro): finas, discretas — dashboard executivo, não painel de marketing. */ .obrify-theme-lab .ob-progress-primary { height: 4px !important; background-color: var(--ob-card-inner) !important; } .obrify-theme-lab .ob-row-progress { display: flex; align-items: center; gap: var(--ob-space-8); } .obrify-theme-lab .ob-row-progress .icon-base { font-size: 14px; width: 14px; height: 20px; line-height: 20px; flex-shrink: 0; text-align: center; /* Mais "presente" que --ob-text-muted: o tom muted lia fraco demais ao lado da barra e do percentual. */ color: var(--ob-text-secondary); } .obrify-theme-lab .ob-row-progress .progress { flex: 1 1 auto; /* Trilho dedicado (mais presente que --ob-surface-secondary): sem isso, o trilho "somem" contra o fundo branco/quase-branco das linhas quando o preenchimento é 0-1%, e a barra parece não existir. */ background-color: var(--ob-progress-track) !important; } .obrify-theme-lab .ob-row-progress-value { /* Peso e cor fixos em "discreto", mesmo dentro de uma linha de etapa (que é 700/text-primary) — o percentual é um dado de apoio da barra, não deve competir com ela nem com a descrição. */ flex: 0 0 auto; min-width: 38px; text-align: right; font-size: 11px !important; font-weight: 400 !important; color: var(--ob-text-secondary) !important; font-variant-numeric: tabular-nums; } /* Percentual acima de 100%: a barra em si permanece neutra (não alterada); só o número ganha um contorno âmbar discreto — nunca vermelho, porque não é necessariamente um erro (aditivo, produção acima do planejado etc.), é só um dado que merece um olhar mais atento. */ .obrify-theme-lab .ob-row-progress-value-over { display: inline-flex; align-items: center; gap: 3px; min-width: 0; padding: 1px 5px; border: 1px solid color-mix(in srgb, var(--ob-warning) 45%, transparent); border-radius: var(--ob-radius-sm); color: var(--ob-warning) !important; font-weight: 600 !important; } .obrify-theme-lab .ob-row-progress-over-icon { font-size: 11px; color: var(--ob-warning); } /* ---------- Botões -------------------------------------------------------- */ .obrify-theme-lab .btn { border-radius: var(--ob-radius-sm); font-size: 14px; font-weight: 500; } .obrify-theme-lab .btn-outline-secondary { color: var(--ob-text-secondary); border-color: var(--ob-border); } .obrify-theme-lab .btn-outline-secondary:hover, .obrify-theme-lab .btn-outline-secondary:focus { background-color: var(--ob-surface-secondary); color: var(--ob-text-primary); border-color: var(--ob-border); } /* Cronograma: navegação de alta importância para o produto — não pode ler como uma ação secundária apagada (mesmo tom neutro do botão de importar/exportar). Fica em outline verde (mesma cor do "+ Adicionar", um degrau abaixo por não ter preenchimento sólido), com borda mais espessa para não sumir ao lado do botão primário. */ .obrify-theme-lab .btn-outline-primary.ob-btn-cronograma { color: var(--ob-primary); border-color: var(--ob-primary); border-width: 1.5px; font-weight: 600; background-color: var(--ob-primary-soft); } .obrify-theme-lab .btn-outline-primary.ob-btn-cronograma:hover, .obrify-theme-lab .btn-outline-primary.ob-btn-cronograma:focus { background-color: var(--ob-primary); border-color: var(--ob-primary); color: #ffffff; } .obrify-theme-lab .btn-icon.btn-label-secondary { color: var(--ob-text-secondary); background-color: transparent; } .obrify-theme-lab .btn-icon.btn-label-secondary:hover { background-color: var(--ob-surface-secondary); color: var(--ob-text-primary); } .obrify-theme-lab .dropdown-menu { background-color: var(--ob-card); border-color: var(--ob-border); box-shadow: var(--ob-shadow-strong); border-radius: var(--ob-radius-sm); padding: var(--ob-space-8); } .obrify-theme-lab .dropdown-item { /* Assim como .card-title, o Vuexy fixa a cor do item em vez de herdar de --bs-dropdown-link-color/--bs-body-color. */ color: var(--ob-text-primary) !important; border-radius: var(--ob-radius-sm); font-size: 13px; padding-top: var(--ob-space-8); padding-bottom: var(--ob-space-8); } .obrify-theme-lab .dropdown-item.text-danger { color: var(--ob-danger) !important; } .obrify-theme-lab .dropdown-item.disabled, .obrify-theme-lab .dropdown-item:disabled { color: var(--ob-text-muted) !important; } .obrify-theme-lab .dropdown-item:hover, .obrify-theme-lab .dropdown-item:focus { background-color: var(--ob-surface-secondary); } .obrify-theme-lab .dropdown-item.text-danger:hover { background-color: color-mix(in srgb, var(--ob-danger) 12%, transparent); } /* ---------- Modais --------------------------------------------------------- Componente compartilhado (usado em várias telas, não só RDO) — extensão pontual adicionada aqui, junto dos outros componentes de base, quando o piloto do RDO precisou de modais retemados pela primeira vez. */ .obrify-theme-lab .modal-content { background-color: var(--ob-card); border: 1px solid var(--ob-border); border-radius: var(--ob-radius); box-shadow: var(--ob-shadow-strong); } .obrify-theme-lab .modal-header, .obrify-theme-lab .modal-footer { border-color: var(--ob-border); } .obrify-theme-lab .modal-title { font-family: var(--ob-font-display); color: var(--ob-text-primary); } .obrify-theme-lab .modal-body { color: var(--ob-text-primary); } /* ---------- Tooltips ------------------------------------------------------- */ .obrify-theme-lab .tooltip .tooltip-inner { background-color: var(--ob-text-primary); color: var(--ob-card); border-radius: var(--ob-radius-sm); font-size: 12px; padding: 6px 10px; } /* ---------- Foco (acessibilidade) ------------------------------------------ */ .obrify-theme-lab a:focus-visible, .obrify-theme-lab button:focus-visible, .obrify-theme-lab .btn:focus-visible { outline: 2px solid var(--ob-primary); outline-offset: 2px; } /* ---------- Estado vazio ---------------------------------------------------- */ .obrify-theme-lab .ob-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--ob-space-48) var(--ob-space-24); color: var(--ob-text-secondary); } .obrify-theme-lab .ob-empty-state i { font-size: 34px; color: var(--ob-text-muted); margin-bottom: var(--ob-space-12); } .obrify-theme-lab .ob-empty-state-title { font-weight: 600; color: var(--ob-text-primary); margin-bottom: var(--ob-space-4); } .obrify-theme-lab .ob-empty-state-desc { font-size: 13px; color: var(--ob-text-muted); } /* ---------- Skeleton (loading) ---------------------------------------------- */ .obrify-theme-lab .ob-skeleton { position: relative; overflow: hidden; background-color: var(--ob-surface-secondary); border-radius: var(--ob-radius-sm); } .obrify-theme-lab .ob-skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, var(--ob-card-hover), transparent); animation: ob-skeleton-shimmer 1.4s infinite; } @keyframes ob-skeleton-shimmer { 100% { transform: translateX(100%); } } .obrify-theme-lab turbo-frame[busy] .ob-skeleton { display: block; } /* ---------- FAB do microfone (refinamento, sem alterar comportamento) ------ */ .obrify-theme-lab .voice-capture-fab { right: 2rem; bottom: 2rem; box-shadow: var(--ob-shadow-strong), 0 0 0 1px var(--ob-primary-soft); } .obrify-theme-lab .voice-capture-fab:hover { box-shadow: var(--ob-shadow-strong), 0 0 0 4px var(--ob-primary-soft); } .obrify-theme-lab .voice-capture-panel { background-color: var(--ob-card); border: 1px solid var(--ob-border); color: var(--ob-text-primary); box-shadow: var(--ob-shadow-strong); }