/* ============================================================================= lorica-theme.css — Identidade visual "HUD" do executável HUB_Lórica ----------------------------------------------------------------------------- Objetivo: dar ao app web (/app, módulos no iframe) a MESMA identidade do executável que a equipe já conhece — paleta navy "lorica" + fonte Inter — SEM alterar estrutura, marcação ou lógica. Como funciona: carregado DEPOIS de tailwind-standalone.css (e de app-shell.css no shell). Apenas re-declara as utilities "brand-*" (que antes resolviam para AZUL) para os tons navy "lorica" extraídos do próprio executável (app.asar). Por cascata (mesma especificidade, declaração posterior vence), o navy substitui o azul. NÃO toca em blue-*/green-*/amber-*/etc. — as colunas coloridas do pipeline e os ícones permanecem iguais. Rollback = remover este arquivo e seus . Paleta lorica (rgb): 50 245 247 250 · 100 233 238 245 · 200 205 217 230 · 300 161 181 207 400 111 139 177 · 500 75 108 151 · 600 57 85 125 · 700 47 70 102 800 41 60 86 · 900 28 42 61 ============================================================================= */ /* Fonte do executável. Progressivo: usa Inter se disponível (ou auto-hospedada no futuro, já permitido por font-src 'self'); senão cai para a fonte atual. */ html, body { font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, Roboto, sans-serif; } /* Variáveis consumidas pelo shell em app-shell.css (.nav-link.active e .brand-initial usam var(--brand-*) com !important). */ :root { --brand-50: #f5f7fa; --brand-100: #e9eef5; --brand-500: #4b6c97; --brand-600: #39557d; --brand-700: #2f4666; --brand-900: #1c2a3d; } /* --- Remap das utilities brand-* (azul -> navy lorica) --- */ .bg-brand-50 { background-color: rgb(245 247 250 / var(--tw-bg-opacity, 1)); } .bg-brand-100 { background-color: rgb(233 238 245 / var(--tw-bg-opacity, 1)); } .bg-brand-600 { background-color: rgb(57 85 125 / var(--tw-bg-opacity, 1)); } .bg-brand-700 { background-color: rgb(47 70 102 / var(--tw-bg-opacity, 1)); } .text-brand-100 { color: rgb(233 238 245 / var(--tw-text-opacity, 1)); } .text-brand-600 { color: rgb(57 85 125 / var(--tw-text-opacity, 1)); } .text-brand-700 { color: rgb(47 70 102 / var(--tw-text-opacity, 1)); } .border-brand-300 { border-color: rgb(161 181 207 / var(--tw-border-opacity, 1)); } /* Cabeçalho do modal de detalhes do lead: gradiente navy sólido (estilo HUD) */ .from-brand-600 { --tw-gradient-from: #39557d var(--tw-gradient-from-position); --tw-gradient-to: #39557d00 var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } .to-brand-700 { --tw-gradient-to: #2f4666 var(--tw-gradient-to-position); } .to-brand-800 { --tw-gradient-to: #293c56 var(--tw-gradient-to-position); } /* Estados hover/focus — sobrescreve SOMENTE brand; blue-* permanece intacto */ .hover\:bg-brand-100:hover { background-color: rgb(233 238 245 / var(--tw-bg-opacity, 1)); } .hover\:bg-brand-700:hover { background-color: rgb(47 70 102 / var(--tw-bg-opacity, 1)); } .hover\:text-brand-700:hover { color: rgb(47 70 102 / var(--tw-text-opacity, 1)); } .hover\:border-brand-500:hover { border-color: rgb(75 108 151 / var(--tw-border-opacity, 1)); } .focus\:border-brand-500:focus { border-color: rgb(75 108 151 / var(--tw-border-opacity, 1)); } .focus\:ring-brand-500:focus { --tw-ring-color: rgb(75 108 151 / var(--tw-ring-opacity, 1)); } .ring-brand-500 { --tw-ring-color: rgb(75 108 151 / var(--tw-ring-opacity, 1)); } /* ============================================================================= v2 — FIDELIDADE AO EXECUTÁVEL (HUD navy). Aditivo e reversível. ----------------------------------------------------------------------------- Objetivo: deixar o CRM web visualmente igual ao HUB_Lórica.exe — canvas navy claro (lorica-50), cards brancos que "saltam" com sombra suave + cantos arredondados, colunas uniformes com acento de cor + bolinha por estágio, e remoção do azul remanescente (slider do pipeline). NÃO altera HTML nem lógica: tudo via seletores escopados (.kanban-column[data-status=...]) e remap de utilities. Rollback = apagar este bloco. ============================================================================= */ /* 1) Canvas navy claro — gray-50 (#f9fafb) -> lorica-50 (#f5f7fa). Atinge body, toolbars e cabeçalhos de modal de forma coesa. */ .bg-gray-50 { background-color: rgb(245 247 250 / var(--tw-bg-opacity, 1)); } /* Texto base navy escuro (lorica-900), como no exe. Utilities text-gray-* nos elementos continuam vencendo onde já aplicadas. */ body { color: #1c2a3d; } /* 2) Cards do pipeline — brancos, cantos arredondados (.75rem) e sombra suave, exatamente como o "card" do exe. O hover-lift já existe no crm.html. */ .lead-card { background-color: #ffffff; border: 1px solid #e9eef5; border-radius: .75rem; box-shadow: 0 1px 2px 0 rgb(0 0 0 / .06), 0 1px 3px 0 rgb(0 0 0 / .08); } /* 3) Colunas do Kanban — superfície uniforme suave (lorica-100-ish) + acento de topo por estágio. Especificidade [0,1,1] vence as utilities bg-*-50/100 sem !important e sem tocar no HTML. .drag-over (0,2,0) continua vencendo. */ .kanban-column[data-status] { background-color: #eef2f8; border: 1px solid #e1e8f1; border-top: 3px solid #a1b5cf; /* fallback (slate) */ } .kanban-column[data-status="prospeccao"] { border-top-color: #64748b; } .kanban-column[data-status="qualificacao"] { border-top-color: #0284c7; } .kanban-column[data-status="negociacao"] { border-top-color: #d97706; } .kanban-column[data-status="fechamento"] { border-top-color: #0d9488; } .kanban-column[data-status="retorno"] { border-top-color: #7c3aed; } .kanban-column[data-status="ganho"] { border-top-color: #16a34a; } .kanban-column[data-status="perdido"] { border-top-color: #e11d48; } .kanban-column[data-status="abortado"] { border-top-color: #94a3b8; } /* Bolinha de cor antes do título da coluna — o "● Estágio" do exe. */ .kanban-column[data-status] > div h3 { color: #1c2a3d; } .kanban-column[data-status] > div h3::before { content: ""; display: inline-block; width: .5rem; height: .5rem; border-radius: 9999px; margin-right: .5rem; vertical-align: middle; background: #a1b5cf; } .kanban-column[data-status="prospeccao"] > div h3::before { background: #64748b; } .kanban-column[data-status="qualificacao"] > div h3::before { background: #0284c7; } .kanban-column[data-status="negociacao"] > div h3::before { background: #d97706; } .kanban-column[data-status="fechamento"] > div h3::before { background: #0d9488; } .kanban-column[data-status="retorno"] > div h3::before { background: #7c3aed; } .kanban-column[data-status="ganho"] > div h3::before { background: #16a34a; } .kanban-column[data-status="perdido"] > div h3::before { background: #e11d48; } .kanban-column[data-status="abortado"] > div h3::before { background: #94a3b8; } /* Pílula de contagem — branca com texto navy, como o contador cinza do exe. [0,1,1]+atributo vence bg-*-200/300 sem tocar no HTML. */ .kanban-column[data-status] span[id^="count-"] { background-color: #ffffff; color: #2f4666; border: 1px solid #d8e0ec; } /* 4) Slider do topo do pipeline — troca o gradiente AZUL por navy. !important vence a regra inline (que carrega depois, mas é normal/sem !important). */ .pipeline-top-slider::-webkit-slider-thumb { background: linear-gradient(90deg, #4b6c97 0%, #2f4666 100%) !important; border-color: rgba(47, 70, 102, 0.45) !important; box-shadow: 0 2px 8px rgba(47, 70, 102, 0.30) !important; } .pipeline-top-slider::-moz-range-thumb { background: linear-gradient(90deg, #4b6c97 0%, #2f4666 100%) !important; border-color: rgba(47, 70, 102, 0.45) !important; box-shadow: 0 2px 8px rgba(47, 70, 102, 0.30) !important; }