/* ============================================================================ Portal 4Fin — Design tokens (fonte única de verdade do tema) ============================================================================ Este arquivo é o "painel de controle" do visual das DUAS interfaces (admin /admin/ e Portal do Cliente /portal/). Nenhum outro arquivo deve declarar cor, raio, sombra, espaçamento ou duração em valor literal -- todos consomem as variáveis daqui. Trocar a marca inteira é trocar o bloco :root abaixo. --------------------------------------------------------------------------- 1. ORDEM DE CAMADAS (@layer) -- leia antes de escrever qualquer regra --------------------------------------------------------------------------- O tema do admin (django-unfold >= 0.104) é Tailwind v4 e emite camadas nativas, nesta ordem de primeira aparição: properties -> theme -> base -> components -> utilities CSS *fora* de camada sempre vence CSS *dentro* de camada, independente de especificidade. Era daí que vinha a guerra de `!important` do arquivo antigo: nosso CSS não estava em camada nenhuma e atropelava as utilities do tema (botão vermelho com texto azul, toggle ligado igual ao desligado, borda de erro apagada...). O conserto é estrutural, não é `!important`. Como este arquivo é carregado ANTES do styles.css do Unfold (ver UNFOLD["STYLES"] em settings.py), a declaração abaixo é quem estabelece a ordem definitiva -- as camadas do Tailwind se encaixam nos nomes que já existem e ganhamos duas fatias nossas: p4f-base -- normalização de elemento nu (input, a, h1...). Fica DEPOIS do base do Tailwind e ANTES de components/utilities, então uma utility do tema sempre vence nossa regra genérica. É isso que torna os quatro bugs históricos impossíveis. p4f -- nossos componentes com classe própria (.p4f-*). Fica no fim, depois de utilities, porque componente nomeado tem que vencer utility solta; e como o seletor exige a nossa classe, não há risco de atropelar markup do tema. Regra prática: TODA regra deste projeto mora numa dessas duas camadas. Nada de CSS fora de camada, e `!important` só para contornar style inline de terceiro (hoje: zero ocorrências). ========================================================================= */ @layer properties, theme, base, p4f-base, components, utilities, p4f; @layer p4f-base { :root { /* ------------------------------------------------------------------ MARCA -- azul royal (ação) + ciano (destaque) + azul céu (ponte) A rampa primária é a mesma exportada para UNFOLD["COLORS"] em settings.py; clientes.tests.DesignTokensTests trava as duas juntas para não divergirem em silêncio de novo. ------------------------------------------------------------------ */ --p4f-primary-50: #eff6ff; --p4f-primary-100: #dbeafe; --p4f-primary-200: #bfdbfe; --p4f-primary-300: #93c5fd; --p4f-primary-400: #60a5fa; --p4f-primary-500: #3b82f6; --p4f-primary-600: #2563eb; --p4f-primary-700: #1d4ed8; --p4f-primary-800: #1e40af; --p4f-primary-900: #1e3a8a; --p4f-primary-950: #172554; /* Ciano -- só destaque (gradiente de marca, foco, gráfico). Nunca como cor de texto sobre fundo claro: reprova em contraste. */ --p4f-accent-300: #67e8f9; --p4f-accent-400: #22d3ee; --p4f-accent-500: #06b6d4; --p4f-accent-600: #0891b2; --p4f-accent-700: #0e7490; /* Azul céu -- meio-termo entre o royal e o ciano */ --p4f-sky-300: #7dd3fc; --p4f-sky-400: #38bdf8; --p4f-sky-500: #0ea5e9; --p4f-sky-600: #0284c7; /* Gradiente de marca (selo, KPI em destaque) */ --p4f-gradient-brand: linear-gradient( 135deg, var(--p4f-primary-700) 0%, var(--p4f-sky-500) 55%, var(--p4f-accent-400) 100% ); /* Gradiente das telas sem sessão -- versão bem mais escura e fechada do gradiente da marca. Ele é o único plano de fundo colorido em tela cheia do produto: no tom claro anterior o painel puxava toda a atenção pra si e o formulário, que é o que a pessoa veio fazer, virava o elemento secundário da tela. */ --p4f-gradient-auth: linear-gradient( 152deg, #061229 0%, #0d2a5c 38%, #124a8f 72%, #10618f 100% ); /* ------------------------------------------------------------------ SUPERFÍCIES -- modo claro (neutros levemente puxados pro azul céu) ------------------------------------------------------------------ */ --p4f-canvas: #f3f7fc; --p4f-surface: #ffffff; --p4f-surface-2: #f8fafd; --p4f-surface-3: #edf3fa; --p4f-surface-inset: #f1f5fa; --p4f-border: #dbe5f1; --p4f-border-soft: #e8eef7; --p4f-border-strong: #c3d2e6; /* Texto. Os três níveis são medidos sobre --p4f-canvas (o fundo mais claro em que aparecem), não sobre o branco: a ajuda de campo e a descrição de fieldset ficam sobre a tela tingida, e o antigo #64748b dava só 4,4:1 ali -- abaixo do mínimo, e era o que fazia o texto de apoio "sumir" no modo claro. */ --p4f-text: #0b1727; /* 16.6:1 sobre --p4f-canvas */ --p4f-text-2: #35455c; /* 8.7:1 */ --p4f-text-3: #566275; /* 6.1:1 */ --p4f-text-on-brand: #ffffff; /* Barra lateral -- no claro ela é clara (não mais o bloco escuro antigo, que brigava com o resto da página) */ --p4f-nav-bg: #ffffff; --p4f-nav-bg-2: #f7fafd; --p4f-nav-border: #dee7f2; --p4f-nav-text: #35455c; --p4f-nav-text-muted: #7286a1; --p4f-nav-heading: #8296b0; --p4f-nav-hover-bg: #f1f5fb; /* Fundo do item selecionado: um véu leve, não uma faixa sólida. Quem carrega o estado é o conjunto -- véu + traço lateral + peso da fonte + cor do texto --, então o fundo pode ser discreto sem que o item deixe de se destacar. */ --p4f-nav-active-bg: rgba(37, 99, 235, 0.07); --p4f-nav-active-text: var(--p4f-primary-700); --p4f-nav-active-bar: var(--p4f-primary-600); /* ------------------------------------------------------------------ ESTADOS -- par (superfície tingida + texto escuro). O texto NUNCA é a cor de destaque: sobre fundo claro usamos o tom 900 da mesma família, o que mantém >= 4.5:1 em todos os quatro. ------------------------------------------------------------------ */ --p4f-success: #16a34a; --p4f-success-bg: #e9f9ef; --p4f-success-border: #b7e7c9; --p4f-success-text: #14532d; /* 8.9:1 sobre success-bg */ --p4f-warning: #d97706; --p4f-warning-bg: #fef5e3; --p4f-warning-border: #f5d9a4; --p4f-warning-text: #7c3d0a; /* 7.4:1 sobre warning-bg */ --p4f-danger: #dc2626; --p4f-danger-bg: #fdecec; --p4f-danger-border: #f6c2c2; --p4f-danger-text: #911c1c; /* 7.0:1 sobre danger-bg */ --p4f-info: var(--p4f-primary-600); --p4f-info-bg: #e8f1fe; --p4f-info-border: #bcd6fb; --p4f-info-text: #1c3f8f; /* 7.3:1 sobre info-bg */ --p4f-neutral-bg: #eef2f7; --p4f-neutral-border: #d5deea; --p4f-neutral-text: #35455c; /* Cor de link sobre superfície -- NÃO é --p4f-primary-600. A rampa da marca é a mesma nos dois temas (é ela que pinta botão sólido, onde o texto é branco); como cor de TEXTO ela só funciona no claro. Este par inverte com o tema: escuro sobre fundo claro, claro sobre fundo escuro. */ --p4f-link: #1d4ed8; /* 6.7:1 sobre --p4f-surface */ --p4f-link-hover: #1e40af; /* Anel de foco -- único em todo o sistema, sempre visível */ --p4f-focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.28); --p4f-focus-color: var(--p4f-primary-600); /* ------------------------------------------------------------------ SOMBRAS -- escala curta e consistente (nada de valor avulso) ------------------------------------------------------------------ */ --p4f-shadow-xs: 0 1px 2px rgba(11, 23, 39, 0.05); --p4f-shadow-sm: 0 1px 3px rgba(11, 23, 39, 0.07), 0 1px 2px rgba(11, 23, 39, 0.04); --p4f-shadow-md: 0 4px 12px rgba(11, 23, 39, 0.07), 0 2px 4px rgba(11, 23, 39, 0.04); --p4f-shadow-lg: 0 12px 28px rgba(11, 23, 39, 0.10), 0 4px 8px rgba(11, 23, 39, 0.05); --p4f-shadow-xl: 0 24px 56px rgba(11, 23, 39, 0.14); --p4f-shadow-nav: 1px 0 0 var(--p4f-nav-border); /* ------------------------------------------------------------------ GEOMETRIA ------------------------------------------------------------------ */ --p4f-radius-xs: 6px; --p4f-radius-sm: 8px; --p4f-radius: 10px; --p4f-radius-md: 12px; --p4f-radius-lg: 16px; --p4f-radius-xl: 22px; --p4f-radius-full: 999px; /* Escala de espaço 4px -- use estes, não números soltos */ --p4f-space-1: 4px; --p4f-space-2: 8px; --p4f-space-3: 12px; --p4f-space-4: 16px; --p4f-space-5: 20px; --p4f-space-6: 24px; --p4f-space-8: 32px; --p4f-space-10: 40px; --p4f-space-12: 48px; /* ------------------------------------------------------------------ TIPOGRAFIA -- Inter vem embarcada no pacote do Unfold (sem CDN, sem build step); o fallback cobre o portal caso o estático falhe. ------------------------------------------------------------------ */ --p4f-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --p4f-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --p4f-text-2xs: 10.5px; --p4f-text-xs: 11.5px; --p4f-text-sm: 13px; --p4f-text-base: 14px; --p4f-text-md: 15px; --p4f-text-lg: 17px; --p4f-text-xl: 21px; --p4f-text-2xl: 26px; --p4f-text-3xl: 32px; --p4f-leading-tight: 1.25; --p4f-leading: 1.5; --p4f-leading-relaxed: 1.65; --p4f-weight-normal: 400; --p4f-weight-medium: 500; --p4f-weight-semibold: 600; --p4f-weight-bold: 700; /* ------------------------------------------------------------------ MOVIMENTO -- três durações e duas curvas, ponto. Animação sem token vira ritmo diferente por tela. ------------------------------------------------------------------ */ --p4f-duration-fast: 120ms; --p4f-duration: 180ms; --p4f-duration-slow: 260ms; --p4f-ease: cubic-bezier(0.4, 0, 0.2, 1); --p4f-ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* ------------------------------------------------------------------ LAYOUT ------------------------------------------------------------------ */ --p4f-sidebar-width: 240px; --p4f-sidebar-width-collapsed: 76px; /* Uma altura só para o cabeçalho do conteúdo E para o bloco da marca na barra lateral: é o que faz a divisória dos dois cair na MESMA linha horizontal, sem número duplicado em lugar nenhum. 64px, não 56px: em 56px o título/botões (até 38px de altura) só tinham ~8px de respiro pra não estourar a barra -- pouco pra parecer padding de verdade, ficava com cara de grudado na divisória. Sobem os dois juntos (mesma variável), então a divisória continua batendo certinho com a barra lateral. */ --p4f-header-height: 64px; --p4f-content-max: 1360px; /* Escala de empilhamento -- um lugar só para consultar */ /* Camada de coisa que abre a partir de um campo (lista de autocomplete). Precisa vencer todo conteúdo comum -- inclusive cartão com `position: relative`, como o KPI -- mas ficar ABAIXO de sticky/cabeçalho/barra: uma lista que passa por cima do cabeçalho fixo ao rolar fica pior, não melhor. */ --p4f-z-dropdown: 20; --p4f-z-sticky: 30; --p4f-z-header: 40; --p4f-z-sidebar: 50; --p4f-z-overlay: 900; --p4f-z-modal: 1000; color-scheme: light; } /* ====================================================================== MODO ESCURO -- linguagem Apple: azul-marinho profundo, separadores claros (cinza quase branco), zero preto puro, sem sombra pesada. Contrato: a classe `dark` no . O admin é o Alpine do Unfold que põe; no portal é o script inline de portal/base.html (antes do paint, para não piscar branco). ====================================================================== */ html.dark { /* Marinho, não preto: o pedido é "azul escuro com bordas brancas quase cinza claro". Preto puro (#000) e quase-preto achatam o tema e brigam com o azul da marca. */ --p4f-canvas: #0a1222; --p4f-surface: #111b2e; --p4f-surface-2: #16223a; --p4f-surface-3: #1d2b47; --p4f-surface-inset: #0d1728; /* "Bordas brancas quase cinza claro": separadores claros e visíveis sobre o marinho, não a linha quase-invisível do padrão. */ --p4f-border: #35435d; --p4f-border-soft: #263349; --p4f-border-strong: #4d5f80; --p4f-text: #f2f5fa; /* 16.1:1 sobre --p4f-surface */ --p4f-text-2: #c2ccdc; /* 9.8:1 */ --p4f-text-3: #93a1b8; /* 5.6:1 */ --p4f-nav-bg: #0d1728; --p4f-nav-bg-2: #101c30; --p4f-nav-border: #35435d; --p4f-nav-text: #c8d2e2; --p4f-nav-text-muted: #8b99b0; --p4f-nav-heading: #7d8ca5; --p4f-nav-hover-bg: rgba(255, 255, 255, 0.05); --p4f-nav-active-bg: rgba(96, 165, 250, 0.12); --p4f-nav-active-text: #dbeafe; --p4f-nav-active-bar: var(--p4f-primary-400); /* No escuro o par inverte: superfície translúcida da cor + texto CLARO da mesma família (o tom 900 sumiria no fundo). */ --p4f-success-bg: rgba(22, 163, 74, 0.16); --p4f-success-border: rgba(74, 222, 128, 0.34); --p4f-success-text: #86efac; --p4f-warning-bg: rgba(217, 119, 6, 0.17); --p4f-warning-border: rgba(251, 191, 36, 0.34); --p4f-warning-text: #fcd34d; --p4f-danger-bg: rgba(220, 38, 38, 0.17); --p4f-danger-border: rgba(248, 113, 113, 0.34); --p4f-danger-text: #fca5a5; --p4f-info-bg: rgba(37, 99, 235, 0.18); --p4f-info-border: rgba(96, 165, 250, 0.34); --p4f-info-text: #bfdbfe; --p4f-neutral-bg: rgba(255, 255, 255, 0.06); --p4f-neutral-border: rgba(255, 255, 255, 0.14); --p4f-neutral-text: #c2ccdc; /* O par de link inverte: no escuro o tom 700 da marca some no fundo. */ --p4f-link: #93c5fd; /* 9.6:1 sobre --p4f-surface */ --p4f-link-hover: #bfdbfe; --p4f-focus-ring: 0 0 0 3px rgba(96, 165, 250, 0.38); --p4f-focus-color: var(--p4f-primary-400); /* Profundidade no escuro vem de superfície mais clara, não de sombra preta (que some no marinho) -- por isso a escala encolhe. */ --p4f-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4); --p4f-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45); --p4f-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45); --p4f-shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.5); --p4f-shadow-xl: 0 24px 56px rgba(0, 0, 0, 0.6); --p4f-shadow-nav: 1px 0 0 var(--p4f-nav-border); --p4f-gradient-brand: linear-gradient( 135deg, var(--p4f-primary-600) 0%, var(--p4f-sky-500) 55%, var(--p4f-accent-400) 100% ); color-scheme: dark; } /* ====================================================================== Reset mínimo O admin herda o preflight do Tailwind (que vem compilado no Unfold), mas o Portal do Cliente não carrega Tailwind nenhum -- lá o padrão do navegador vale, e `box-sizing: content-box` soma o padding À largura. Foi assim que um `width: 100%` com 24px de padding gerou um conteúdo 48px mais largo que a área disponível, empurrando a última coluna da grade de KPIs pra fora da tela. Como o valor é o mesmo que o Tailwind já aplica, isto não muda nada no admin -- só fecha o buraco do portal. Mesma causa, segundo sintoma: o `` sem Tailwind mantém a margem padrão do navegador (8px). Numa tela como `.p4f-auth__page`, que é filha direta do body e usa `min-height: 100vh` pra centralizar o cartão de login, essa margem soma 16px (8 em cima, 8 embaixo) ALÉM dos 100vh -- a página fica mensurável apenas 16px mais alta que a viewport, mas isso já basta pra criar rolagem onde não devia haver nenhuma. Sem rolagem, o cartão está sempre centralizado; com ela, o navegador pode reabrir a página numa posição de rolagem lembrada (ex.: ao dar F5) e o cartão aparece deslocado pra cima. Zerar a margem fecha o buraco de novo: nenhuma folga pra rolar, centralização sempre igual. ====================================================================== */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; } /* ====================================================================== Acessibilidade transversal ====================================================================== */ /* Um anel de foco só, em todo o sistema, e só no foco por teclado -- :focus-visible não dispara em clique de mouse, então não polui. */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--p4f-focus-color); outline-offset: 2px; /* Sem `border-radius` aqui: o anel de foco não pode mudar a FORMA do controle. Um botão redondo ganhando cantos (ou o contrário) ao receber foco por teclado lê como falha de renderização. O contorno acompanha o raio que o próprio controle já tem. */ } /* Quem pediu menos movimento recebe o layout inteiro, só sem transição. Nada aqui depende de animação para funcionar. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } }