/* ══════════════════════════════════════════════════════════════════════════ hub-premium.css — camada de layout do Hub (redesign 2026-08) POR QUE UM ARQUIVO SEPARADO: index-styles.css tem 3.894 linhas com três gerações de CSS sedimentadas e dois blocos finais de harmonização carregados de !important. Editar as regras originais lá dentro não produz efeito visível — a mudança é anulada pelo último bloco. Em vez de brigar com aquilo, esta camada carrega DEPOIS e redefine só o que o redesign muda. Reverter = remover uma linha do . O !important aqui NÃO é preguiça: aparece exatamente nas propriedades que o bloco "PADRÃO ÚNICO DOS CARDS" força com !important. Sem ele, ordem de fonte não basta. Onde o legado não usa !important, esta camada também não usa. ══════════════════════════════════════════════════════════════════════════ */ :root { --hx-navy: #0B1533; --hx-brand: #1a56db; --hx-brand-7: #1d4ed8; --hx-tint: #eff6ff; --hx-ink: #0f172a; --hx-ink2: #334155; --hx-ink3: #64748b; /* piso de texto secundário — 4,76:1 sobre branco */ --hx-deco: #94a3b8; /* só ícone/divisória, nunca texto */ --hx-line: #e4ebf5; --hx-line2: #f1f5f9; --hx-bg: #f6f8fc; --hx-ok: #16a34a; --hx-ok-t: #f0fdf4; --hx-dang: #dc2626; --hx-dang-t: #fef2f2; --hx-warn: #b45309; --hx-warn-t: #fffbeb; --hx-r: 14px; --hx-sh: 0 1px 2px rgba(15,23,42,.04), 0 6px 16px -6px rgba(15,23,42,.10); --hx-sh-h: 0 2px 4px rgba(15,23,42,.05), 0 14px 30px -12px rgba(29,78,216,.18); } .hub-content { background: var(--hx-bg); } /* ═══════════════ TOPBAR ═══════════════ */ .hx-topbar { display: flex !important; align-items: center; gap: 18px; flex-wrap: nowrap; } .hx-hi { min-width: 0; flex: none; } .hx-topbar .hub-greeting-hi { font-family: 'Sora', sans-serif; font-size: 20px; font-weight: 600; letter-spacing: -.02em; color: var(--hx-ink); line-height: 1.2; } .hx-topbar .hub-greeting-sub { font-size: 12.5px; color: var(--hx-ink3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Consulta Rápida — antes era faixa azul de ~130px com a sombra mais pesada da tela (0 8px 32px) num campo de busca. Agora é uma linha do cabeçalho. */ .hx-search { position: relative; flex: 1; max-width: 540px; margin-left: auto; } .hx-search-ic { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); font-size: 16px; color: var(--hx-deco); pointer-events: none; } .hx-search-input { width: 100% !important; height: 42px !important; border-radius: 10px !important; border: 1px solid #8e99a8 !important; background: #fff !important; color: var(--hx-ink) !important; padding: 0 122px 0 38px !important; font: 400 13.5px 'DM Sans', sans-serif !important; box-shadow: 0 1px 2px rgba(15,23,42,.04) !important; } .hx-search-input::placeholder { color: var(--hx-ink3) !important; } .hx-search-input:focus { border-color: var(--hx-brand) !important; } .hx-search-btn { position: absolute !important; right: 5px; top: 5px; height: 32px !important; width: auto !important; padding: 0 14px !important; border-radius: 7px !important; background: var(--hx-brand) !important; color: #fff !important; border: 0 !important; font: 500 12.5px 'DM Sans', sans-serif !important; display: inline-flex !important; align-items: center; gap: 6px; box-shadow: none !important; } .hx-search-btn:hover { background: var(--hx-brand-7) !important; } .hx-icon-btn { flex: none; width: 42px; height: 42px; border-radius: 10px; border: 1px solid #8e99a8; background: #fff; color: var(--hx-ink2); display: grid; place-items: center; font-size: 17px; cursor: pointer; box-shadow: 0 1px 2px rgba(15,23,42,.04); } .hx-icon-btn:hover { background: var(--hx-tint); border-color: var(--hx-brand); color: var(--hx-brand); } .hx-topbar .hub-clock { flex: none; font-variant-numeric: tabular-nums; font-size: 12.5px; color: var(--hx-ink3); background: transparent; border: 0; padding: 0; } /* ═══════════════ KPIs ═══════════════ */ .hub-kpis { gap: 20px !important; } .hub-kpi { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 13px !important; padding: 18px 20px !important; border-radius: var(--hx-r) !important; background: #fff !important; border: 1px solid var(--hx-line) !important; box-shadow: var(--hx-sh) !important; } .hub-kpi:hover { box-shadow: var(--hx-sh-h) !important; border-color: #cbd8ea !important; } .hx-kpi-top { display: flex; align-items: center; gap: 10px; } .hx-kpi-ic { width: 30px !important; height: 30px !important; border-radius: 9px !important; flex: none; display: grid !important; place-items: center; font-size: 15px !important; background: var(--hx-tint) !important; color: var(--hx-brand) !important; } .hub-kpi[data-kpi="tarefas"] .hx-kpi-ic { background: var(--hx-ok-t) !important; color: var(--hx-ok) !important; } .hub-kpi.is-alert .hx-kpi-ic { background: var(--hx-dang-t) !important; color: var(--hx-dang) !important; } .hub-kpi .hub-kpi-label { flex: 1; font-size: 12.5px !important; font-weight: 500 !important; color: var(--hx-ink3) !important; letter-spacing: 0 !important; text-transform: none !important; } .hub-kpi .hub-kpi-arrow { color: var(--hx-deco) !important; font-size: 17px !important; } .hx-kpi-mid { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .hub-kpi .hub-kpi-value { font-family: 'Sora', sans-serif !important; font-size: 34px !important; font-weight: 600 !important; letter-spacing: -.035em !important; line-height: 1 !important; /* sem background-clip:text: o gradiente recortado some no Alto Contraste do Windows e na impressão, levando o número junto */ background: none !important; -webkit-text-fill-color: currentColor !important; color: var(--hx-ink) !important; font-variant-numeric: tabular-nums; } .hub-kpi.is-alert .hub-kpi-value { color: var(--hx-dang) !important; } /* O sub vira pill. O JS ainda escreve style.color inline (index-app.js), então a cor do TEXTO continua vindo de lá — aqui entram só forma e fundo. */ .hub-kpi .hub-kpi-sub { font-size: 11.5px !important; font-weight: 500 !important; padding: 3px 9px; border-radius: 999px; background: var(--hx-line2); white-space: nowrap; } .hub-kpi[data-kpi="empresas"] .hub-kpi-sub { background: var(--hx-ok-t); } .hub-kpi.is-alert .hub-kpi-sub { background: var(--hx-dang-t); } .hx-kpi-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid var(--hx-line2); padding-top: 11px; min-height: 30px; font-size: 11.5px; color: var(--hx-ink3); } .hx-fresh { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px !important; } .hx-fresh-live { color: var(--hx-ok); } .hx-fresh-live i { font-size: 7px; } /* O selo de frescor era 9px #b6c2d2 (1,9:1) — justamente o aviso de que o dado está velho, ilegível. Vira âmbar legível. */ .hub-kpi .hub-kpi-fresh { position: static !important; font-size: 11.5px !important; color: var(--hx-warn) !important; background: var(--hx-warn-t) !important; padding: 3px 9px !important; border-radius: 999px !important; border: 0 !important; } .hx-kpi-note { color: var(--hx-dang); font-weight: 500; } /* ═══════════════ CARDS — forma comum ═══════════════ */ .pend-card, .agenda-card, .news-card, .avisos-card, .distrato-card { border-radius: var(--hx-r) !important; border: 1px solid var(--hx-line) !important; box-shadow: var(--hx-sh) !important; background: #fff !important; } .pend-hd, .agenda-hd, .news-header, .avisos-hd, .distrato-hd { padding: 0 20px !important; min-height: 56px !important; gap: 11px !important; border-bottom: 1px solid var(--hx-line2) !important; } .pend-hd-title, .agenda-hd-title, .news-header-title, .avisos-hd-title, .distrato-hd-title { font-family: 'Sora', sans-serif !important; font-size: 14.5px !important; font-weight: 600 !important; color: var(--hx-ink) !important; letter-spacing: -.01em !important; flex: 1 !important; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pend-hd-icon, .news-hd-icon, .agenda-hd-icon, .avisos-hd-icon, .distrato-hd-icon { width: 30px !important; height: 30px !important; border-radius: 9px !important; font-size: 15px !important; } .pend-footer, .agenda-footer, .news-footer, .avisos-footer, .distrato-footer { padding: 12px 20px !important; background: #fcfdfe !important; border-top: 1px solid var(--hx-line2) !important; font-size: 11.5px !important; color: var(--hx-ink3) !important; } /* Link "Ver todas" tinha ~15px de altura: era a própria linha de texto, sem padding nenhum. Vira alvo confortável no mouse e no toque. */ .pend-hd-link, .hx-link-btn { font: 500 12.5px 'DM Sans', sans-serif !important; color: var(--hx-brand) !important; text-decoration: none !important; display: inline-flex !important; align-items: center; gap: 4px; padding: 9px 11px !important; border-radius: 8px !important; border: 0 !important; background: transparent !important; cursor: pointer; white-space: nowrap; } .pend-hd-link:hover, .hx-link-btn:hover { background: var(--hx-tint) !important; } .hx-icon-mini { width: 34px !important; height: 34px !important; padding: 0 !important; border-radius: 8px !important; border: 1px solid var(--hx-line) !important; background: #fff !important; color: var(--hx-ink2) !important; display: inline-grid !important; place-items: center; font-size: 15px !important; cursor: pointer; } .hx-icon-mini:hover { background: var(--hx-tint) !important; border-color: var(--hx-brand) !important; color: var(--hx-brand) !important; } .pend-hd-count { font: 500 11px 'DM Sans', sans-serif !important; padding: 3px 9px !important; border-radius: 999px !important; background: var(--hx-dang-t) !important; color: var(--hx-dang) !important; } /* ═══════════════ PENDÊNCIAS — agrupadas por empresa ═══════════════ Antes eram 6 linhas quase idênticas repetindo o mesmo nome de empresa truncado, cortando exatamente no responsável — a informação que responde "isso é meu?". Agora o nome aparece inteiro uma vez, com o total do grupo. */ .hx-pgrp { display: flex; align-items: center; gap: 9px; padding: 11px 20px 5px; } .hx-pgrp + .hx-pgrp, .pend-item + .hx-pgrp { border-top: 1px solid var(--hx-line2); margin-top: 5px; } .hx-pgrp-n { font: 500 10.5px 'DM Sans', sans-serif; flex: none; color: var(--hx-dang); background: var(--hx-dang-t); padding: 2px 8px; border-radius: 999px; } .hx-pgrp-nome { font: 500 12.5px 'DM Sans', sans-serif; color: var(--hx-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .hx-pgrp-resp { font-size: 11px; color: var(--hx-ink3); flex: none; } .pend-item { padding: 8px 20px !important; gap: 12px !important; border-bottom: 0 !important; } .pend-item:hover { background: #fafbfd !important; } .pend-item-titulo { font-weight: 400 !important; color: var(--hx-ink2) !important; font-size: 13px !important; } .pend-item-empresa { display: none !important; } /* o nome subiu para o cabeçalho do grupo */ .pend-item-badge { display: none !important; } /* "Alta" em 100% dos itens não informa nada */ .pend-item-main { position: relative; padding-left: 13px; } .pend-item-main::before { content: ''; position: absolute; left: 0; top: 2px; bottom: 2px; width: 3px; border-radius: 2px; background: var(--hx-dang); } .pend-item-prazo-label { font-size: 11.5px !important; font-weight: 500 !important; } .pend-item-prazo-data { font-size: 10.5px !important; color: var(--hx-ink3) !important; } /* ═══════════════ AGENDA ═══════════════ */ .hx-ag-next { margin: 13px 20px; padding: 15px 16px; border-radius: 11px; background: var(--hx-tint); border: 1px solid #dbe7fe; } .hx-ag-when { display: flex; align-items: center; gap: 7px; font: 600 12px 'Sora', sans-serif; color: var(--hx-brand-7); } .hx-ag-what { font: 500 13.5px 'DM Sans', sans-serif; color: var(--hx-ink); margin-top: 6px; line-height: 1.35; } .hx-ag-rest { padding: 0 20px 8px; } .agenda-item { padding: 8px 0 !important; } .agenda-titulo { padding-right: 0 !important; font-size: 12.5px !important; } .agenda-hora-ini { font: 500 11.5px 'Sora', sans-serif !important; color: var(--hx-ink3) !important; } .agenda-hora-fim { font-size: 10.5px !important; color: var(--hx-deco) !important; } .hx-ag-none { display: flex; align-items: center; gap: 7px; padding: 10px 20px 14px; font-size: 12px; color: var(--hx-ink3); } .hx-ag-none i { color: var(--hx-ok); } /* ═══════════════ NOTÍCIAS ═══════════════ */ .news-item { padding: 12px 20px !important; border-bottom: 1px solid var(--hx-line2) !important; } .news-item:last-child { border-bottom: 0 !important; } .news-item-title { font-size: 13px !important; font-weight: 500 !important; color: var(--hx-ink) !important; line-height: 1.35 !important; } .news-item-meta { gap: 8px !important; margin-top: 6px !important; } .news-item-source { font: 500 10px 'DM Sans', sans-serif !important; padding: 2px 7px !important; border-radius: 5px !important; background: var(--hx-tint) !important; color: var(--hx-brand-7) !important; } .news-item-meta span:not(.news-item-source) { font-size: 11px !important; color: var(--hx-ink3) !important; } /* ═══════════════ ESTADOS VAZIOS — proporcionais ═══════════════ O vazio de "Novas Empresas" ocupava ~350px de altura (min-height 190 + chip de 54px) para dizer que nada aconteceu, e ainda esticava com o card irmão. */ .hub-content .avisos-empty, .hub-content .distrato-empty, .hub-content .agenda-empty { flex-direction: row !important; gap: 13px !important; min-height: 0 !important; padding: 16px 18px !important; margin: 13px 20px; border: 1px dashed var(--hx-line); border-radius: 11px; background: #fcfdfe; text-align: left !important; font-size: 12.5px !important; font-weight: 400 !important; color: var(--hx-ink3) !important; justify-content: flex-start !important; } .hub-content .avisos-empty::before, .hub-content .distrato-empty::before, .hub-content .agenda-empty::before { width: 38px !important; height: 38px !important; font-size: 17px !important; border-radius: 10px !important; flex: none; } /* ═══════════════ DISTRATO ═══════════════ */ .distrato-item { padding: 13px 20px !important; gap: 13px !important; } .distrato-nome { font-size: 13px !important; font-weight: 500 !important; color: var(--hx-ink) !important; } .distrato-datas { font-size: 11.5px !important; color: var(--hx-ink3) !important; margin-top: 3px !important; } .distrato-dias { font-family: 'Sora', sans-serif !important; font-size: 20px !important; font-weight: 600 !important; color: var(--hx-warn) !important; } .distrato-dias-label { font-size: 10px !important; color: var(--hx-ink3) !important; letter-spacing: .04em !important; } /* ═══════════════ SIDEBAR ═══════════════ */ .hub-sidebar { background: var(--hx-navy) !important; } .hx-grp-t { font: 500 10px 'DM Sans', sans-serif; letter-spacing: .10em; text-transform: uppercase; color: #9fb0ce; padding: 14px 20px 6px; display: flex; align-items: center; gap: 6px; } .hx-grp-t i { font-size: 12px; color: #f5b301; } .hx-atalhos { padding-bottom: 4px; } .hx-atalho { display: flex; align-items: center; gap: 11px; height: 36px; padding: 0 20px; margin: 0 8px; border-radius: 8px; color: #d7e0f0; text-decoration: none; font-size: 13px; } .hx-atalho i { font-size: 16px; width: 18px; text-align: center; color: #93a9d0; flex: none; } .hx-atalho span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hx-atalho:hover { background: rgba(255,255,255,.07); color: #fff; } /* Item sem permissão: legível e rotulado. A opacidade 0.4 dava 2,65:1 — ilegível, e lida como falha de carregamento em vez de regra de negócio. O texto que explicava vivia num title que pointer-events:none costuma impedir de aparecer. */ .hub-dept-group.hx-locked .hub-dept-toggle { opacity: 1 !important; } .hub-dept-group.hx-locked .hub-dept-toggle-label { color: #93a4c4 !important; } .hub-dept-group.hx-locked .hub-dept-toggle-icon { color: #4e6288 !important; } .hub-dept-group.hx-locked .hub-dept-toggle-count, .hub-dept-group.hx-locked .hub-dept-toggle-arrow { display: none !important; } .hx-sem-acesso { margin-left: auto; flex: none; font: 500 9px 'DM Sans', sans-serif; letter-spacing: .05em; text-transform: uppercase; color: #a9bad8; border: 1px solid rgba(255,255,255,.14); border-radius: 5px; padding: 2px 6px; } /* ═══════════════ RESPONSIVO ═══════════════ */ @media (max-width: 1100px) { .hx-search { max-width: 340px; } .hx-topbar .hub-clock { display: none; } } @media (max-width: 900px) { .hx-topbar { flex-wrap: wrap; gap: 12px; } .hx-search { order: 3; flex-basis: 100%; max-width: none; margin-left: 0; } .hub-kpi .hub-kpi-value { font-size: 30px !important; } } @media (max-width: 640px) { .hx-topbar .hub-greeting-sub { white-space: normal; } .hx-search-input { font-size: 16px !important; } /* evita o auto-zoom do iOS */ .hub-kpi { padding: 15px 16px !important; } } /* O título do card não quebra em duas linhas: badge e link cedem espaço antes. */ .pend-hd-count, .avisos-hd-mes, .distrato-hd-mes, .avisos-hd-count, .distrato-hd-count { flex: none !important; white-space: nowrap; } .pend-hd-link, .agenda-hd-btns { flex: none !important; } /* O card de Pendências é o mais importante da linha e era o mais estreito: o título não cabia ao lado do badge e do link. Proporção do mockup (1.35 / 1 / 1). */ @media (min-width: 1101px) { .hub-grid-3col { grid-template-columns: 1.35fr 1fr 1fr !important; } }