/* Portal de Horas — Omnis Tecnologia
*
* Paleta da marca, amostrada dos arquivos oficiais da logo:
* verde #A5C22F
* grafite #38393A
*
* Não usar os cinzas do relatório Horas Clientes.pbix (#3A3C31 / #6E6E6E) que
* vigoravam aqui antes: são cores do Power BI, não da identidade Omnis.
*
* Os tokens abaixo nomeiam PAPÉIS (--superficie, --texto, --borda), não cores.
* Trocar de tema é redefinir os tokens; nenhuma regra adiante repete um hex.
*/
/* ── Tema claro (padrão) ──────────────────────────────────────────
*
* Toda cor precisa ter sua definição completa aqui. Um token declarado apenas
* dentro de @media ou [data-tema] fica indefinido no outro estado e a tela
* quebra — por isso o bloco claro é a base e os demais só sobrescrevem.
*/
:root {
--verde: #A5C22F;
--verde-forte: #93AE24;
/* O verde da marca sobre branco rende ~1,9:1 de contraste — ilegível como
texto. No claro ele só entra como PREENCHIMENTO (barras, fundo de botão).
Para texto e bordas finas existe este tom escurecido, que passa de 4,5:1. */
--verde-texto: #63771A;
--fundo: #F1F2EF;
--superficie: #FFFFFF;
--superficie-fundo: #F7F8F6;
--campo: #FFFFFF;
--campo-borda: rgba(56, 57, 58, 0.22);
--texto: #38393A;
--texto-suave: #6B6D6E;
--borda: rgba(56, 57, 58, 0.12);
--realce: rgba(165, 194, 46, 0.16);
--erro-fundo: rgba(206, 56, 19, 0.09);
--erro-borda: rgba(206, 56, 19, 0.45);
--erro-texto: #A32C0F;
--aviso-fundo: rgba(191, 132, 8, 0.10);
--aviso-borda: rgba(191, 132, 8, 0.40);
--aviso-texto: #8A5E04;
--veu: rgba(241, 242, 239, 0.72);
--sombra: 0 1px 2px rgba(56, 57, 58, 0.05), 0 6px 20px rgba(56, 57, 58, 0.07);
--sombra-alta: 0 12px 40px rgba(56, 57, 58, 0.18);
/* Alterna as duas da logo e os dois ícones do botão sem cada regra
precisar repetir a condição de tema. */
--em-claro: block;
--em-escuro: none;
--raio: 14px;
--raio-p: 9px;
/*
* Marca do cliente. O padrão é a identidade Omnis; quando a empresa tem marca
* configurada, o tema.js sobrescreve estes quatro tokens no e mais
* nada precisa saber que a personalização existe.
*
* --marca-texto e --marca-cheia são separados de propósito: a cor da marca
* como veio serve para preencher (barras, faixa), mas frequentemente reprova
* em contraste como texto. Quem calcula a variante legível é o servidor.
*/
--marca-cheia: var(--verde);
--marca-texto: var(--verde-texto);
--marca-sobre-cheia: #38393A;
color-scheme: light;
}
/* ── Tema escuro herdado do sistema ───────────────────────────────
*
* A guarda :not([data-tema="claro"]) faz o botão vencer o sistema: quem
* escolheu claro num computador configurado em escuro continua no claro.
*/
@media (prefers-color-scheme: dark) {
:root:not([data-tema="claro"]) {
--verde-texto: #B5D33C;
--fundo: #212223;
--superficie: #2C2D2E;
--superficie-fundo: #262728;
--campo: rgba(0, 0, 0, 0.24);
--campo-borda: rgba(255, 255, 255, 0.18);
--texto: #F2F3F1;
--texto-suave: #A7AAA4;
--borda: rgba(255, 255, 255, 0.10);
--realce: rgba(165, 194, 46, 0.14);
--erro-fundo: rgba(206, 56, 19, 0.20);
--erro-borda: rgba(206, 56, 19, 0.65);
--erro-texto: #FFB6A2;
--aviso-fundo: rgba(230, 168, 40, 0.16);
--aviso-borda: rgba(230, 168, 40, 0.45);
--aviso-texto: #EFC15E;
--veu: rgba(20, 21, 22, 0.72);
--sombra: 0 1px 2px rgba(0, 0, 0, 0.30), 0 6px 20px rgba(0, 0, 0, 0.28);
--sombra-alta: 0 16px 46px rgba(0, 0, 0, 0.55);
--em-claro: none;
--em-escuro: block;
color-scheme: dark;
}
}
/* ── Tema escuro escolhido no botão ───────────────────────────────
*
* Repete o bloco acima sem a media query, para o escuro valer também em
* sistemas configurados no claro. Manter os dois em sincronia ao editar.
*/
:root[data-tema="escuro"] {
--verde-texto: #B5D33C;
--fundo: #212223;
--superficie: #2C2D2E;
--superficie-fundo: #262728;
--campo: rgba(0, 0, 0, 0.24);
--campo-borda: rgba(255, 255, 255, 0.18);
--texto: #F2F3F1;
--texto-suave: #A7AAA4;
--borda: rgba(255, 255, 255, 0.10);
--realce: rgba(165, 194, 46, 0.14);
--erro-fundo: rgba(206, 56, 19, 0.20);
--erro-borda: rgba(206, 56, 19, 0.65);
--erro-texto: #FFB6A2;
--aviso-fundo: rgba(230, 168, 40, 0.16);
--aviso-borda: rgba(230, 168, 40, 0.45);
--aviso-texto: #EFC15E;
--veu: rgba(20, 21, 22, 0.72);
--sombra: 0 1px 2px rgba(0, 0, 0, 0.30), 0 6px 20px rgba(0, 0, 0, 0.28);
--sombra-alta: 0 16px 46px rgba(0, 0, 0, 0.55);
--em-claro: none;
--em-escuro: block;
color-scheme: dark;
}
* { box-sizing: border-box; }
/* Vale só durante a troca de tema; ver o comentário em aplicar(), no tema.js. */
[data-sem-transicao] * {
transition: none !important;
}
/* O atributo `hidden` só esconde porque a folha padrão do navegador aplica
`display: none` — e qualquer regra de autor com `display` vence essa regra.
Como .modal e .carregando definem `display: grid`, sem isto aqui eles
apareceriam sempre, ignorando o hidden. Precisa vir antes das duas. */
[hidden] { display: none !important; }
html, body {
margin: 0;
padding: 0;
font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
background: var(--fundo);
color: var(--texto);
-webkit-font-smoothing: antialiased;
}
h1, h2 { margin: 0; font-weight: 600; }
:focus-visible {
outline: 2px solid var(--verde-texto);
outline-offset: 2px;
}
/* ── Marca ───────────────────────────────────────────────────────
*
* As duas versões da logo ficam no HTML e o tema decide qual aparece. São
* com alt, e não background-image, para a marca continuar sendo
* conteúdo — quem usa leitor de tela ouve "Omnis Tecnologia Empresarial".
* Só a primeira leva o alt; a segunda é decorativa e repetiria a leitura.
*/
/*
* Altura da logo é o que decide se "TECNOLOGIA EMPRESARIAL" se lê ou não.
* No arquivo, essa linha ocupa 73px de 805 — 9,1% da altura total. Então a
* altura do texto na tela é sempre 0,091 × a altura aplicada aqui:
* 30px (como estava) → 2,7px, ilegível
* 72px → 6,5px, legível
* 88px → 8,0px, confortável
* Reduzir estes valores volta a apagar a assinatura da marca.
*/
.marca-omnis { display: flex; align-items: center; flex: none; min-width: 0; }
/* `max-width` + `object-fit` porque o lockup é largo: a 72px de altura ele pede
244px de largura, e num celular isso estouraria o cartão. Assim ele encolhe
junto, mantendo a proporção. */
.marca-omnis img { height: 72px; width: auto; max-width: 100%; object-fit: contain; }
.marca-omnis .em-claro { display: var(--em-claro); }
.marca-omnis .em-escuro { display: var(--em-escuro); }
/*
* Não há mais regra que sobreponha a variante por causa da marca do cliente.
* Ela existia quando a logo da Omnis ficava sobre a faixa pintada e precisava
* seguir a luminância dela. Agora a Omnis assina sobre o fundo da própria
* página, então quem decide é só o tema — como nas demais telas.
*/
/* ── Botão de tema ───────────────────────────────────────────────── */
.btn-tema {
display: inline-grid;
place-items: center;
width: 34px;
height: 34px;
padding: 0;
background: transparent;
border: 1px solid var(--borda);
border-radius: var(--raio-p);
color: var(--texto-suave);
transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.btn-tema:hover {
color: var(--verde-texto);
border-color: var(--verde-texto);
background: var(--realce);
}
.btn-tema svg { width: 17px; height: 17px; display: block; }
/* O sol convida a clarear e só faz sentido no escuro; a lua, o inverso. */
.btn-tema .icone-sol { display: var(--em-escuro); }
.btn-tema .icone-lua { display: var(--em-claro); }
/* ── Tela de login ───────────────────────────────────────────────── */
.tela-login {
display: grid;
place-items: center;
min-height: 100vh;
padding: 24px;
}
/* Um brilho verde muito diluído atrás do cartão, para a tela de entrada não
ficar num plano chapado. Fica praticamente imperceptível, e é essa a ideia. */
.tela-login::before {
content: '';
position: fixed;
inset: 0;
z-index: -1;
background:
radial-gradient(58% 44% at 50% 0%, var(--realce), transparent 72%),
var(--fundo);
}
.cartao-login {
width: 100%;
max-width: 404px;
background: var(--superficie);
border: 1px solid var(--borda);
border-radius: var(--raio);
box-shadow: var(--sombra);
padding: 34px 32px 30px;
position: relative;
overflow: hidden;
}
/* Fio da marca no topo do cartão. */
.cartao-login::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--verde), var(--verde-forte));
}
.marca { text-align: center; margin-bottom: 26px; }
/* Lockup vertical: a assinatura ocupa 4,8% da altura (contra 9,1% no horizontal),
então precisa de mais altura para o mesmo resultado — 150px dão ~7,2px de
texto, com 199px de largura num cartão de 404px. */
.marca .marca-omnis { justify-content: center; margin-bottom: 22px; }
.marca .marca-omnis img { height: 150px; }
.marca h1 { font-size: 19px; letter-spacing: 0.2px; }
.marca p { margin: 5px 0 0; font-size: 12.5px; color: var(--texto-suave); font-weight: 300; }
/* O botão de tema no login não tem barra de ações onde morar. */
.tema-canto {
position: absolute;
top: 14px;
right: 14px;
}
form label {
display: block;
font-size: 12px;
font-weight: 500;
letter-spacing: 0.3px;
margin: 16px 0 6px;
color: var(--texto-suave);
}
form label .dica { font-weight: 300; text-transform: none; letter-spacing: 0; }
input[type="email"],
input[type="password"],
input[type="text"],
input[type="date"],
select {
width: 100%;
padding: 10px 12px;
border: 1px solid var(--campo-borda);
border-radius: var(--raio-p);
background: var(--campo);
color: var(--texto);
font-family: inherit;
font-size: 14px;
transition: border-color 0.15s, box-shadow 0.15s;
}
input:focus, select:focus {
outline: none;
border-color: var(--verde-texto);
box-shadow: 0 0 0 3px var(--realce);
}
/*
* Fundo da lista aberta do