/* ============================================================
SELETA — folha de estilo base (identidade Dext)
Paleta: neutros (cinza/branco/preto) + vermelho só em detalhes.
============================================================ */
/* ---- Fontes ---- */
@font-face { font-family:'Satoshi'; src:url('/assets/fonts/Satoshi-Regular.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Satoshi'; src:url('/assets/fonts/Satoshi-Medium.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'Satoshi'; src:url('/assets/fonts/Satoshi-Bold.woff2') format('woff2'); font-weight:700; font-display:swap; }
@font-face { font-family:'Satoshi'; src:url('/assets/fonts/Satoshi-Black.woff2') format('woff2'); font-weight:900; font-display:swap; }
@font-face { font-family:'Montserrat'; src:url('/assets/fonts/Montserrat-Variable.ttf') format('truetype'); font-weight:100 900; font-display:swap; }
/* ---- Tokens ---- */
:root{
--preto:#111111;
--branco:#ffffff;
--cinza:#dddddd;
--cinza-fundo:#f4f4f5;
--cinza-medio:#8a8a8a;
--cinza-borda:#e6e6e8;
--vermelho:#e81840;
--vermelho-hover:#cf1338;
/* ⭐ ALTURA DE UM RÓTULO DE CAMPO (ele, 11/08/2026: *"página tá desalinhada
com relação aos campos"*). Quem divide a linha com um campo rotulado — um
botão, um interruptor — tem de assentar na CAIXA e não no rótulo, e para
isso desce exactamente a altura de um.
⚠️ Isto era um `margin-top:26px` chutado à mão em cada sítio, e chutado
diferente em cada um: bastava mexer no `.campo label` para tudo sair do
lugar sem ninguém perceber porquê. O valor deriva do próprio rótulo:
a caixa da letra (13px × 1,5 de entrelinha = 19,5px, arredondado a 20 pelo
browser) mais os 7px de margem. Medido no ecrã, não estimado. */
--altura-rotulo: calc(20px + 7px);
/* SINAL DO DINHEIRO — verde entrou, vermelho saiu.
Estas quatro NÃO entram na customização por empresa (ver layout.php, onde
--vermelho passa a ser a cor da marca). O motivo é simples: numa empresa de
marca verde, o prejuízo apareceria verde. Sinal é leitura, não identidade. */
--verde:#1c7a44;
--verde-fundo:#e9f7ef;
--vermelho-sinal:#cf1338;
--vermelho-sinal-fundo:#fdecef;
/* ⚠️ O ÂMBAR é sinal como os outros dois, e faltava-lhe nome (28/08/2026).
Estava escrito à mão em DOIS sítios — `.selo-alerta` e `.st-pendente` —
com o mesmo par de hexadecimais copiado. Dois pares iguais escritos à mão
é um par que um dia deixa de ser igual, e ninguém dá por isso: é a mesma
doença que a auditoria de 26/08 apanhou no `.alg-selo`. */
--ambar:#b26a00;
--ambar-fundo:#fff3e0;
/* Tema customizável (sobrescrito no layout conforme as 3 cores da empresa) */
--fundo:#f4f4f5;
--menu:#111111;
--destaque:#e81840;
--menu-fg:#ffffff;
--texto:#111111;
--menu-fg-suave:#dddddd;
--menu-borda:rgba(255,255,255,.1);
--menu-hover:rgba(255,255,255,.08);
--fonte-titulo:'Satoshi', system-ui, -apple-system, sans-serif;
--fonte-texto:'Montserrat', system-ui, -apple-system, sans-serif;
/* ⭐⭐ A ESCALA DOS CANTOS (18/08/2026). O símbolo da marca é definido pelo
quanto arredonda: é ele que manda aqui. Havia **23 valores diferentes** de
`border-radius` no ficheiro, doze deles escritos à mão (2,3,4,5,6,7,8,9,10,
12,13,14) — e `10px` aparecia 8 vezes quando `--raio-sm` já ERA 10px.
⚠️ Três degraus chegam, e cada um tem um trabalho:
`--raio-xs` miudezas: código, teclas, amostras de cor, anel de foco
`--raio-sm` o que se clica: botões, campos, itens de lista
`--raio` o que contém: cartões, painéis, diálogos
Fora da escala ficam só a cápsula (999px) e o círculo (50%). */
--raio:14px;
--raio-sm:10px;
--raio-xs:6px;
--sombra:0 12px 40px rgba(17,17,17,.10);
}
*{ box-sizing:border-box; margin:0; padding:0; }
[hidden]{ display:none !important; }
html,body{ height:100%; }
body{
font-family:var(--fonte-texto);
color:var(--preto);
background:var(--cinza-fundo);
-webkit-font-smoothing:antialiased;
line-height:1.5;
/* sticky footer: a página ocupa ao menos a altura toda e o rodapé "Powered by
Dext" fica sempre colado no fundo, mesmo em telas com pouco conteúdo. */
display:flex;
flex-direction:column;
min-height:100vh;
}
/* ============================================================
LOGIN — painel escuro (marca) + formulário claro
============================================================ */
.login{ display:flex; min-height:100vh; position:relative; z-index:1; } /* acima da marca d'água de fundo */
/* Painel da marca (escuro) */
.login__marca{
flex:1 1 46%;
background:var(--preto);
color:var(--branco);
display:flex; flex-direction:column; justify-content:center; align-items:center;
padding:48px; text-align:center;
}
.login__marca .simbolo{ width:88px; height:88px; margin-bottom:22px; }
.login__marca .wordmark{ width:158px; height:auto; display:block; }
.login__marca .descritor{ color:var(--cinza); font-size:13px; font-weight:600; letter-spacing:3px; text-transform:uppercase; margin-top:16px; opacity:.85; }
.login__marca .nome{
font-family:var(--fonte-texto); font-weight:600;
font-size:54px; letter-spacing:-1px; line-height:1;
}
.login__marca .assinatura{
color:var(--cinza-medio); font-weight:500; font-size:15px;
letter-spacing:1px; margin-top:8px;
}
.login__marca .tagline{
color:var(--cinza); font-size:14px; margin-top:16px; max-width:280px;
opacity:.6;
}
/* Lado do formulário (claro) */
.login__form{
flex:1 1 54%;
background:var(--branco);
display:flex; align-items:center; justify-content:center; padding:40px;
position:relative; overflow:hidden;
}
.form-card{ width:100%; max-width:380px; position:relative; z-index:1; }
/* Marca d'água do "D" no login.
Desktop (preto à esquerda): fica SOBRE o painel preto, atrás do logo — como na foto.
Mobile (preto no topo): passa a ficar só na área branca, atrás do login, sem invadir o preto.
Cada painel tem overflow:hidden, então a marca d'água nunca escapa da sua área. */
.login__marca{ position:relative; overflow:hidden; }
.login__marca > *{ position:relative; z-index:1; } /* logo/descritor acima da marca d'água */
.login__marca::before{
content:''; position:absolute; z-index:0; pointer-events:none;
left:50%; top:50%; transform:translate(-50%,-50%);
width:min(150%, 560px); height:min(150%, 560px);
background:url('/assets/img/dext-icon.svg') no-repeat center center; background-size:contain;
filter:brightness(0) invert(1); opacity:.06; /* "D" branco sutil sobre o preto */
}
.form-card h1{
font-family:var(--fonte-titulo); font-weight:700; font-size:28px;
letter-spacing:-.5px; margin-bottom:6px;
}
.form-card .sub{ color:var(--cinza-medio); font-size:15px; margin-bottom:30px; }
.campo{ margin-bottom:18px; }
.campo label{
display:block; font-size:13px; font-weight:600; color:var(--texto);
margin-bottom:7px;
}
.login__form .campo label{ color:var(--preto); } /* login é sempre painel claro */
.campo input:not([type=checkbox]):not([type=radio]), .campo textarea{
width:100%; padding:13px 15px; font-family:var(--fonte-texto); font-size:15px;
border:1.5px solid var(--cinza-borda); border-radius:var(--raio-sm);
background:var(--branco); color:var(--preto); transition:border-color .15s;
}
.campo textarea{ resize:vertical; min-height:84px; line-height:1.45; }
.campo input:focus, .campo textarea:focus{ outline:none; border-color:var(--preto); }
/* ⚠️ E os controlos de DATA e HORA precisam dos dois: poder encolher, e escrever
o valor à esquerda como qualquer outro campo. O Safari centra-o por omissão
(`::-webkit-date-and-time-value`), e uma data centrada ao lado de um nome
alinhado à esquerda lê-se como um campo de outra família. */
.campo input[type=date], .campo input[type=time]{ min-width:0; }
.campo input[type=date]::-webkit-date-and-time-value,
.campo input[type=time]::-webkit-date-and-time-value{ text-align:left; }
.campo-check input[type=checkbox]{ width:17px; height:17px; flex:none; }
/* ============================================================
CAMPO — o aspeto base de QUALQUER campo do sistema
============================================================
Antes, o aspeto bonito só existia dentro de `.campo`. Telas que põem o
solto — as Configurações do Financeiro, por exemplo — caíam no
estilo do navegador: cantos rectos e borda fina, ao lado de um campo de
dinheiro redondo. O mesmo ecrã tinha dois desenhos de campo.
Agora o aspeto está no ELEMENTO, dentro do conteúdo da app. `.campo` volta a
ser só arrumação, e uma tela nova nasce certa sem ninguém se lembrar disso.
Fora: checkbox/radio (têm desenho próprio), hidden, color e range.
⚠️ TUDO VAI DENTRO DE `:where()`, e isso não é estilo — é o que faz a regra
funcionar. Uma base tem de perder de TODA a gente; se ganhar de alguém, esse
alguém quebra. Duas armadilhas, apanhadas as duas a olhar para o ecrã:
· `:not([type=x]):not([type=y])…` SOMA a especificidade de cada argumento.
Com cinco, isto valia 0,6,1 e esmagava `.turno-linha input[type=time]`
(0,2,1): as horas do turno ficavam com 13px de padding e cortadas.
· Mesmo em 0,1,1 ainda ganhava de `.inp-sal` (0,1,0) e de qualquer outra
regra de uma classe só — e há várias.
Com `:where(.conteudo)` a base cai para 0,0,1: fica debaixo de tudo, que é o
lugar dela. Quem quiser um campo diferente escreve uma classe e ganha.
⚠️ E OS DIÁLOGOS, que ficavam de fora (03/08/2026, apanhado por ele no
divisor da retirada: "os campos devem estar padronizados, gosto mais desse
redondinho"). Um `