/* ========================================================================= Holerite - novo visual (design system Apolo) ------------------------------------------------------------------------- Carregado por view/holerite.php DEPOIS dos CSS antigos, para vencer os empates de especificidade com o Bootstrap 2. Todos os seletores usam o prefixo .hl-, portanto este arquivo nao afeta nenhuma tela que ainda use a marcacao antiga. Os componentes que disputam com o Bootstrap sao escritos como "body .hl-x" (especificidade 0,1,1) para vencer .btn (0,1,0) e input/a/button (0,0,1) sem precisar de !important. ========================================================================= */ /* ------------------------------------------------------------------------- TEMA Nenhuma cor é escrita direto nas regras: tudo passa por token, e o tema escuro só redefine os tokens. Se alguma cor voltar a ser fixa aqui embaixo, ela vaza para o tema escuro — a checagem (i) da seção 7 do REFATORACAO.md existe para pegar isso. O tema efetivo vem do atributo `data-hl-tema` no , escrito pelo script embutido no de view/holerite.php ANTES de qualquer pintura. O script resolve a preferência do sistema operacional em JavaScript, então aqui só existe UM bloco escuro — não é preciso repetir a paleta dentro de um @media (prefers-color-scheme: dark). A escolha manual fica em localStorage: zero requisição ao backend, o que mantém a regra da seção 5 ("só estilização, nada de requisição"). ------------------------------------------------------------------------- */ :root { /* marca */ --hl-primary: #0d71f0; --hl-primary-hover: #0b60cc; --hl-primary-fg: #ffffff; --hl-primary-suave: rgba(13, 113, 240, .1); --hl-primary-suave2: rgba(13, 113, 240, .05); --hl-primary-borda: rgba(13, 113, 240, .3); --hl-primary-ring: rgba(13, 113, 240, .35); --hl-primary-texto: rgba(13, 113, 240, .75); /* gradiente da marca: logo do login e faixa "Olá," do Início. Separado do --hl-primary porque no escuro o primário vira azul claro (#8ab4f8) e texto branco por cima dele seria ilegível. */ --hl-grad-de: #0d71f0; --hl-grad-ate: #0950a9; --hl-grad-fg: #ffffff; --hl-grad-fg-suave: rgba(255, 255, 255, .8); /* superfícies */ --hl-bg: #ffffff; --hl-fg: #252525; --hl-fg-suave: #3f3f3f; --hl-card: #ffffff; --hl-card-sutil: rgba(250, 250, 250, .7); --hl-border: #e5e5e5; --hl-muted-fg: #8a8a8a; --hl-muted-bg: #fafafa; --hl-sidebar-bg: #fafafa; --hl-sidebar-accent: #f0f0f0; /* status: ok / provento */ --hl-ok: #059669; --hl-ok-bg: #ecfdf5; --hl-ok-borda: #6ee7b7; --hl-ok-fg: #065f46; --hl-ok-suave: rgba(16, 185, 129, .1); --hl-dot-prov: #10b981; /* status: aviso */ --hl-aviso-bg: #fffbeb; --hl-aviso-borda: #fcd34d; --hl-aviso-fg: #78350f; --hl-aviso-suave: rgba(245, 158, 11, .12); --hl-aviso-icone: #b45309; /* status: erro / desconto */ --hl-desc: #d92d20; --hl-destructive: #d92d20; --hl-desc-suave: rgba(225, 29, 72, .09); --hl-dot-desc: #f43f5e; --hl-erro-bg: #fef2f2; --hl-erro-borda: #fca5a5; --hl-erro-borda-forte: #f04438; --hl-erro-fg: #b42318; /* sombras e véus */ --hl-sombra-1: 0 1px 2px rgba(16, 24, 40, .06); --hl-sombra-2: 0 6px 16px rgba(16, 24, 40, .08); --hl-sombra-3: 0 12px 32px rgba(16, 24, 40, .17); --hl-sombra-4: 0 20px 44px rgba(16, 24, 40, .24); --hl-backdrop: rgba(16, 24, 40, .5); --hl-backdrop-solido: #101828; /* medidas e tipografia — não mudam com o tema */ --hl-radius: 0.875rem; --hl-radius-lg: 1rem; --hl-sidebar-w: 16rem; --hl-header-h: 4rem; --hl-font: 'Inter Variable', Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --hl-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } /* Tema escuro. Paleta do protótipo, _ds_bundle.css:7359 — #121212 de fundo, #1e1e1e nos cards, #8ab4f8 de primário, #181818 na sidebar, #2a2a2a nas bordas. Os derivados (tintas, status, sombras) foram recalculados: sobre fundo escuro as tintas precisam de mais opacidade e os textos de status invertem — o escuro vai para o fundo e o claro para a letra. */ :root[data-hl-tema="escuro"] { --hl-primary: #8ab4f8; --hl-primary-hover: #a7c8fa; --hl-primary-fg: #0c0c0c; --hl-primary-suave: rgba(138, 180, 248, .14); --hl-primary-suave2: rgba(138, 180, 248, .08); --hl-primary-borda: rgba(138, 180, 248, .35); --hl-primary-ring: rgba(138, 180, 248, .45); --hl-primary-texto: rgba(138, 180, 248, .85); --hl-grad-de: #17457c; --hl-grad-ate: #0f2f57; --hl-grad-fg: #e8e8e8; --hl-grad-fg-suave: rgba(232, 232, 232, .72); --hl-bg: #121212; --hl-fg: #e8e8e8; --hl-fg-suave: #cfcfcf; --hl-card: #1e1e1e; --hl-card-sutil: rgba(255, 255, 255, .03); --hl-border: #2a2a2a; --hl-muted-fg: #a6a6a6; --hl-muted-bg: #242424; --hl-sidebar-bg: #181818; --hl-sidebar-accent: #262626; --hl-ok: #34d399; --hl-ok-bg: rgba(16, 185, 129, .12); --hl-ok-borda: rgba(16, 185, 129, .4); --hl-ok-fg: #6ee7b7; --hl-ok-suave: rgba(16, 185, 129, .14); --hl-dot-prov: #34d399; --hl-aviso-bg: rgba(245, 158, 11, .12); --hl-aviso-borda: rgba(245, 158, 11, .4); --hl-aviso-fg: #fcd34d; --hl-aviso-suave: rgba(245, 158, 11, .16); --hl-aviso-icone: #fbbf24; --hl-desc: #f87171; --hl-destructive: #f87171; --hl-desc-suave: rgba(244, 63, 94, .14); --hl-dot-desc: #fb7185; --hl-erro-bg: rgba(240, 68, 56, .12); --hl-erro-borda: rgba(240, 68, 56, .4); --hl-erro-borda-forte: #f97066; --hl-erro-fg: #fda29b; --hl-sombra-1: 0 1px 2px rgba(0, 0, 0, .5); --hl-sombra-2: 0 6px 16px rgba(0, 0, 0, .5); --hl-sombra-3: 0 12px 32px rgba(0, 0, 0, .55); --hl-sombra-4: 0 20px 44px rgba(0, 0, 0, .6); --hl-backdrop: rgba(0, 0, 0, .7); --hl-backdrop-solido: #000000; } /* ========================================================================= Regras globais do body herdadas do visual antigo, neutralizadas apenas nas telas ja migradas: holerite.css:9 border-top azul de 4px holerite.css:10 overflow-y: scroll (barra sempre visivel) bootstrap.css:140 padding-top: 60px (reserva do navbar fixo antigo) ========================================================================= */ body:has(.hl-login), body:has(.hl-shell) { border-top: 0; overflow-y: auto; padding-top: 0; /* holerite.css:8 tem "background-color: #FFFFFF !important" no body, e style.css:1 tem #F1F1F1. Com !important dos dois lados quem decide é a especificidade: body:has(.hl-x) é 0,1,1 contra 0,0,1 da regra antiga. Sem isto o tema escuro pintaria só os cards, sobre fundo branco. */ background-color: var(--hl-bg) !important; /* bootstrap.css:138 fixa color:#333 no body. Vale para o que fica fora dos wrappers .hl-*, como o holerite_rodape.php. */ color: var(--hl-fg); } body:has(.hl-shell) { padding-left: var(--hl-sidebar-w); } /* Rodapé legado (holerite_rodape.php, ainda incluído por holerite.php:62). Não foi redesenhado — item 6 da seção 11 —, mas no tema escuro ele ficava ilegível: texto #333 sobre #121212. Aqui só o mínimo para acompanhar. */ body:has(.hl-shell) .rodape { margin-top: 2rem; padding: 1rem 0; border-top: 1px solid var(--hl-border); font-family: var(--hl-font); color: var(--hl-muted-fg); } body:has(.hl-shell) .rodape p { color: var(--hl-muted-fg); font-size: 0.75rem; } /* ========================================================================= Base ========================================================================= */ .hl-login, .hl-shell, .hl-page { font-family: var(--hl-font); -webkit-font-smoothing: antialiased; color: var(--hl-fg); } .hl-login, .hl-login *, .hl-login *::before, .hl-login *::after, .hl-shell, .hl-shell *, .hl-shell *::before, .hl-shell *::after, .hl-page, .hl-page *, .hl-page *::before, .hl-page *::after { box-sizing: border-box; } /* Itens de grid/flex têm min-width:auto, isto é, não encolhem abaixo do min-content do próprio conteúdo. A tabela do espelho de ponto tem min-width:760px (rola dentro do card, como no protótipo), e sem os min-width:0 abaixo essa largura propaga para cima: o card fica mais largo que a tela e o overflow-x:hidden do holerite.css corta a direita. */ .hl-grid > *, .hl-detalhe, .hl-detalhe > *, .hl-doc, .hl-doc > *, .hl-home > *, .hl-home__baixo > * { min-width: 0; } .hl-scroll { min-width: 0; max-width: 100%; } /* Células de grade: sem isso o conteúdo empurra a coluna além da largura da tela. As colunas usam minmax(0, 1fr) — "1fr" puro equivale a minmax(auto, 1fr), e o mínimo "auto" é o min-content, então uma descrição longa estoura a grade. No mobile o holerite.css aplica overflow-x:hidden no body, então o estouro não virava barra de rolagem: era recorte à direita. */ .hl-tab__head > span, .hl-tab__row > span, .hl-tab__total > span, .hl-esp__head > span, .hl-esp__row > span { min-width: 0; overflow-wrap: break-word; } /* linha informativa dentro da tabela: valor exibido mas fora do total */ .hl-tab__row--info { background: var(--hl-muted-bg); } .hl-nota { font-size: 0.75rem; font-style: italic; color: var(--hl-muted-fg); white-space: nowrap; } @media (max-width: 640px) { /* "(valor não descontado)" é longo: no celular pode quebrar */ .hl-nota { white-space: normal; display: block; } } .hl-r { text-align: right; } .hl-muted { color: var(--hl-muted-fg); } .hl-forte { font-weight: 500; } .hl-mono { font-family: var(--hl-mono); font-size: 0.8125rem; } /* ========================================================================= Botoes ========================================================================= */ body .hl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; height: 2.5rem; margin: 0; padding: 0 1rem; font-family: inherit; font-size: 0.875rem; font-weight: 600; line-height: normal; border: 0; border-radius: var(--hl-radius-lg); cursor: pointer; white-space: nowrap; text-decoration: none; transition: background-color .15s ease, transform .05s ease; } body .hl-btn--sm { height: 2.25rem; padding: 0 0.875rem; font-weight: 500; } body .hl-btn--lg { height: 2.75rem; padding: 0 1.25rem; } body .hl-btn--block { width: 100%; } body .hl-btn--primary { background: var(--hl-primary); background-image: none; color: var(--hl-primary-fg); text-shadow: none; filter: none; box-shadow: var(--hl-sombra-1); } body .hl-btn--primary:hover { background: var(--hl-primary-hover); color: var(--hl-primary-fg); text-decoration: none; } body .hl-btn--ghost { border: 1px solid var(--hl-border); background: var(--hl-card); color: var(--hl-fg); } body .hl-btn--ghost:hover { background: var(--hl-muted-bg); text-decoration: none; } body .hl-btn:active { transform: scale(.99); } body .hl-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--hl-primary-ring); } body .hl-iconbtn { display: grid; place-items: center; height: 2rem; width: 2rem; flex-shrink: 0; border: 0; border-radius: 0.5rem; background: none; color: var(--hl-muted-fg); cursor: pointer; text-decoration: none; transition: background-color .15s ease, color .15s ease; } body .hl-iconbtn:hover { background: var(--hl-sidebar-accent); color: var(--hl-fg); text-decoration: none; } body .hl-avatar { display: grid; place-items: center; height: 2.25rem; width: 2.25rem; flex-shrink: 0; border-radius: 50%; background: var(--hl-primary-suave); color: var(--hl-primary); font-size: 0.75rem; font-weight: 700; line-height: 1; } body .hl-avatar--sm { height: 1.75rem; width: 1.75rem; font-size: 0.6875rem; } /* ========================================================================= LOGIN ========================================================================= */ .hl-login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem; background: var(--hl-bg); } .hl-login__card { width: 100%; max-width: 24rem; padding: 1.5rem 0; } .hl-login__brand { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.75rem; margin-bottom: 2rem; } .hl-login__logo { display: grid; place-items: center; height: 4rem; width: 4rem; border-radius: var(--hl-radius-lg); background: linear-gradient(135deg, var(--hl-grad-de), var(--hl-grad-ate)); color: var(--hl-grad-fg); font-size: 1.875rem; font-weight: 700; line-height: 1; box-shadow: var(--hl-sombra-1); } .hl-login__title { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; } .hl-login__subtitle { font-size: 0.875rem; color: var(--hl-muted-fg); margin-top: 0.125rem; } .hl-login__lead { margin: 0; text-align: center; font-size: 0.875rem; color: var(--hl-muted-fg); } .hl-login__form { margin: 2rem 0 0; } .hl-login__footer { margin: 2rem 0 0; text-align: center; font-size: 0.75rem; color: var(--hl-muted-fg); } .hl-login__forgot { display: flex; justify-content: flex-end; margin-bottom: 1rem; } body .hl-login__forgot a { font-size: 0.875rem; font-weight: 500; color: var(--hl-primary); cursor: pointer; text-decoration: none; } body .hl-login__forgot a:hover { color: var(--hl-primary-hover); text-decoration: none; } /* campos */ .hl-field { margin-bottom: 1rem; } body .hl-label { display: block; margin-bottom: 0.375rem; font-size: 0.875rem; font-weight: 500; line-height: 1.4; color: var(--hl-fg); } body .hl-input { display: block; width: 100%; height: 2.75rem; /* margin/line-height explicitos: bootstrap.css:636 aplica margin-bottom:9px e line-height:18px em todo input */ margin: 0; padding: 0 0.875rem; font-family: inherit; font-size: 0.875rem; line-height: normal; color: var(--hl-fg); background: var(--hl-card); border: 1px solid var(--hl-border); border-radius: var(--hl-radius); outline: none; box-shadow: none; transition: box-shadow .15s ease, border-color .15s ease; } body .hl-input::placeholder { color: var(--hl-muted-fg); } body .hl-input:focus { border-color: var(--hl-primary); box-shadow: 0 0 0 2px var(--hl-primary-ring); } /* type=number preservado para nao alterar o comportamento; spinners escondidos */ body .hl-input::-webkit-outer-spin-button, body .hl-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } body .hl-input[type=number] { -moz-appearance: textfield; appearance: textfield; } /* mensagens devolvidas pelo servidor (.senhaincorreta / .esquecisenha) */ body .hl-msg { display: block; margin: 0 0 0.5rem; font-size: 0.8125rem; line-height: 1.4; font-weight: 500; } body .hl-msg:empty { display: none; } /* holerite.css:17 e :23 fixam height:25px em .esquecisenha/.senhaincorreta, o que cortaria mensagem de duas linhas no layout novo */ body .hl-msg.senhaincorreta, body .hl-msg.esquecisenha { height: auto; margin-left: 0; margin-right: 0; } body .hl-msg--error { color: var(--hl-destructive); } body .hl-msg--info { color: var(--hl-primary); } @media (max-width: 480px) { .hl-login { padding: 1.25rem; align-items: flex-start; } .hl-login__card { padding-top: 2.5rem; } } /* ========================================================================= SHELL: sidebar + header ========================================================================= */ .hl-sidebar { position: fixed; top: 0; bottom: 0; left: 0; z-index: 1030; display: flex; flex-direction: column; width: var(--hl-sidebar-w); background: var(--hl-sidebar-bg); border-right: 1px solid var(--hl-border); color: var(--hl-fg); } .hl-sidebar__brand { display: flex; align-items: center; gap: 0.75rem; height: var(--hl-header-h); padding: 0 1.25rem; border-bottom: 1px solid var(--hl-border); flex-shrink: 0; } .hl-sidebar__logo { display: grid; place-items: center; height: 2.25rem; width: 2.25rem; flex-shrink: 0; border-radius: 0.75rem; background: var(--hl-primary); color: var(--hl-primary-fg); font-size: 0.9375rem; font-weight: 700; line-height: 1; } .hl-sidebar__brandtext { min-width: 0; flex: 1; } .hl-sidebar__brandname { font-size: 0.875rem; font-weight: 700; line-height: 1; } .hl-sidebar__brandsub { font-size: 0.6875rem; color: var(--hl-muted-fg); margin-top: 0.25rem; } .hl-sidebar__close { display: none; padding: 0; border: 0; background: none; color: var(--hl-muted-fg); cursor: pointer; } .hl-nav { flex: 1; padding: 0.75rem; overflow-y: auto; } body .hl-nav__item { display: flex; align-items: center; gap: 0.75rem; width: 100%; margin-bottom: 0.25rem; padding: 0.5rem 0.75rem; border-radius: 0.5rem; font-size: 0.875rem; font-weight: 500; line-height: 1.4; color: var(--hl-muted-fg); text-decoration: none; cursor: pointer; transition: background-color .15s ease, color .15s ease; } body .hl-nav__item svg { flex-shrink: 0; } body .hl-nav__item:hover { background: var(--hl-sidebar-accent); color: var(--hl-fg); text-decoration: none; } body .hl-nav__item--ativo, body .hl-nav__item--ativo:hover { background: var(--hl-sidebar-accent); color: var(--hl-fg); font-weight: 600; } .hl-sidebar__user { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; border-top: 1px solid var(--hl-border); flex-shrink: 0; } .hl-sidebar__userinfo { min-width: 0; flex: 1; } .hl-sidebar__username { font-size: 0.875rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hl-sidebar__usermeta { font-size: 0.6875rem; color: var(--hl-muted-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hl-header { position: sticky; top: 0; z-index: 1020; display: flex; align-items: center; gap: 1rem; height: var(--hl-header-h); padding: 0 1.25rem; background: var(--hl-bg); border-bottom: 1px solid var(--hl-border); } .hl-header__burger { display: none; padding: 0; border: 0; background: none; color: var(--hl-fg); cursor: pointer; } .hl-header__titles { min-width: 0; flex: 1; } body .hl-header__title { margin: 0; font-size: 1.125rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; color: var(--hl-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body .hl-header__sub { margin: 0; font-size: 0.75rem; color: var(--hl-muted-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hl-header__user { display: flex; align-items: center; gap: 0.625rem; padding: 0.25rem 0.75rem 0.25rem 0.25rem; border: 1px solid var(--hl-border); border-radius: 0.75rem; background: var(--hl-bg); } .hl-header__username { font-size: 0.875rem; font-weight: 500; color: var(--hl-fg); } .hl-header__exit { display: none; } /* Botão de tema. O protótipo (linha 166) o diferencia dos demais ícones do header com borda e fundo de card — h-9 w-9 rounded-xl border bg-card. */ body .hl-tema { height: 2.25rem; width: 2.25rem; border: 1px solid var(--hl-border); border-radius: 0.75rem; background: var(--hl-card); } body .hl-tema:hover { background: var(--hl-sidebar-accent); color: var(--hl-fg); } /* Mostra o destino do clique, não o estado atual: lua enquanto está claro, sol enquanto está escuro (protótipo 168 e 171). */ .hl-tema__sol { display: none; } :root[data-hl-tema="escuro"] .hl-tema__sol { display: block; } :root[data-hl-tema="escuro"] .hl-tema__lua { display: none; } .hl-overlay { display: none; position: fixed; inset: 0; z-index: 1025; background: var(--hl-backdrop); } @media (max-width: 767px) { body:has(.hl-shell) { padding-left: 0; } .hl-sidebar { transform: translateX(-100%); transition: transform .2s ease; box-shadow: var(--hl-sombra-3); } .hl-shell--aberto .hl-sidebar { transform: translateX(0); } .hl-shell--aberto .hl-overlay { display: block; } .hl-sidebar__close, .hl-header__burger { display: block; } .hl-header__user { display: none; } .hl-header__exit { display: grid; } } /* ========================================================================= PAGINAS DE CONTEUDO ========================================================================= */ .hl-page { padding: 1.5rem 1.25rem 3rem; } @media (min-width: 640px) { .hl-page { padding: 1.5rem 2rem 3rem; } } .hl-grid { display: grid; gap: 1.5rem; } @media (min-width: 1024px) { .hl-grid { grid-template-columns: 320px minmax(0, 1fr); align-items: start; } } .hl-detalhe > * + * { margin-top: 1rem; } /* cards */ body .hl-card { border: 1px solid var(--hl-border); border-radius: var(--hl-radius-lg); background: var(--hl-card); overflow: hidden; } .hl-card__head { padding: 0.75rem 1rem; border-bottom: 1px solid var(--hl-border); font-size: 0.875rem; font-weight: 600; } /* lista de competencias */ .hl-comp__list { display: flex; flex-direction: column; } body .hl-comp__item { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.75rem 1rem; border-top: 1px solid var(--hl-border); color: var(--hl-fg); text-decoration: none; transition: background-color .15s ease; } .hl-comp__item:first-child { border-top: 0; } body .hl-comp__item:hover { background: var(--hl-muted-bg); color: var(--hl-fg); text-decoration: none; } body .hl-comp__item--sel, body .hl-comp__item--sel:hover { background: var(--hl-primary-suave); } .hl-comp__info { min-width: 0; } .hl-comp__mes { font-size: 0.875rem; font-weight: 600; } .hl-comp__mes span { color: var(--hl-muted-fg); font-weight: 400; } .hl-comp__tipo { font-size: 0.6875rem; color: var(--hl-muted-fg); margin-top: 0.125rem; } /* coluna direita: valor em cima, flag de confirmação embaixo */ .hl-comp__dir { display: flex; flex-direction: column; align-items: flex-end; gap: 0.25rem; flex-shrink: 0; } .hl-comp__valor { font-size: 0.875rem; font-weight: 500; white-space: nowrap; } /* Flag de confirmação na lista de competências (Holerite e Ponto). O dado sai do próprio DadosGrid, que já é "select *" — nenhuma consulta nova. Confirmado é == 1, igual ao que o