/* ============================================================ CRM CYPRIANO — TEMA (cores da marca Rodrigo Cypriano Fotografia) Grafite #3c3c3b · Petróleo #25535f · Areia #e0d6c4 · Dourado #c28235 Cinco temas: areia (padrão) · petroleo · classico (branco + azul, visual original) · escuro · alboom (cores e fonte do Alboom) → Carregado por TODAS as telas do painel, antes do CSS de cada tela. Dourado em texto sobre fundo claro usa #9a6425 (contraste 5:1). ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Montserrat:wght@500;600;700&family=Open+Sans:wght@300;400;500;600;700&display=swap'); :root, [data-tema="areia"] { --t-bg: #f7f4ee; --t-surface: #ffffff; --t-surface-2: #faf8f4; --t-surface-3: #f1ece3; --t-border: #e8e1d4; --t-border-strong: #d3c8b5; --t-text: #3c3c3b; --t-muted: #7b776f; --t-primary: #25535f; --t-primary-hover: #1d4550; --t-on-primary: #ffffff; --t-accent: #c28235; --t-accent-text: #9a6425; --t-accent-soft: #f5ecdf; --t-info: #25535f; --t-info-soft: #e3edf0; --t-ok: #2f7d5b; --t-ok-soft: #e4f1ea; --t-warn: #b7791f; --t-warn-text: #8a5a17; --t-warn-soft: #f7eedd; --t-danger: #b4432f; --t-danger-soft: #f8e6e2; --t-side-bg: #3c3c3b; --t-side-text: #d9d3c7; --t-side-muted: #a8a196; --t-side-hover: rgba(255,255,255,.07); --t-side-active-bg: rgba(194,130,53,.18); --t-side-active: #e0b27a; --t-topbar: #ffffff; --t-radius: 10px; --t-shadow: 0 1px 2px rgba(60,60,59,.06), 0 4px 16px rgba(60,60,59,.05); --t-focus: rgba(37,83,95,.22); } [data-tema="petroleo"] { --t-bg: #f4f6f6; --t-surface: #ffffff; --t-surface-2: #f8f9f9; --t-surface-3: #eef1f2; --t-border: #e3e8e9; --t-border-strong: #c9d2d4; --t-text: #2f3435; --t-muted: #6f7a7c; --t-primary: #25535f; --t-primary-hover: #1d4550; --t-on-primary: #ffffff; --t-accent: #c28235; --t-accent-text: #9a6425; --t-accent-soft: #f7efe4; --t-info: #25535f; --t-info-soft: #e3edf0; --t-ok: #2f7d5b; --t-ok-soft: #e4f1ea; --t-warn: #b7791f; --t-warn-text: #8a5a17; --t-warn-soft: #f7eedd; --t-danger: #b4432f; --t-danger-soft: #f8e6e2; --t-side-bg: #25535f; --t-side-text: #cfe0e3; --t-side-muted: #9dbac0; --t-side-hover: rgba(255,255,255,.08); --t-side-active-bg: rgba(255,255,255,.14); --t-side-active: #ffffff; --t-topbar: #ffffff; --t-radius: 8px; --t-shadow: 0 1px 2px rgba(0,0,0,.05); --t-focus: rgba(37,83,95,.22); } [data-tema="classico"] { /* visual padrão original do painel: branco + azul */ --t-bg: #f1f5f9; --t-surface: #ffffff; --t-surface-2: #f8fafc; --t-surface-3: #f1f5f9; --t-border: #e2e8f0; --t-border-strong: #cbd5e1; --t-text: #1e293b; --t-muted: #64748b; --t-primary: #3b82f6; --t-primary-hover: #2563eb; --t-on-primary: #ffffff; --t-accent: #3b82f6; --t-accent-text: #1d4ed8; --t-accent-soft: #eff6ff; --t-info: #1e40af; --t-info-soft: #eff6ff; --t-ok: #059669; --t-ok-soft: #ecfdf5; --t-warn: #d97706; --t-warn-text: #92400e; --t-warn-soft: #fffbeb; --t-danger: #dc2626; --t-danger-soft: #fef2f2; --t-side-bg: #1e293b; --t-side-text: #94a3b8; --t-side-muted: #64748b; --t-side-hover: rgba(255,255,255,.07); --t-side-active-bg: #3b82f6; --t-side-active: #ffffff; --t-topbar: #ffffff; --t-radius: 8px; --t-shadow: 0 1px 3px rgba(0,0,0,.05); --t-focus: rgba(59,130,246,.25); } [data-tema="escuro"] { --t-bg: #232322; --t-surface: #2d2d2c; --t-surface-2: #343433; --t-surface-3: #3a3a38; --t-border: #41413f; --t-border-strong: #56554f; --t-text: #ece6da; --t-muted: #a39d92; --t-primary: #d69a52; --t-primary-hover: #e0aa66; --t-on-primary: #1f1f1e; --t-accent: #d69a52; --t-accent-text: #e0b27a; --t-accent-soft: rgba(214,154,82,.14); --t-info: #8fbcc7; --t-info-soft: rgba(143,188,199,.14); --t-ok: #6cc59a; --t-ok-soft: rgba(108,197,154,.14); --t-warn: #e3b163; --t-warn-text: #e3b163; --t-warn-soft: rgba(227,177,99,.14); --t-danger: #ec8a74; --t-danger-soft: rgba(236,138,116,.14); --t-side-bg: #1b1b1a; --t-side-text: #bdb6aa; --t-side-muted: #8a847a; --t-side-hover: rgba(255,255,255,.05); --t-side-active-bg: rgba(214,154,82,.15); --t-side-active: #e0b27a; --t-topbar: #2a2a29; --t-radius: 10px; --t-shadow: none; --t-focus: rgba(214,154,82,.28); color-scheme: dark; } [data-tema="alboom"] { /* cores do Alboom CRM: menu grafite, fundo cinza-claro, cartões brancos, azul nas ações, verde nos status */ --t-bg: #f2f2f2; --t-surface: #ffffff; --t-surface-2: #f9f9f9; --t-surface-3: #f1f1f2; --t-border: #e5e6e7; --t-border-strong: #d2d4d6; --t-text: #333333; --t-muted: #737373; --t-primary: #1c84c6; --t-primary-hover: #1873ad; --t-on-primary: #ffffff; --t-accent: #f8ac59; --t-accent-text: #a8641a; --t-accent-soft: #fef3e6; --t-info: #1c84c6; --t-info-soft: #e7f2fa; --t-ok: #2f9160; --t-ok-soft: #e4f4ea; --t-warn: #c77016; --t-warn-text: #a8641a; --t-warn-soft: #fef3e6; --t-danger: #d9432a; --t-danger-soft: #fcebe8; --t-side-bg: #2f2f2f; --t-side-text: #c2c2c2; --t-side-muted: #8c8c8c; --t-side-hover: rgba(255,255,255,.05); --t-side-active-bg: #0d0d0d; --t-side-active: #ffffff; --t-topbar: #ffffff; --t-radius: 4px; --t-shadow: 0 1px 1px rgba(0,0,0,.04); --t-focus: rgba(28,132,198,.25); } /* ---------- Tipografia: Montserrat nos títulos, Inter no texto ---------- */ :root { --t-font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --t-font-title: 'Montserrat', 'Inter', system-ui, sans-serif; --t-title-weight: 600; } /* Alboom usa Gotham Narrow (paga); Open Sans é a fonte reserva que o próprio Alboom usa. Títulos finos como lá. */ [data-tema="alboom"] { --t-font: 'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --t-font-title: 'Open Sans', system-ui, sans-serif; --t-title-weight: 300; } body { font-family: var(--t-font); background-color: var(--t-bg); color: var(--t-text); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, .modal-title, .crm-topbar h2, .crm-title-area h2, .topbar h2, .crm-kpi .v, .stat-num, .crm-price, .fc .fc-toolbar-title, .crm-fluxo-head h5 { font-family: var(--t-font-title); letter-spacing: -.005em; } .crm-kpi .v, .stat-num, .crm-price, .crm-table td, .crm-fin td { font-variant-numeric: tabular-nums; } /* ---------- Componentes do Bootstrap seguindo o tema ---------- */ a { color: var(--t-primary); } .text-muted { color: var(--t-muted) !important; } .text-success { color: var(--t-ok) !important; } .text-warning { color: var(--t-warn) !important; } .text-danger { color: var(--t-danger) !important; } .modal-content { background: var(--t-surface); color: var(--t-text); border-radius: var(--t-radius); } .modal-header, .modal-footer { border-color: var(--t-border); } .form-control, .form-select { background-color: var(--t-surface); color: var(--t-text); border-color: var(--t-border); } .form-control::placeholder { color: var(--t-muted); opacity: .8; } .form-control:disabled, .form-select:disabled { background-color: var(--t-surface-3); color: var(--t-muted); } .form-control:focus, .form-select:focus { border-color: var(--t-primary); box-shadow: 0 0 0 .2rem var(--t-focus); background-color: var(--t-surface); color: var(--t-text); } .form-check-input:checked { background-color: var(--t-primary); border-color: var(--t-primary); } .form-check-input:focus { box-shadow: 0 0 0 .2rem var(--t-focus); border-color: var(--t-primary); } .btn-primary { --bs-btn-bg: var(--t-primary); --bs-btn-border-color: var(--t-primary); --bs-btn-color: var(--t-on-primary); --bs-btn-hover-bg: var(--t-primary-hover); --bs-btn-hover-border-color: var(--t-primary-hover); --bs-btn-hover-color: var(--t-on-primary); --bs-btn-active-bg: var(--t-primary-hover); --bs-btn-active-border-color: var(--t-primary-hover); --bs-btn-active-color: var(--t-on-primary); } .btn-outline-primary { --bs-btn-color: var(--t-primary); --bs-btn-border-color: var(--t-primary); --bs-btn-hover-bg: var(--t-primary); --bs-btn-hover-border-color: var(--t-primary); --bs-btn-hover-color: var(--t-on-primary); } .table { --bs-table-bg: transparent; --bs-table-color: var(--t-text); --bs-table-border-color: var(--t-border); --bs-table-striped-bg: var(--t-surface-2); --bs-table-hover-bg: var(--t-surface-2); } .nav-tabs { --bs-nav-tabs-border-color: var(--t-border); --bs-nav-tabs-link-active-bg: var(--t-surface); --bs-nav-tabs-link-active-color: var(--t-primary); --bs-nav-tabs-link-active-border-color: var(--t-border) var(--t-border) var(--t-surface); } .dropdown-menu { --bs-dropdown-bg: var(--t-surface); --bs-dropdown-color: var(--t-text); --bs-dropdown-border-color: var(--t-border); --bs-dropdown-link-color: var(--t-text); --bs-dropdown-link-hover-bg: var(--t-surface-2); } .badge.bg-info { background-color: var(--t-info-soft) !important; color: var(--t-info) !important; } .alert-info { --bs-alert-bg: var(--t-info-soft); --bs-alert-color: var(--t-info); --bs-alert-border-color: transparent; } .alert-warning { --bs-alert-bg: var(--t-warn-soft); --bs-alert-color: var(--t-warn-text); --bs-alert-border-color: transparent; } .alert-danger { --bs-alert-bg: var(--t-danger-soft); --bs-alert-color: var(--t-danger); --bs-alert-border-color: transparent; } .spinner-border { color: currentColor; } ::selection { background: var(--t-accent-soft); } input[type="checkbox"], input[type="radio"], input[type="range"] { accent-color: var(--t-primary); } .fc { --fc-page-bg-color: var(--t-surface); --fc-neutral-bg-color: var(--t-surface-2); --fc-neutral-text-color: var(--t-muted); --fc-list-event-hover-bg-color: var(--t-surface-2); --fc-today-bg-color: var(--t-accent-soft); --fc-now-indicator-color: var(--t-danger); } .fc .fc-col-header-cell { background: var(--t-surface-2); } /* ---------- Detalhes do tema Alboom (filtro ativo em azul, como lá) ---------- */ [data-tema="alboom"] .crm-pill.active, [data-tema="alboom"] .status-pill.active { background: var(--t-primary); border-color: var(--t-primary); color: var(--t-on-primary); } /* ---------- Seletor de tema (fica na barra superior do painel) ---------- */ .tema-seletor { display: inline-flex; gap: 4px; padding: 3px; border: 1px solid var(--t-border); border-radius: 999px; background: var(--t-surface-2); } .tema-seletor button { width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; position: relative; } .tema-seletor button.on { border-color: var(--t-primary); } .tema-seletor button[data-tema-op="areia"] { background: linear-gradient(135deg, #3c3c3b 0 50%, #e0d6c4 50% 100%); } .tema-seletor button[data-tema-op="petroleo"] { background: linear-gradient(135deg, #25535f 0 50%, #f4f6f6 50% 100%); } .tema-seletor button[data-tema-op="classico"] { background: linear-gradient(135deg, #1e293b 0 50%, #3b82f6 50% 100%); } .tema-seletor button[data-tema-op="escuro"] { background: linear-gradient(135deg, #1b1b1a 0 50%, #d69a52 50% 100%); } .tema-seletor button[data-tema-op="alboom"] { background: linear-gradient(135deg, #2f2f2f 0 50%, #1c84c6 50% 100%); } /* Configurações → Aparência: cartões de tema */ .tema-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; } .tema-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; text-align: left; cursor: pointer; border: 2px solid var(--t-border); border-radius: 12px; background: var(--t-surface, transparent); color: inherit; font: inherit; } .tema-card:hover { border-color: var(--t-primary); } .tema-card.on { border-color: var(--t-primary); } .tema-card-txt { display: flex; flex-direction: column; flex: 1; min-width: 0; } .tema-card-txt small { opacity: .7; } .tema-check { color: var(--t-primary); font-size: 1.1rem; visibility: hidden; } .tema-card.on .tema-check { visibility: visible; } .tema-amostra { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; border: 1px solid var(--t-border); } .tema-amostra-areia { background: linear-gradient(135deg, #3c3c3b 0 50%, #e0d6c4 50% 100%); } .tema-amostra-petroleo { background: linear-gradient(135deg, #25535f 0 50%, #f4f6f6 50% 100%); } .tema-amostra-classico { background: linear-gradient(135deg, #1e293b 0 50%, #3b82f6 50% 100%); } .tema-amostra-escuro { background: linear-gradient(135deg, #1b1b1a 0 50%, #d69a52 50% 100%); } .tema-amostra-alboom { background: linear-gradient(135deg, #2f2f2f 0 50%, #1c84c6 50% 100%); }