/* Sistema visual do painel — HoraID.
==================================
## O que este produto é, e por que ele não parece um painel qualquer
É um relógio de ponto. A unidade de tudo aqui é a HORA, e o artefato que ele
substitui é o cartão de ponto de papel: uma grade de dias com horários
carimbados. Duas decisões saem daí e mandam no resto:
1. **O número é o conteúdo.** Toda hora, todo total, todo saldo usa figura
tabular. Número que muda de largura entre linhas é o que faz uma tabela de
ponto parecer planilha velha.
2. **A tabela é a heroína, não o cartão.** A versão anterior picava tudo em
cartões arredondados iguais, com a mesma sombra cinza embaixo de cada um.
É o visual padrão de qualquer painel gerado hoje, e ele apaga a
hierarquia: se tudo flutua igual, nada é mais importante que nada.
## Por que a base é neutra — e por que ela agora é creme
**O acento pertence ao cliente.** A cor da empresa entra por `--acento` e
pode ser qualquer coisa — azul da metalúrgica, verde do hotel. Um desenho que
dependesse de uma cor específica quebraria no segundo cliente. Então tudo se
sustenta em tinta, papel e fio; o acento aparece pouco, e sempre onde
significa "aqui você age".
Em 19/09/2026 o papel passou de branco azulado a **creme #f1efe8**, e o
acento padrão de teal a **laranja #ff4b1f**: é a comunicação visual do site
horaid.com.br, para que painel e site sejam reconhecidamente o mesmo
produto. O que NÃO mudou é o mecanismo: a empresa que tem cor própria
continua sobrescrevendo o acento. O laranja é o padrão do HoraID, não uma
imposição — hoje a Italínea tem #2A78D6 gravado no banco e continua azul.
Cor com significado fixo (verde registrado, âmbar atenção, vermelho não deu)
é a exceção, e são os tons já validados para daltonismo e contraste. Eles
escureceram um pouco para manter o contraste sobre creme, mas continuam
sendo as mesmas famílias. `--info` segue AZUL de propósito — é a única cor
fria que sobrou, e é o que separa "informação" de "destaque" agora que o
destaque é laranja. A barra do gráfico (`--serie-1`) virou grafite pelo
mesmo motivo: se ela fosse laranja, o dia em destaque deixaria de se
distinguir dos outros.
## Tipografia
**Helvetica Neue**, com Arial como queda — a mesma do site. Substituiu a IBM
Plex Sans, que estava aqui pelos numerais tabulares. A troca só foi feita
depois de medir: Helvetica Neue, Helvetica e Arial têm os dez dígitos com a
mesma largura de avanço (8,896px a 16px, do 0 ao 9, medido no canvas), então
a coluna de hora continua sem dançar. O painel também deixou de depender do
Google Fonts para abrir.
## O que NÃO voltar a fazer
Eram os vícios da versão anterior, e são exatamente o que fazia parecer
antigo: rótulo em CAIXA ALTA espaçada em cima de cada bloco, meta-informação
costurada com ponto do meio, a mesma sombra cinza embaixo de tudo, e o mesmo
raio de canto em qualquer coisa independentemente da hierarquia. */
/* ==================================================================== tokens */
:root {
color-scheme: light;
/* Papel creme, o mesmo do site horaid.com.br. A versão anterior usava branco
azulado por ser "documento de trabalho lido sob luz de galpão" — o creme
mantém essa leitura de papel e passa a ser a MARCA, que é o que faz painel
e site parecerem o mesmo produto. A folha é mais clara que o plano: é
assim que a tabela continua sendo uma superfície e não um buraco. */
--plano: #f1efe8;
--superficie: #faf9f5;
--superficie-2: #f5f3ec;
--elevado: #fdfcfa;
/* Tinta quase preta em vez de azul-ardósia: 16,9:1 sobre o creme. Contraste
alto é o que sustenta um desenho de poucas cores e sem sombra. */
--tinta: #0b0d0d;
--tinta-2: #4b4a45;
--tinta-3: #69685f;
--linha: #ddd8ca;
--linha-forte: #c3bcab;
/* O acento continua sendo o único token que o cliente escolhe — o laranja
#ff4b1f é o PADRÃO do HoraID, não uma imposição a quem tem cor própria.
Os três derivados existem por contraste medido, não por gosto:
· --acento fundo de botão, barra, marcador — a cor pura da marca
· --acento-forte a mesma cor escurecida, para TEXTO sobre papel.
O laranja puro dá 2,91:1 sobre o creme e REPROVA na
WCAG; escurecido a 72% dá 4,81:1 e passa. Num site
institucional 2,91 passaria (título grande, pouco
texto); aqui o acento vira hora em tabela, lida o dia
inteiro.
· --sobre-acento o que se escreve EM CIMA do acento. Tinta, não branco:
branco sobre laranja é 3,34:1 e reprova; tinta é 5,83:1. */
--acento: #ff4b1f;
--acento-forte: color-mix(in srgb, var(--acento) 72%, #1a0600 28%);
--acento-fraco: color-mix(in srgb, var(--acento) 12%, #ffffff 88%);
/* O que se escreve EM CIMA do acento cheio — é o fundo do botão primário.
Sem este token definido aqui, `color: var(--sobre-acento)` vira inválido
e o botão HERDA a cor do em volta: tijolo sobre laranja, 1,66:1. */
--acento-botao: var(--acento);
--sobre-acento: #17120f;
/* Séries do gráfico. A barra principal virou GRAFITE, não laranja e não
azul: laranja brigaria com o acento (o dia em destaque também é laranja) e
o azul era a única mancha fria numa tela de papel creme. Grafite sobre
creme é o gráfico do site — barra de tinta, uma só em destaque.
A `serie-2` era #eb6834, que agora seria confundida com a marca; virou o
azul que sobrou, e ela marca "dia em andamento", onde azul lê como
informação, não como alerta. */
--serie-1: #3a352e;
--serie-2: #2a78d6;
--serie-3: #1b8f68;
/* Significado fixo, e por isso NÃO viram laranja: verde é registrado, âmbar
é atenção, vermelho é não deu. São os tons já validados para daltonismo.
Só os fundos mudaram — misturados com o creme em vez do branco azulado,
senão cada tarja abria um retângulo frio no meio do papel. */
--bom: #0f7d47;
--bom-bg: #e4efe3;
--aviso: #96620a;
--aviso-bg: #f6eeda;
--serio: #b8501f;
--serio-bg: #f8e9de;
--critico: #c1332f;
--critico-bg:#f8e6e0;
--info: #2a78d6;
--info-bg: #e6edf3;
--neutro-bg:#e9e6dc;
/* Elevação quase ausente: o que separa é o fio, não a sombra. A sombra fica
guardada para o que realmente flutua — gaveta, aviso, dica. */
--sombra-1: 0 1px 1px rgba(16, 24, 40, .04);
--sombra-2: 0 1px 2px rgba(16, 24, 40, .06), 0 10px 26px rgba(16, 24, 40, .08);
--sombra-3: 0 24px 60px rgba(16, 24, 40, .24);
/* Raio com hierarquia: folha tem canto discreto, pílula é pílula. Um raio só
para tudo achata a leitura. */
/* Canto mais reto que antes: o site é de fio e aresta, não de cartão.
A hierarquia entre os raios continua — o que mudou foi a escala. */
--r-1: 4px; --r-2: 7px; --r-3: 10px; --r-4: 16px;
--lateral: 236px;
/* A fonte do site. Conferi a premissa antes de trocar: Helvetica Neue,
Helvetica e Arial têm os dez dígitos com a MESMA largura de avanço
(medido no canvas — 8,896px a 16px, do 0 ao 9), então a coluna de hora
não dança, que era a razão de ser da IBM Plex aqui. De quebra o painel
deixa de depender do Google Fonts para abrir. */
--fonte: 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
}
/* Escuro escolhido, não invertido: ardósia profunda, com a folha um degrau
acima do plano para a tabela continuar sendo uma superfície. */
@media (prefers-color-scheme: dark) {
:root:not([data-tema="claro"]) {
color-scheme: dark;
/* Escuro quente, não invertido: o par do creme é carvão amarronzado, não
ardósia azul. O laranja da marca sobrevive intacto aqui — #ff4b1f dá
5,68:1 sobre este fundo, então o escuro não precisa de outra cor de
marca, ao contrário do claro. */
--plano: #12100e;
--superficie: #1b1815;
--superficie-2: #211d19;
--elevado: #262220;
--tinta: #f1efe8;
--tinta-2: #b0aaa0;
--tinta-3: #8b8578;
--linha: #2e2a25;
--linha-forte: #453f38;
--acento: #ff4b1f;
--acento-forte: color-mix(in srgb, var(--acento) 78%, #ffffff 22%);
--acento-fraco: color-mix(in srgb, var(--acento) 20%, #12100e 80%);
--acento-botao: var(--acento);
--sobre-acento: #17120f;
--bom: #4bc07d; --bom-bg: #16301f;
--aviso: #dda43f; --aviso-bg: #33270e;
--serio: #e0845c; --serio-bg: #331d13;
--critico: #ef7272; --critico-bg:#341617;
--info: #5c9bee; --info-bg: #17222e;
--info-texto: #8fbcf5;
--neutro-bg:#262220;
--serie-1: #cfc8bd; --serie-2: #5c9bee; --serie-3: #4bc07d;
--sombra-1: 0 1px 1px rgba(0,0,0,.35);
--sombra-2: 0 1px 2px rgba(0,0,0,.45), 0 10px 26px rgba(0,0,0,.4);
--sombra-3: 0 24px 60px rgba(0,0,0,.65);
}
}
:root[data-tema="escuro"] {
color-scheme: dark;
--plano: #12100e;
--superficie: #1b1815;
--superficie-2: #211d19;
--elevado: #262220;
--tinta: #f1efe8;
--tinta-2: #b0aaa0;
--tinta-3: #8b8578;
--linha: #2e2a25;
--linha-forte: #453f38;
--acento: #ff4b1f;
--acento-forte: color-mix(in srgb, var(--acento) 78%, #ffffff 22%);
--acento-fraco: color-mix(in srgb, var(--acento) 20%, #12100e 80%);
--acento-botao: var(--acento);
--sobre-acento: #17120f;
--bom: #4bc07d; --bom-bg: #16301f;
--aviso: #dda43f; --aviso-bg: #33270e;
--serio: #e0845c; --serio-bg: #331d13;
--critico: #ef7272; --critico-bg:#341617;
--info: #5c9bee; --info-bg: #17222e;
--neutro-bg:#262220;
--serie-1: #cfc8bd; --serie-2: #5c9bee; --serie-3: #4bc07d;
--sombra-1: 0 1px 1px rgba(0,0,0,.35);
--sombra-2: 0 1px 2px rgba(0,0,0,.45), 0 10px 26px rgba(0,0,0,.4);
--sombra-3: 0 24px 60px rgba(0,0,0,.65);
}
/* ====================================================================== base */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
font-family: var(--fonte);
background: var(--plano);
color: var(--tinta);
font-size: 15px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
/* Figura tabular no documento inteiro: coluna de hora não pode dançar. */
font-variant-numeric: tabular-nums;
}
.oculto { display: none !important; }
/* O rodapé do menu responde "de quem é esta tela".
Com o menu rolado, o nome da empresa lá de cima já saiu de vista — e para
quem entra na empresa de um cliente para dar suporte, essa é a informação
que não pode sumir. Nome comprido corta com reticências em vez de empurrar
os botões para fora. */
.rodape-empresa {
margin-bottom: 8px;
font-weight: 650; color: var(--tinta); font-size: .92rem; line-height: 1.3;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* O aperto é o que a grotesca do site tem de mais reconhecível: peso cheio e
entreletra negativa nos títulos, corpo normal no texto. Em Helvetica o peso
600 não existe como desenho próprio (vira 700 sintetizado ou fica fino
demais), então título é 700 de verdade. */
h1, h2, h3, h4 { font-weight: 700; letter-spacing: -.03em; line-height: 1.14; }
h1 { font-size: 1.75rem; letter-spacing: -.038em; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.04rem; letter-spacing: -.022em; }
h4 { font-size: .92rem; letter-spacing: -.015em; }
p { text-wrap: pretty; }
a { color: var(--acento-forte); text-decoration: none; }
a:hover { text-decoration: underline; }
svg { display: block; }
/* Foco visível só para quem navega por teclado: o anel em cima do clique de
mouse polui sem ajudar ninguém. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
outline: 2px solid var(--acento);
outline-offset: 2px;
}
label { display: block; font-size: .8rem; font-weight: 500; color: var(--tinta-2); margin-bottom: 5px; }
input, select, textarea {
width: 100%;
font: inherit;
font-variant-numeric: inherit;
color: var(--tinta);
background: var(--superficie);
border: 1px solid var(--linha-forte);
border-radius: var(--r-1);
padding: 9px 11px;
min-height: 40px;
transition: border-color .12s, box-shadow .12s;
}
select { cursor: pointer; }
input:focus, select:focus, textarea:focus {
outline: none;
border-color: var(--acento);
box-shadow: 0 0 0 3px var(--acento-fraco);
}
input[type=checkbox], input[type=radio] {
width: auto; min-height: 0; padding: 0;
inline-size: 17px; block-size: 17px;
accent-color: var(--acento);
}
/* A caixa tem 17px, mas o alvo de toque não pode ter: no telefone, 17px é
menor que a ponta do dedo. O rótulo inteiro vira o alvo. */
label:has(> input[type=checkbox]), label:has(> input[type=radio]) {
display: flex; align-items: center; gap: 8px;
min-height: 38px; margin-bottom: 0;
font-weight: 500; color: var(--tinta); cursor: pointer;
}
input::placeholder { color: var(--tinta-3); }
button {
font: inherit; font-weight: 500;
color: var(--tinta);
background: var(--superficie);
border: 1px solid var(--linha-forte);
border-radius: var(--r-1);
padding: 9px 15px;
min-height: 40px;
cursor: pointer;
transition: background .12s, border-color .12s, transform .06s;
}
button:hover { background: var(--superficie-2); border-color: var(--tinta-3); }
button:active { transform: translateY(1px); }
/* O fundo é o acento CHEIO; quem garante a leitura é a cor de cima.
*
* Até 19/09/2026 o fundo era o acento derivado (escurecido), porque o cliente
* pode escolher um pastel e texto branco por cima sumiria. O problema é que
* isso apagava a marca: o laranja #ff4b1f virava um tijolo #bf3816 justamente
* no elemento mais visível da tela. A troca foi de lado — o fundo passou a ser
* a cor cheia e o TEXTO passou a ser calculado contra ela (`--sobre-acento`,
* que o app.js recalcula para a cor de cada empresa). Com o laranja padrão dá
* tinta sobre laranja, 5,83:1; com um azul escuro dá branco. */
/* `.primario` sem qualificar a tag: em algumas telas o botão é um , e aí a
regra genérica de link pintava o texto de acento-forte sobre o fundo de
acento — 1,66:1, ou seja, tijolo sobre laranja. */
.primario {
background: var(--acento-botao); color: var(--sobre-acento);
border-color: transparent; font-weight: 700; letter-spacing: -.01em;
}
.primario:hover {
background: color-mix(in srgb, var(--acento-botao) 88%, var(--tinta) 12%);
border-color: transparent;
}
button.fantasma { background: transparent; border-color: var(--linha); }
button.fantasma:hover { background: var(--superficie-2); }
button.perigo { color: var(--critico); border-color: color-mix(in srgb, var(--critico) 35%, transparent); }
button.perigo:hover { background: var(--critico-bg); border-color: var(--critico); }
button.link {
background: none; border: none; padding: 2px 4px; min-height: 0;
color: var(--acento-forte); font-weight: 500; font-size: .86rem;
}
button.link:hover { text-decoration: underline; background: none; }
button[disabled] { opacity: .5; cursor: not-allowed; }
.botoes { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.erro { color: var(--critico); font-size: .88rem; min-height: 1.2em; }
/* Movimento respeita quem pediu para não ter movimento. */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
/* ===================================================================== login */
.tela-login { min-height: 100dvh; display: grid; grid-template-columns: 1fr; background: var(--plano); }
/* Metade escura na tela de entrar: é o contraste que o site faz entre a seção
de papel e a seção de tinta. Tinta lisa, sem degradê colorido — o degradê
azul era o que mais denunciava a identidade antiga. */
.login-arte {
display: none; position: relative; overflow: hidden;
background: #0b0d0d;
color: #f1efe8;
}
.login-arte .conteudo {
position: relative; z-index: 2; padding: 56px;
display: flex; flex-direction: column; justify-content: space-between; height: 100%;
}
.login-arte h2 { font-size: clamp(2rem, 3vw, 2.9rem); max-width: 15ch; letter-spacing: -.045em; font-weight: 700; line-height: 1.02; }
.login-arte p { opacity: .82; max-width: 34ch; margin-top: 14px; }
.login-arte .marca { display: flex; align-items: center; gap: 11px; font-weight: 600; font-size: 1.05rem; }
/* A ilustração foi desenhada para um azul-marinho claro; sobre a tinta lisa
ela precisa de mais presença, senão o creme vira cinza e o laranja some. */
.login-arte svg.ilustra { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; opacity: .82; }
.login-forma { display: grid; place-items: center; padding: 28px 20px; }
.login-caixa { width: min(380px, 100%); }
.login-caixa .topo { display: flex; align-items: center; gap: 11px; margin-bottom: 30px; }
.login-caixa .topo .nome { font-weight: 600; font-size: 1.05rem; }
.login-caixa h1 { margin-bottom: 6px; font-size: 2.1rem; letter-spacing: -.045em; }
.login-caixa .sub { color: var(--tinta-2); margin-bottom: 26px; font-size: .92rem; }
.campo-senha { position: relative; display: block; }
.campo-senha input { padding-right: 44px; }
.campo-senha .olho {
position: absolute; right: 4px; top: 50%; translate: 0 -50%;
background: none; border: none; min-height: 34px; padding: 6px 8px;
color: var(--tinta-3);
}
.campo-senha .olho:hover { color: var(--tinta); background: none; border-color: transparent; }
.lembrar { display: flex; align-items: center; gap: 8px; margin: 14px 0 20px; }
.lembrar label { margin: 0; font-size: .86rem; color: var(--tinta-2); font-weight: 400; }
.login-caixa button.primario { width: 100%; padding: 13px; font-size: 1rem; }
.login-rodape { margin-top: 26px; font-size: .78rem; color: var(--tinta-3); text-align: center; }
@media (min-width: 900px) {
.tela-login { grid-template-columns: 1.05fr 1fr; }
.login-arte { display: block; }
.login-forma { padding: 40px; }
}
/* ========================================================= moldura do painel */
.topo-app {
position: sticky; top: 0; z-index: 40;
display: flex; align-items: center; gap: 10px;
padding: 10px 16px;
background: color-mix(in srgb, var(--superficie) 88%, transparent);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--linha);
}
.topo-app .marca { display: flex; align-items: center; gap: 9px; font-weight: 600; letter-spacing: -.02em; }
.topo-app .espaco { flex: 1; }
.menu-botao {
background: none; border: none; padding: 8px; min-height: 40px; min-width: 40px;
color: var(--tinta-2); display: grid; place-items: center;
}
.menu-botao:hover { color: var(--tinta); background: var(--superficie-2); border-color: transparent; }
.logo { display: none; }
.logo svg { width: 26px; height: 26px; }
/* A lateral é moldura, não conteúdo: superfície com fio, sem sombra. Ela some
do olhar depois do primeiro minuto de uso, que é o certo. */
.lateral {
position: fixed; z-index: 45; inset: 0 auto 0 0; width: min(272px, 84vw);
background: var(--superficie);
border-right: 1px solid var(--linha);
display: flex; flex-direction: column; padding: 8px 10px;
transform: translateX(-100%); transition: transform .22s ease;
overflow-y: auto;
}
body.menu-aberto .lateral { transform: none; box-shadow: var(--sombra-3); }
/* Sem CAIXA ALTA espaçada — era o rótulo de enfeite mais óbvio do painel
antigo. Aqui o grupo é uma palavra pequena e apagada: organiza sem gritar. */
.lateral .grupo {
font-size: .74rem; font-weight: 600; color: var(--tinta-3);
padding: 16px 12px 6px;
}
.lateral a {
display: flex; align-items: center; gap: 11px; padding: 9px 12px;
border-radius: var(--r-1); color: var(--tinta-2); font-weight: 500; font-size: .92rem;
position: relative;
}
.lateral a:hover { background: var(--superficie-2); color: var(--tinta); text-decoration: none; }
.lateral a.ativo { color: var(--acento-forte); font-weight: 600; background: var(--acento-fraco); }
/* Fio à esquerda em vez de pílula cheia: a pílula competia com o botão de
ação, que é quem deve puxar o olho. */
.lateral a.ativo::before {
content: ''; position: absolute; left: -10px; top: 6px; bottom: 6px;
width: 3px; border-radius: 0 3px 3px 0; background: var(--acento);
}
.lateral a svg { width: 18px; height: 18px; flex: none; }
.lateral .rodape {
margin-top: auto; padding: 14px 12px 10px; border-top: 1px solid var(--linha);
font-size: .82rem; color: var(--tinta-2);
}
.cortina {
position: fixed; inset: 0; z-index: 44; background: rgba(16, 24, 40, .45);
opacity: 0; pointer-events: none; transition: opacity .2s;
}
body.menu-aberto .cortina { opacity: 1; pointer-events: auto; }
main { padding: 18px 16px 96px; max-width: 1400px; }
/* Barra inferior no telefone: o polegar alcança, o menu lateral não. */
.barra-baixo {
position: fixed; z-index: 42; inset: auto 0 0 0;
display: flex; justify-content: space-around;
background: color-mix(in srgb, var(--superficie) 92%, transparent);
backdrop-filter: blur(12px);
border-top: 1px solid var(--linha);
padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
}
.barra-baixo a {
display: flex; flex-direction: column; align-items: center; gap: 3px;
padding: 7px 10px; border-radius: var(--r-1);
color: var(--tinta-3); font-size: .68rem; font-weight: 500; min-width: 62px;
}
.barra-baixo a svg { width: 21px; height: 21px; }
.barra-baixo a.ativo { color: var(--acento-forte); }
.barra-baixo a:hover { text-decoration: none; color: var(--tinta); }
@media (min-width: 1000px) {
.lateral { transform: none; top: 0; padding-top: 16px; width: var(--lateral); }
.cortina, .menu-botao, .barra-baixo { display: none; }
.topo-app { display: none; }
main { padding: 32px 36px 60px; margin-left: var(--lateral); }
}
/* ========================================================= cabeçalho de tela */
.cabecalho-tela { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.cabecalho-tela .titulo { flex: 1 1 260px; min-width: 0; }
.cabecalho-tela .dica { margin-top: 5px; }
.dica { color: var(--tinta-2); font-size: .86rem; }
/* ===================================================================== folha */
/* `.cartao` era um cartão flutuante; virou FOLHA: superfície com fio e sombra
quase nenhuma. É o que tira a cara de mosaico e devolve hierarquia. */
.cartao {
background: var(--superficie);
border: 1px solid var(--linha);
border-radius: var(--r-3);
padding: 18px;
box-shadow: var(--sombra-1);
margin-bottom: 16px;
}
.cartao > .cabeca { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: -2px 0 14px; }
.cartao > .cabeca h3 { flex: 1 1 auto; }
.cartao > h3:first-child { margin-bottom: 14px; }
.cartao.plano { box-shadow: none; background: transparent; border-style: dashed; }
.grade { display: grid; gap: 16px; }
.grade.dois, .grade.tres { grid-template-columns: 1fr; }
@media (min-width: 860px) {
.grade.dois { grid-template-columns: 1fr 1fr; }
.grade.tres { grid-template-columns: repeat(3, 1fr); }
.grade.dois.assimetrica { grid-template-columns: 1.6fr 1fr; }
}
.grade-2 { display: grid; gap: 0 16px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .grade-2 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } }
/* ==================================================================== placas */
/* Eram seis cartões arredondados flutuando lado a lado — o kit de painel
genérico. Agora é UMA faixa contínua dividida por fios: um objeto na tela,
não seis. O número manda; o rótulo serve o número. */
.placas {
display: grid; grid-template-columns: repeat(2, 1fr);
background: var(--superficie);
border: 1px solid var(--linha);
border-radius: var(--r-3);
overflow: hidden;
margin-bottom: 16px;
box-shadow: var(--sombra-1);
}
@media (min-width: 720px) { .placas { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1180px) { .placas.seis { grid-template-columns: repeat(6, 1fr); } }
.placa {
padding: 16px 18px;
border-inline-end: 1px solid var(--linha);
border-block-end: 1px solid var(--linha);
min-width: 0;
}
.placa .rot {
display: flex; align-items: center; gap: 6px;
font-size: .76rem; font-weight: 500; color: var(--tinta-2); margin-bottom: 8px;
}
.placa .rot svg { width: 13px; height: 13px; opacity: .7; flex: none; }
/* O número encolhe quando as placas ficam estreitas. Com seis placas numa
tela de 1440px cada uma fica com ~190px, e "447h39" em corpo fixo passava
por cima da placa do lado — dá para ver no painel de qualquer mês cheio. */
.placa .val {
font-size: clamp(1.25rem, 1.55vw, 1.7rem); font-weight: 700;
letter-spacing: -.035em; line-height: 1.05;
overflow-wrap: anywhere;
}
.placa .nota { font-size: .74rem; color: var(--tinta-3); margin-top: 5px; }
.placa.destaque { background: var(--acento-fraco); }
/* Sobre o acento diluído a nota precisa de um degrau a mais de tinta: com
--tinta-3 dava 4,09:1 no tema escuro. */
.placa.destaque .nota { color: var(--tinta-2); }
.placa.destaque .val { color: var(--acento-forte); }
.placa.alerta .val { color: var(--critico); }
.placa.ok .val { color: var(--bom); }
/* =================================================================== tabelas */
.rolagem { overflow-x: auto; margin: 0 -18px; padding: 0 18px; }
table { width: 100%; border-collapse: collapse; font-size: .88rem; }
th {
position: sticky; top: 0; z-index: 1;
text-align: left; font-weight: 600; font-size: .75rem; color: var(--tinta-2);
padding: 0 12px 9px; white-space: nowrap;
background: var(--superficie);
box-shadow: inset 0 -1px 0 var(--linha-forte);
}
td { padding: 11px 12px; border-top: 1px solid var(--linha); vertical-align: middle; }
tbody tr:first-child td { border-top: none; }
tbody tr:hover td { background: var(--superficie-2); }
td.num, th.num { text-align: right; }
tbody tr.clicavel { cursor: pointer; }
.clicavel-dia { cursor: pointer; color: var(--acento-forte); font-weight: 500; }
.clicavel-dia:hover { text-decoration: underline; }
.pessoa { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pessoa .nome { font-weight: 600; }
.pessoa .cargo { font-size: .78rem; color: var(--tinta-3); }
/* Iniciais no lugar da foto. Quadrado de canto suave, e não círculo: o círculo
com duas letras dentro é o avatar de qualquer painel; aqui ele conversa com
as células do calendário, que são a peça característica da tela. */
.avatar {
width: 34px; height: 34px; border-radius: var(--r-1); flex: none;
display: grid; place-items: center;
font-size: .76rem; font-weight: 600;
background: var(--acento-fraco); color: var(--acento-forte);
}
/* ================================================================= etiquetas */
/* `.etiqueta` e `.etq` são a mesma coisa com dois nomes, de telas escritas em
épocas diferentes. Continuam as duas para nenhuma tela quebrar. */
.etiqueta, .etq {
display: inline-flex; align-items: center; gap: 5px;
padding: 3px 9px; border-radius: 999px;
font-size: .74rem; font-weight: 600; white-space: nowrap;
}
.etq svg { width: 12px; height: 12px; }
.e-ok { background: var(--bom-bg); color: var(--bom); }
.e-atencao { background: var(--aviso-bg); color: #8a6100; }
.e-problema, .e-falta, .e-incompleto { background: var(--critico-bg); color: var(--critico); }
.e-justificado, .e-andamento, .e-extra_folga { background: var(--info-bg); color: var(--info-texto); }
/* Afastado nao e "justificado": ali nao havia jornada nenhuma prevista. Cor
propria para o mes de ferias nao se confundir com um mes de atestados. */
.e-afastado { background: var(--neutro-bg); color: var(--tinta-2); }
.e-folga, .e-feriado, .e-fora, .e-futuro, .e-neutro { background: var(--neutro-bg); color: var(--tinta-2); }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .e-atencao { color: var(--aviso); } }
:root[data-tema="escuro"] .e-atencao { color: var(--aviso); }
.bolinha { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex: none; }
/* ===================================================================== chips */
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
display: inline-flex; align-items: center; gap: 6px;
padding: 7px 13px; border-radius: 999px;
border: 1px solid var(--linha-forte); background: var(--superficie);
font-size: .82rem; font-weight: 500; color: var(--tinta-2);
cursor: pointer; margin: 0; min-height: 36px;
transition: background .12s, border-color .12s, color .12s;
}
.chip:hover { border-color: var(--tinta-3); color: var(--tinta); }
.chip.ligado {
background: var(--acento-fraco);
border-color: color-mix(in srgb, var(--acento) 45%, transparent);
color: var(--acento-forte); font-weight: 600;
}
.chip input { display: none; }
/* =================================================================== filtros */
.filtros { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.filtros label { margin: 0; }
.filtros label select,
.filtros label input:not([type=checkbox]):not([type=radio]) { min-width: 140px; }
.filtros label:has(input[type=checkbox]) {
display: flex; align-items: center; gap: 7px; font-weight: 500; color: var(--tinta);
min-height: 40px;
}
.filtros .crescer { flex: 1 1 180px; }
@media (max-width: 560px) {
.filtros label:has(input[type=date]) { flex: 1 1 calc(50% - 5px); min-width: 0; }
.filtros label:has(input[type=date]) input { min-width: 0; width: 100%; }
}
.barra { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 16px; }
.barra > div:first-child { flex: 1 1 240px; min-width: 0; }
.barra label { margin: 0; }
.barra input:not([type=checkbox]):not([type=radio]) { min-width: 140px; width: auto; }
@media (max-width: 760px) { .so-largo { display: none; } }
/* ==================================================================== totais */
/* Mesma ideia das placas: uma faixa dividida por fios, não N cartõezinhos. */
.totais {
display: grid; grid-template-columns: repeat(2, 1fr);
border: 1px solid var(--linha); border-radius: var(--r-2); overflow: hidden;
background: var(--superficie); margin-bottom: 14px;
}
@media (min-width: 720px) { .totais { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); } }
.total {
padding: 12px 14px;
border-inline-end: 1px solid var(--linha);
border-block-end: 1px solid var(--linha);
}
.total .r { font-size: .74rem; color: var(--tinta-2); margin-bottom: 4px; }
.total .v { font-size: 1.22rem; font-weight: 600; letter-spacing: -.02em; }
.total.destaque .v { color: var(--acento-forte); }
/* =================================================================== alertas */
/* `:not(.placa)` não é preciosismo: a placa de métrica usa `alerta` como
ESTADO ("este número está ruim") e a tarja usa `alerta` como COMPONENTE. O
mesmo nome, dois sentidos — e o `display:flex` daqui vazava para dentro da
placa, deitando rótulo, número e nota lado a lado até se atropelarem. Dava
para ver no Painel de qualquer mês com atraso. */
.alerta:not(.placa) {
display: flex; gap: 9px; align-items: flex-start;
padding: 11px 13px; border-radius: var(--r-2); margin: 0 0 8px; font-size: .88rem;
border: 1px solid transparent;
}
.alerta.erro { background: var(--critico-bg); color: var(--critico); border-color: color-mix(in srgb, var(--critico) 22%, transparent); }
.alerta.aviso { background: var(--aviso-bg); color: var(--aviso); border-color: color-mix(in srgb, var(--aviso) 26%, transparent); }
/* Texto azul, não laranja: era o acento porque o acento era teal e passava
por 'informação'. Laranja dentro de uma tarja azul só parece engano. */
.alerta.info { background: var(--info-bg); color: var(--info-texto); border-color: color-mix(in srgb, var(--info) 22%, transparent); }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .alerta.aviso { color: var(--aviso); } }
:root[data-tema="escuro"] .alerta.aviso { color: var(--aviso); }
/* Aviso dentro do conteúdo (no detalhe do dia), diferente do `.alerta` de
formulário: mais compacto, com ícone alinhado à primeira linha. */
.aviso-linha {
display: flex; gap: 9px; align-items: flex-start;
padding: 10px 12px; border-radius: var(--r-1);
font-size: .86rem; margin-bottom: 8px;
}
.aviso-linha svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.aviso-linha.erro { background: var(--critico-bg); color: var(--critico); }
.aviso-linha.aviso { background: var(--aviso-bg); color: #8a6100; }
.aviso-linha.info { background: var(--info-bg); color: var(--info-texto); }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .aviso-linha.aviso { color: var(--aviso); } }
:root[data-tema="escuro"] .aviso-linha.aviso { color: var(--aviso); }
.acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; align-items: center; }
.obs { font-size: .78rem; color: var(--tinta-3); }
.vazio { text-align: center; color: var(--tinta-3); padding: 44px 18px; }
.vazio svg { width: 40px; height: 40px; margin: 0 auto 12px; color: var(--linha-forte); }
.vazio h3 { color: var(--tinta-2); }
/* ================================================================ calendário */
/* É o cartão de ponto, em grade: célula quadrada, número no alto, hora
embaixo. A cor vive numa barra fininha no topo da célula, e não no fundo
inteiro — trinta células de fundo colorido viram vitral e param de informar.
Só falta e problema pintam o fundo, porque são o que se procura. */
.calendario { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.cal-cabeca {
text-align: center; font-size: .72rem; color: var(--tinta-3);
font-weight: 600; padding: 4px 0;
}
.cal-dia {
position: relative; overflow: hidden;
min-height: 56px; border-radius: var(--r-1);
border: 1px solid var(--linha); padding: 10px 8px 6px;
display: flex; flex-direction: column; align-items: flex-start; cursor: pointer;
background: var(--superficie); color: var(--tinta); font: inherit; text-align: left;
transition: border-color .12s;
}
.cal-dia:hover { border-color: var(--tinta-3); transform: none; }
.cal-dia .n { font-weight: 600; font-size: .88rem; }
.cal-dia .h { font-size: .7rem; margin-top: auto; color: var(--tinta-2); }
.cal-dia.vago { visibility: hidden; }
.cal-dia:not(.vago)::before {
content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--linha-forte);
}
.cal-dia.s-ok::before { background: var(--bom); }
.cal-dia.s-atencao::before { background: var(--aviso); }
.cal-dia.s-problema::before, .cal-dia.s-falta::before, .cal-dia.s-incompleto::before { background: var(--critico); }
/* Justificado e folga saíram do acento e foram para o azul de informação.
Com o acento laranja, a tarja de "justificado" ficava a um passo da tarja
vermelha de "falta" — e essas duas são exatamente as que ninguém pode
confundir no espelho do mês, porque uma custa desconto e a outra não. */
.cal-dia.s-justificado::before, .cal-dia.s-extra_folga::before { background: var(--info); }
.cal-dia.s-afastado::before { background: var(--tinta-3); }
.cal-dia.s-andamento::before { background: var(--serie-2); }
.cal-dia.s-problema, .cal-dia.s-falta, .cal-dia.s-incompleto { background: var(--critico-bg); }
.cal-dia.s-futuro { opacity: .45; }
@media (min-width: 700px) { .cal-dia { min-height: 76px; } .cal-dia .n { font-size: .95rem; } }
.legenda { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; font-size: .78rem; color: var(--tinta-2); }
.legenda span { display: flex; align-items: center; gap: 6px; }
/* ==================================================================== gaveta */
.gaveta { position: fixed; inset: 0; z-index: 60; display: flex; justify-content: flex-end; }
.gaveta-fundo { position: absolute; inset: 0; background: rgba(16, 24, 40, .5); animation: surgir .18s ease; }
.gaveta-painel {
position: relative; background: var(--superficie); width: min(560px, 100%); height: 100%;
overflow-y: auto; padding: 22px; padding-bottom: 60px; box-shadow: var(--sombra-3);
animation: entrar .22s cubic-bezier(.2,.8,.3,1);
}
@keyframes surgir { from { opacity: 0 } }
@keyframes entrar { from { transform: translateX(26px); opacity: .4 } }
.gaveta-topo { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 18px; }
.gaveta-topo h2 { flex: 1; min-width: 0; }
@media (max-width: 560px) {
.gaveta { align-items: flex-end; }
.gaveta-painel {
width: 100%; height: 92dvh; border-radius: var(--r-4) var(--r-4) 0 0;
animation: subir .24s cubic-bezier(.2,.8,.3,1);
}
@keyframes subir { from { transform: translateY(36px); opacity: .5 } }
}
/* ============================================================= dia e batidas */
/* A hora à esquerda, em figura tabular, com a foto do lado: é o "span" do dia,
o que uma planilha não mostra. */
.linha-tempo { list-style: none; margin: 0; padding: 0; }
.linha-tempo li {
display: flex; gap: 12px; align-items: center; padding: 10px 0;
border-bottom: 1px solid var(--linha);
}
.linha-tempo li:last-child { border-bottom: none; }
.linha-tempo .hora { font-weight: 600; min-width: 52px; font-size: .95rem; }
.linha-tempo .obs { color: var(--tinta-3); font-size: .78rem; }
.foto-batida {
width: 44px; height: 44px; border-radius: var(--r-1); object-fit: cover;
flex: none; border: 1px solid var(--linha); cursor: zoom-in; background: var(--superficie-2);
transition: border-color .12s;
}
.foto-batida:hover { border-color: var(--acento); }
.foto-batida.vazia {
cursor: default;
background: repeating-linear-gradient(45deg,
var(--superficie-2), var(--superficie-2) 5px, var(--linha) 5px, var(--linha) 6px);
}
.lupa-foto {
position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; gap: 12px;
background: rgba(16, 24, 40, .84); padding: 20px; cursor: zoom-out; animation: surgir .16s ease;
}
.lupa-foto img { max-width: min(620px, 92vw); max-height: 74vh; border-radius: var(--r-2); }
.lupa-foto p { color: #eef3fa; font-size: .88rem; text-align: center; }
/* ==================================================================== avisos */
.avisos {
position: fixed; left: 50%; bottom: 88px; transform: translateX(-50%); z-index: 90;
display: flex; flex-direction: column; gap: 8px; align-items: center;
pointer-events: none; width: min(420px, 92vw);
}
@media (min-width: 1000px) { .avisos { bottom: 26px; } }
.aviso {
background: var(--tinta); color: var(--plano);
padding: 11px 17px; border-radius: var(--r-2);
font-size: .89rem; font-weight: 500; box-shadow: var(--sombra-2); width: 100%;
animation: entrar .2s ease;
}
.aviso.ruim { background: var(--critico); color: #fff; }
/* ================================================================== gráficos */
.gráfico, .grafico { width: 100%; }
.grafico-legenda { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; font-size: .78rem; color: var(--tinta-2); }
.grafico-legenda span { display: flex; align-items: center; gap: 6px; }
.grafico-legenda i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.dica-flutuante {
position: fixed; z-index: 75; pointer-events: none;
background: var(--tinta); color: var(--plano);
padding: 7px 10px; border-radius: var(--r-1); font-size: .78rem;
box-shadow: var(--sombra-2); white-space: nowrap;
}
.dica-flutuante b { font-weight: 600; }
.barra-progresso { height: 6px; border-radius: 999px; background: var(--neutro-bg); overflow: hidden; }
.barra-progresso > i { display: block; height: 100%; background: var(--acento); border-radius: inherit; }
/* ===================================================================== marca */
.marca-horaid { display: inline-flex; align-items: center; gap: 9px; height: 28px; letter-spacing: -.02em; }
.marca-horaid .marca-simbolo { display: block; height: 100%; aspect-ratio: 1; }
.marca-horaid svg { width: 100%; height: 100%; display: block; }
/* "Hora" leve e "ID" pesado: é o que faz a palavra se ler como duas ideias — a
hora e a identidade — sem espaço, hífen nem maiúscula no meio, que quebrariam
a linha em tela estreita. */
.marca-horaid .marca-nome { font-weight: 400; }
.marca-horaid .marca-nome b { font-weight: 750; }
.login-arte .marca-horaid { font-size: 1.15rem; height: 34px; }
.marca-bloco { padding: 12px 12px 6px; min-width: 0; }
.nome-empresa {
font-weight: 500; color: var(--tinta-2); font-size: .82rem;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.nome-empresa:empty { display: none; }
.lateral .nome-empresa { margin-top: 5px; }
.topo-app .nome-empresa { max-width: 42vw; }
/* Sem o ponto do meio: meta-informação costurada com "·" era um dos tiques
que faziam a tela parecer gerada. Aqui um fio separa melhor. */
.topo-app .nome-empresa::before {
content: ''; display: inline-block; width: 1px; height: 14px;
background: var(--linha-forte); margin-right: 9px; vertical-align: -2px;
}
#sair { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
#sair svg { flex: none; }
.login-caixa .topo { margin-bottom: 30px; }
/* ================================================================= impressão */
@media print {
.topo-app, .lateral, .cortina, .barra-baixo, .avisos, .gaveta, .filtros button { display: none !important; }
main { margin: 0; padding: 0; max-width: none; }
.cartao { border: none; box-shadow: none; padding: 0; }
body { background: #fff; font-size: 11px; }
@page { margin: 12mm; }
}
/* =============================================== aplicativos para baixar */
.grade-cartoes { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.linha-versao { display: flex; align-items: center; gap: 10px; }
.etiqueta-versao {
font-size: .78rem; font-weight: 700; padding: 3px 9px; border-radius: 999px;
background: color-mix(in srgb, var(--acento) 14%, transparent);
color: var(--acento-forte, var(--acento));
}
.acoes-app { margin: 4px 0 2px; }
/* O botão de baixar é verde-Android de propósito: a cor do sistema diz, sem
texto, para quem o botão é — e quem chega com um iPhone entende na hora que
não é para ele. Não é a cor da marca, e não deve ser: aqui a informação é
"qual aparelho", não "de quem é o produto". */
.botao-android {
display: inline-flex; align-items: center; gap: 12px; text-decoration: none;
background: #3ddc84; color: #0b1d12;
padding: 11px 18px; border-radius: var(--r-1); font-size: .95rem;
border: 1px solid color-mix(in srgb, #3ddc84 70%, black);
}
.botao-android:hover { background: #34c777; }
.botao-android span { display: flex; flex-direction: column; line-height: 1.15; }
.botao-android small { font-size: .74rem; opacity: .72; font-weight: 500; }
/* Botão que parece link: usado no "esqueci minha senha" e no "voltar".
É