/* ============================================================================= MOTOR DE MÁSCARAS (temas) — Phoinix ============================================================================= Todo o visual do CRM é dirigido por tokens (custom properties) em :root. Cada tema (:root override em html[data-tema="..."]) redefine só os tokens — os componentes abaixo consomem SÓ var(--token), nunca hex direto. "classico" é o visual ATUAL do sistema (extraído de templates/base.html sem nenhuma alteração de valor) e vive nos valores default de :root — ou seja, se data-tema vier ausente/inválido, o app renderiza IDÊNTICO a antes desta mudança. As outras três máscaras ("executiva-clara", "torre-de- controle", "voo-moderno") implementam a paleta/tipografia/densidade de docs/propostas-visuais//DESIGN.md. Ver app/main.py (TEMAS_VALIDOS, tema_efetivo) e templates/base.html (seletor de máscara + atributo data-tema no ). ========================================================================== */ /* ----------------------------------------------------------------------- 1. TOKENS — default = "classico" (o visual de hoje) -------------------------------------------------------------------- */ :root { /* Superfícies */ --cor-fundo: #faf8f6; --cor-sidebar: var(--cor-acento); --cor-cartao: #ffffff; --cor-cartao-alt: #f3ece6; /* cabeçalho de tabela, faixas */ --cor-cartao-hover: #ece0d5; /* hover de th ordenável / linha */ --cor-zebra: transparent; /* linha alternada de tabela (classico: nenhuma) */ --cor-input: #ffffff; --cor-hover-linha: transparent; /* hover de linha de tabela (classico: nenhum) */ /* Texto */ --texto-principal: #22201e; --texto-secundario: #5c554c; --texto-terciario: #7a7267; --texto-invertido: #ffffff; /* Bordas */ --borda: #e5ded8; --borda-forte: #e5ded8; /* Acento (marca) */ --cor-acento: #8b1e3f; --cor-acento-hover: #8b1e3f; /* == acento em classico: sem hover novo */ --cor-acento-texto: #ffffff; /* texto sobre fundo de acento (botões) */ --cor-acento-tint: transparent; /* fundo tênue do acento (focus ring etc.) */ /* Sidebar (podem divergir do genérico texto/acento em temas escuro↔claro) */ --sidebar-texto: #ffffff; --sidebar-texto-opacidade: .82; --sidebar-hover-bg: rgba(255, 255, 255, .08); --sidebar-ativo-bg: rgba(255, 255, 255, .16); --sidebar-ativo-borda-lado: right; --sidebar-ativo-borda-cor: #ffffff; --sidebar-badge-bg: #ffffff; --sidebar-badge-texto: var(--cor-acento); --sidebar-titulo-transform: none; --sidebar-titulo-tracking: normal; --sidebar-titulo-fonte: var(--fonte-corpo); /* Estados semânticos (fundo / texto / borda) */ --ok-bg: #dff5e1; --ok-texto: #186a2e; --ok-borda: transparent; --warn-bg: #fff3cd; --warn-texto: #8a6100; --warn-borda: transparent; --canc-bg: #fbe1e5; --canc-texto: #9c1c2e; --canc-borda: transparent; --info-bg: #eee2d8; --info-texto: #5c554c; --info-borda: transparent; --futuro-bg: #eee2d8; --futuro-texto: #5c554c; --futuro-borda: transparent; --cor-positivo: #186a2e; --cor-negativo: #b00020; --cor-erro: #b00020; /* Linhas de destaque de tabela */ --linha-vigente-bg: #fbeef2; --linha-destaque-bg: #fbe1e5; /* Tipografia */ --fonte-corpo: -apple-system, 'Segoe UI', sans-serif; --fonte-titulo: var(--fonte-corpo); --fonte-numeros: var(--fonte-corpo); --fonte-destaque: var(--fonte-corpo); --peso-destaque: 700; --peso-titulo: normal; /* Cabeçalho de tabela (th): "classico" é texto normal, sem small caps */ --th-transform: none; --th-tracking: normal; --th-peso: 600; --th-tamanho: 1em; --th-cor: var(--texto-principal); --th-borda-cor: var(--borda); /* Raios */ --raio-sm: 6px; --raio-md: 8px; --raio-pill: 999px; /* Sombras */ --sombra-cartao: none; --sombra-col-acoes: -4px 0 6px -4px rgba(0, 0, 0, .2); /* Densidade de tabela */ --cel-pad-y: .55rem; --cel-pad-x: .8rem; --cel-pad-y-densa: .4rem; --cel-pad-x-densa: .55rem; --tabela-fonte-densa: .84rem; /* Layout / espaçamento */ --largura-sidebar: 230px; --largura-main: 1500px; --largura-main-estreito: 1100px; --gap-secao: 2rem; } /* ----------------------------------------------------------------------- 2. MÁSCARAS — cada bloco só redefine tokens (+ overrides estruturais mínimos, sinalizados com comentário "estrutural"). -------------------------------------------------------------------- */ /* ---- Executiva Clara: luxo contido/editorial, creme + dourado, serifa em display, small caps recessivos. Ver docs/propostas-visuais/executiva-clara/DESIGN.md ---- */ html[data-tema="executiva-clara"] { --cor-fundo: #F7F2E9; --cor-sidebar: #F1EADD; --cor-cartao: #FDFBF6; --cor-cartao-alt: var(--cor-cartao); --cor-cartao-hover: #F2E7CF; --cor-zebra: #F9F5EC; --cor-input: #FFFDF9; --cor-hover-linha: #F2E7CF; --texto-principal: #262119; --texto-secundario: #5C5346; --texto-terciario: #93887A; --texto-invertido: #262119; --borda: #E4DBCA; --borda-forte: #D5C9B2; --cor-acento: #A17C33; --cor-acento-hover: #7E5F22; --cor-acento-texto: #262119; --cor-acento-tint: #F2E7CF; --sidebar-texto: #5C5346; --sidebar-texto-opacidade: 1; --sidebar-hover-bg: rgba(161, 124, 51, .08); --sidebar-ativo-bg: rgba(161, 124, 51, .1); --sidebar-ativo-borda-lado: left; --sidebar-ativo-borda-cor: var(--cor-acento); --sidebar-badge-bg: var(--cor-acento); --sidebar-badge-texto: #FDFBF6; --sidebar-titulo-transform: none; --sidebar-titulo-tracking: .14em; --sidebar-titulo-fonte: var(--fonte-titulo); --ok-bg: #E8EEDF; --ok-texto: #4A6234; --ok-borda: #D3DEC2; --warn-bg: #F6EAD0; --warn-texto: #8A6414; --warn-borda: #E7D3A4; --canc-bg: #F3E1DC; --canc-texto: #93402F; --canc-borda: #E4C6BD; --info-bg: #E7E9E2; --info-texto: #55604B; --info-borda: #CDD2C2; --futuro-bg: #E7E9E2; --futuro-texto: #55604B; --futuro-borda: #CDD2C2; --cor-positivo: #4A6234; --cor-negativo: #93402F; --cor-erro: #93402F; --linha-vigente-bg: var(--cor-acento-tint); --linha-destaque-bg: #F3E1DC; --fonte-corpo: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif; --fonte-titulo: "Iowan Old Style", "Palatino", "Palatino Linotype", Georgia, "Times New Roman", serif; --fonte-numeros: var(--fonte-corpo); --fonte-destaque: var(--fonte-titulo); --peso-destaque: 500; --peso-titulo: 500; --th-transform: uppercase; --th-tracking: .14em; --th-peso: 600; --th-tamanho: .68rem; --th-cor: var(--texto-terciario); --th-borda-cor: var(--borda-forte); --raio-sm: 4px; --raio-md: 8px; --sombra-cartao: 0 1px 2px rgba(74, 60, 34, .05), 0 4px 16px rgba(74, 60, 34, .05); --sombra-col-acoes: -6px 0 8px -6px rgba(74, 60, 34, .18); --largura-sidebar: 248px; } /* estrutural: fio à direita da sidebar (paper-deep, não mais sólida) */ html[data-tema="executiva-clara"] .sidebar { border-right: 1px solid var(--borda); } /* estrutural: zebra sutil nas tabelas (a proposta pede linhas alternadas) */ html[data-tema="executiva-clara"] tbody tr:nth-child(even) td { background: var(--cor-zebra); } html[data-tema="executiva-clara"] tbody tr:hover td { background: var(--cor-hover-linha); } html[data-tema="executiva-clara"] h1, html[data-tema="executiva-clara"] h2 { font-family: var(--fonte-titulo); font-weight: var(--peso-titulo); } /* ---- Torre de Controle: dark mode de operação, mono tabular, acento âmbar. Ver docs/propostas-visuais/torre-de-controle/DESIGN.md ---- */ html[data-tema="torre-de-controle"] { --cor-fundo: #0a0c0f; --cor-sidebar: #111318; --cor-cartao: #111318; --cor-cartao-alt: #161920; --cor-cartao-hover: #20242e; --cor-zebra: transparent; --cor-input: #0d0f13; --cor-hover-linha: #20242e; --texto-principal: #e9ebf0; --texto-secundario: #9aa3b2; --texto-terciario: #656e7d; --texto-invertido: #0a0c0f; --borda: #242a35; --borda-forte: #343c4a; --cor-acento: #ff9a3c; --cor-acento-hover: #ffb35e; --cor-acento-texto: #14100a; --cor-acento-tint: rgba(255, 154, 60, .13); --sidebar-texto: #e9ebf0; --sidebar-texto-opacidade: 1; --sidebar-hover-bg: #20242e; --sidebar-ativo-bg: rgba(255, 154, 60, .13); --sidebar-ativo-borda-lado: left; --sidebar-ativo-borda-cor: var(--cor-acento); --sidebar-badge-bg: rgba(255, 154, 60, .18); --sidebar-badge-texto: var(--cor-acento); --sidebar-titulo-transform: uppercase; --sidebar-titulo-tracking: .08em; --sidebar-titulo-fonte: var(--fonte-corpo); --ok-bg: rgba(47, 214, 142, .13); --ok-texto: #2fd68e; --ok-borda: rgba(47, 214, 142, .35); --warn-bg: rgba(242, 193, 78, .13); --warn-texto: #f2c14e; --warn-borda: rgba(242, 193, 78, .35); --canc-bg: rgba(255, 92, 102, .13); --canc-texto: #ff5c66; --canc-borda: rgba(255, 92, 102, .35); --info-bg: rgba(90, 166, 255, .13); --info-texto: #5aa6ff; --info-borda: rgba(90, 166, 255, .35); --futuro-bg: rgba(90, 166, 255, .13); --futuro-texto: #5aa6ff; --futuro-borda: rgba(90, 166, 255, .35); --cor-positivo: #2fd68e; --cor-negativo: #ff5c66; --cor-erro: #ff5c66; --linha-vigente-bg: rgba(255, 154, 60, .08); --linha-destaque-bg: rgba(255, 92, 102, .1); --fonte-corpo: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --fonte-titulo: var(--fonte-corpo); --fonte-numeros: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --fonte-destaque: var(--fonte-numeros); --peso-destaque: 700; --peso-titulo: 700; --th-transform: uppercase; --th-tracking: .07em; --th-peso: 700; --th-tamanho: .68rem; --th-cor: var(--texto-terciario); --th-borda-cor: var(--borda-forte); --raio-sm: 4px; --raio-md: 6px; --sombra-cartao: none; --sombra-col-acoes: -6px 0 10px -6px rgba(0, 0, 0, .5); --cel-pad-y-densa: .35rem; --cel-pad-x-densa: .5rem; --tabela-fonte-densa: .8rem; } html[data-tema="torre-de-controle"] body { color-scheme: dark; } html[data-tema="torre-de-controle"] .sidebar { border-right: 1px solid var(--borda); } html[data-tema="torre-de-controle"] table { border-color: var(--borda); } html[data-tema="torre-de-controle"] td.num, html[data-tema="torre-de-controle"] th.num, html[data-tema="torre-de-controle"] .lucro-estimado, html[data-tema="torre-de-controle"] .linha-lucro { font-family: var(--fonte-numeros); } html[data-tema="torre-de-controle"] tbody tr:hover td { background: var(--cor-hover-linha); } /* ---- Voo Moderno: SaaS claro-neutro, sidebar escura em gradiente, indigo + gradiente âmbar→coral pontual. Ver docs/propostas-visuais/voo-moderno/DESIGN.md. Aproximação desta fase: mantém o esqueleto