/* ============================================================ TEMA ESCURO — Psicosphera OS ------------------------------------------------------------ Ativado por data-theme="dark" no (theme.js persiste em localStorage). Sobrescreve os tokens :root e as superfícies de fundo/borda/texto claras herdadas de styles.css, crm.css e clinica.css. Azul de destaque preservado. ============================================================ */ /* botão de alternância no header */ .theme-toggle{height:32px;width:32px;border:1px solid var(--line);background:#fff;border-radius:7px;color:#7c8c9e;font-size:15px;display:grid;place-items:center} .theme-toggle:hover{background:#f2f7fb} :root[data-theme="dark"]{ --ink:#e4ebf3;--muted:#94a6b8;--line:#2a3644; --blue:#7fa9ca;--blue-dark:#8fb6d4;--soft-blue:#1d2a3a;--bg:#0f1621; --surface:#18212e;--surface-2:#141c27;--surface-3:#1e2937;--border-2:#31404f; } /* superfícies base */ :root[data-theme="dark"] body{background:var(--bg);color:var(--ink)} :root[data-theme="dark"] .sidebar, :root[data-theme="dark"] main>header, :root[data-theme="dark"] .metrics article, :root[data-theme="dark"] .card, :root[data-theme="dark"] .calendar, :root[data-theme="dark"] .chat-layout, :root[data-theme="dark"] .inbox-layout, :root[data-theme="dark"] .product-table, :root[data-theme="dark"] .people-table, :root[data-theme="dark"] .baixa-wrap, :root[data-theme="dark"] .api-box, :root[data-theme="dark"] .regua, :root[data-theme="dark"] .modelo, :root[data-theme="dark"] .matriz-card, :root[data-theme="dark"] .funnel-card, :root[data-theme="dark"] .entity, :root[data-theme="dark"] .recon-list, :root[data-theme="dark"] .recon-hero, :root[data-theme="dark"] .sync-bar, :root[data-theme="dark"] .cli-kpis article, :root[data-theme="dark"] .crm-kpis article, :root[data-theme="dark"] .model-note, :root[data-theme="dark"] .workspace, :root[data-theme="dark"] .modal, :root[data-theme="dark"] .session-panel, :root[data-theme="dark"] .drawer{background:var(--surface);border-color:var(--border-2);color:var(--ink)} :root[data-theme="dark"] .drawer, :root[data-theme="dark"] .drawer-top, :root[data-theme="dark"] .dsec{background:var(--surface);border-color:var(--border-2)} :root[data-theme="dark"] .drawer{background:var(--surface-2)} /* cabeçalhos de tabela e faixas internas escuras */ :root[data-theme="dark"] .product-head, :root[data-theme="dark"] .people-head, :root[data-theme="dark"] .pac-head, :root[data-theme="dark"] .rec-head, :root[data-theme="dark"] .plano-head, :root[data-theme="dark"] .baixa-head, :root[data-theme="dark"] .nf-head, :root[data-theme="dark"] .sess-head, :root[data-theme="dark"] .doc-head, :root[data-theme="dark"] .cov-head, :root[data-theme="dark"] .fin-head, :root[data-theme="dark"] .baixa-toolbar, :root[data-theme="dark"] .api-base, :root[data-theme="dark"] .table-foot, :root[data-theme="dark"] .entity header, :root[data-theme="dark"] .entity footer, :root[data-theme="dark"] .kanban-col{background:var(--surface-2);color:var(--muted)} /* linhas de tabela / itens */ :root[data-theme="dark"] .people-row, :root[data-theme="dark"] .pac-row, :root[data-theme="dark"] .rec-row, :root[data-theme="dark"] .plano-row, :root[data-theme="dark"] .baixa-row, :root[data-theme="dark"] .nf-row, :root[data-theme="dark"] .doc-row, :root[data-theme="dark"] .product-row, :root[data-theme="dark"] .mail-row, :root[data-theme="dark"] .conversation, :root[data-theme="dark"] .deal, :root[data-theme="dark"] .chat-window, :root[data-theme="dark"] .mail-reader, :root[data-theme="dark"] .regua-item, :root[data-theme="dark"] .api-row, :root[data-theme="dark"] .recon-row, :root[data-theme="dark"] .campaign-list, :root[data-theme="dark"] .campaign-row{background:var(--surface);border-color:var(--border-2);color:var(--muted)} :root[data-theme="dark"] .pac-row:hover, :root[data-theme="dark"] .people-row:hover, :root[data-theme="dark"] .mini-btn:hover{background:var(--surface-3)} :root[data-theme="dark"] .pac-detail, :root[data-theme="dark"] .chat-history, :root[data-theme="dark"] .cal-col{background:var(--surface-2)} /* textos fortes */ :root[data-theme="dark"] h1,:root[data-theme="dark"] h2,:root[data-theme="dark"] h3,:root[data-theme="dark"] h4, :root[data-theme="dark"] .metrics h2,:root[data-theme="dark"] .cli-kpis h2,:root[data-theme="dark"] .crm-kpis h2, :root[data-theme="dark"] .who b,:root[data-theme="dark"] .pac-row .who b,:root[data-theme="dark"] .deal h4, :root[data-theme="dark"] .dfield b,:root[data-theme="dark"] .drawer-id h2,:root[data-theme="dark"] .modal h2, :root[data-theme="dark"] .sel-resumo strong,:root[data-theme="dark"] .valor-final b, :root[data-theme="dark"] .recon-side h3,:root[data-theme="dark"] .prox-row b,:root[data-theme="dark"] .conversation b, :root[data-theme="dark"] .mail-row b,:root[data-theme="dark"] .sec-title{color:var(--ink)} /* campos de formulário */ :root[data-theme="dark"] input,:root[data-theme="dark"] select,:root[data-theme="dark"] textarea, :root[data-theme="dark"] .crm-search,:root[data-theme="dark"] .search, :root[data-theme="dark"] .baixa-toolbar select,:root[data-theme="dark"] .crm-filters select, :root[data-theme="dark"] .modal input,:root[data-theme="dark"] .modal select,:root[data-theme="dark"] .modal textarea{ background:var(--surface-3);border-color:var(--border-2);color:var(--ink)} :root[data-theme="dark"] .crm-search input,:root[data-theme="dark"] .search input{background:transparent;color:var(--ink)} :root[data-theme="dark"] input::placeholder,:root[data-theme="dark"] textarea::placeholder{color:#6b7d8f} :root[data-theme="dark"] input[type="date"],:root[data-theme="dark"] input[type="time"]{color-scheme:dark} /* botões neutros */ :root[data-theme="dark"] .secondary,:root[data-theme="dark"] .mini-btn,:root[data-theme="dark"] .chip, :root[data-theme="dark"] .icon-button,:root[data-theme="dark"] .help,:root[data-theme="dark"] .theme-toggle, :root[data-theme="dark"] .select,:root[data-theme="dark"] .calendar-toolbar button, :root[data-theme="dark"] .disp-slot,:root[data-theme="dark"] .doc-acts button, :root[data-theme="dark"] .manage-pipeline,:root[data-theme="dark"] .pipeline-current, :root[data-theme="dark"] .verb{background:var(--surface-3);border-color:var(--border-2);color:#b9c8d8} :root[data-theme="dark"] .chip.on{background:#22354a;border-color:#39597a;color:#93c1e6} /* menus flutuantes */ :root[data-theme="dark"] .pipeline-menu,:root[data-theme="dark"] .toast{background:var(--surface-3);border-color:var(--border-2);color:var(--ink)} :root[data-theme="dark"] .toast{background:#22303f} /* nav */ :root[data-theme="dark"] .nav-item{color:#9fb1c2} :root[data-theme="dark"] .nav-item:hover,:root[data-theme="dark"] .nav-item.active{background:#1d2a3a;color:#8fbde0} :root[data-theme="dark"] .nav-item.active{box-shadow:inset 3px 0 0 #5f88ad} :root[data-theme="dark"] .crm-tabs button,:root[data-theme="dark"] .email-tabs button,:root[data-theme="dark"] .tabs button{color:#94a6b8} :root[data-theme="dark"] .crm-tabs .selected,:root[data-theme="dark"] .email-tabs .selected, :root[data-theme="dark"] .tabs .selected,:root[data-theme="dark"] .selected-view{color:#8fbde0} :root[data-theme="dark"] .selected-view{background:#22354a} /* insets / caixas de aviso mantêm o tom quente porém escuro */ :root[data-theme="dark"] .cli-kpis article.alert,:root[data-theme="dark"] .crm-kpis article.alert, :root[data-theme="dark"] .pac-row.has-alert,:root[data-theme="dark"] .callout, :root[data-theme="dark"] .api-warn,:root[data-theme="dark"] .plano-row.sem, :root[data-theme="dark"] .dfield.diverge,:root[data-theme="dark"] .sel-aviso:not(:empty){ background:#241d17;border-color:#4a3826} :root[data-theme="dark"] .api-warn.ok{background:#152420;border-color:#274a3a} :root[data-theme="dark"] .recon-fix,:root[data-theme="dark"] .valor-final, :root[data-theme="dark"] .drawer-quick div,:root[data-theme="dark"] .baixa-sessoes, :root[data-theme="dark"] .bx-sess,:root[data-theme="dark"] .aus-opt, :root[data-theme="dark"] .pac-detail-actions{background:var(--surface-3);border-color:var(--border-2)} /* código inline */ :root[data-theme="dark"] code{background:#22303f!important;color:#8fbde0!important} /* divisores internos */ :root[data-theme="dark"] .prox-row,:root[data-theme="dark"] .atraso-row,:root[data-theme="dark"] .falta-row, :root[data-theme="dark"] .dfield,:root[data-theme="dark"] .agenda-list>div, :root[data-theme="dark"] .disp-dia,:root[data-theme="dark"] .cad-sec{border-color:var(--border-2)} /* mensagens do chat */ :root[data-theme="dark"] .message.inbound{background:var(--surface-3);border-color:var(--border-2)} :root[data-theme="dark"] .message.outbound{background:#1f3346} /* calendário: faixa de linhas */ :root[data-theme="dark"] .cal-col{background:repeating-linear-gradient(to bottom,var(--surface-2) 0,var(--surface-2) 59px,#222d3a 60px)} /* popover de sessão */ :root[data-theme="dark"] .sessao-freq{background:var(--surface-2);border-color:var(--border-2)} :root[data-theme="dark"] .freq-opt{background:var(--surface-3);color:#b9c8d8} :root[data-theme="dark"] .freq-opt.on{background:#22354a;border-color:#39597a;color:#93c1e6} :root[data-theme="dark"] .sessao-tags span{background:var(--surface-3);color:#b9c8d8} :root[data-theme="dark"] .sessao-title h2,:root[data-theme="dark"] .sessao-data b{color:var(--ink)} :root[data-theme="dark"] .s-wa{background:#152420;border-color:#274a3a;color:#8fd0ac} :root[data-theme="dark"] .s-video{background:var(--surface-3);border-color:var(--border-2);color:#b9c8d8} /* dashboard de clientes */ :root[data-theme="dark"] .dash-card{background:var(--surface);border-color:var(--border-2)} :root[data-theme="dark"] .dash-card h2,:root[data-theme="dark"] .donut span, :root[data-theme="dark"] .chart-leg li b,:root[data-theme="dark"] .hbar>b, :root[data-theme="dark"] .dash-heading h3{color:var(--ink)} :root[data-theme="dark"] .donut:after{background:var(--surface)} :root[data-theme="dark"] .hbar-track,:root[data-theme="dark"] .cob-track{background:var(--surface-3)} /* ficha com abas */ :root[data-theme="dark"] .ficha-tabs button{background:var(--surface-3);color:#9fb1c2} :root[data-theme="dark"] .ficha-tabs .selected{background:#22354a;color:#93c1e6} :root[data-theme="dark"] .sess-hist,:root[data-theme="dark"] .doc-mini, :root[data-theme="dark"] .ficha-fin-cards article,:root[data-theme="dark"] .sh-row, :root[data-theme="dark"] .dm-row{background:var(--surface);border-color:var(--border-2)} :root[data-theme="dark"] .sh-main b,:root[data-theme="dark"] .ficha-fin-cards b, :root[data-theme="dark"] .dm-row b,:root[data-theme="dark"] .ficha-bar b{color:var(--ink)} :root[data-theme="dark"] .ficha-fin-cards article.warn-card{background:#241d17;border-color:#4a3826} /* avatares e marcadores coloridos permanecem — bom contraste no escuro */ /* ============================================================ LEGIBILIDADE DE VALORES E NÚMEROS NO ESCURO ------------------------------------------------------------ Muitos valores (R$), números e nomes usam o azul-marinho fixo #20364a / #182a3d, que some sobre o fundo escuro. Aqui todo texto forte volta a ser claro; as cores semânticas (positivo/negativo/ aviso) são reaplicadas em tom claro por cima. ============================================================ */ :root[data-theme="dark"] b, :root[data-theme="dark"] strong, :root[data-theme="dark"] .money, :root[data-theme="dark"] .ag-dia, :root[data-theme="dark"] .fin-cards h2, :root[data-theme="dark"] .cfg-title, :root[data-theme="dark"] .fluxo-table td, :root[data-theme="dark"] .fluxo-table th{ color: var(--ink) !important; } /* fundo claro das linhas de total do fluxo de caixa → escuro */ :root[data-theme="dark"] .fluxo-table tr.tot-rec th, :root[data-theme="dark"] .fluxo-table tr.tot-rec td{ background:var(--surface-3) !important; border-top-color:var(--border-2) !important; } :root[data-theme="dark"] .fluxo-table tr.result th, :root[data-theme="dark"] .fluxo-table tr.result td{ background:var(--surface-2) !important; border-top-color:var(--border-2) !important; } /* cores semânticas reaplicadas em tom claro (vencem a regra acima) */ :root[data-theme="dark"] .pos, :root[data-theme="dark"] .desc-cell, :root[data-theme="dark"] .fin-cards h2.pos, :root[data-theme="dark"] .fin-split b.pos{ color:#6fce9a !important; } :root[data-theme="dark"] .neg, :root[data-theme="dark"] .fin-cards h2.neg{ color:#ec9a82 !important; } :root[data-theme="dark"] .warn, :root[data-theme="dark"] .fin-cards h2.warn, :root[data-theme="dark"] .fin-split b.warn{ color:#e2c088 !important; } /* containers estruturais que ficaram claros no escuro */ :root[data-theme="dark"] .ag-wrap, :root[data-theme="dark"] .replace-bar, :root[data-theme="dark"] .ag-sessao{ background:var(--surface) !important; border-color:var(--border-2) !important; } /* badges de contagem e chips de migração têm fundo pastel claro → manter texto escuro */ :root[data-theme="dark"] .chat-filters b, :root[data-theme="dark"] .email-tabs b, :root[data-theme="dark"] .mail-filter b, :root[data-theme="dark"] .crm-tabs b, :root[data-theme="dark"] .cli-tabs b, :root[data-theme="dark"] .count, :root[data-theme="dark"] .orig, :root[data-theme="dark"] .orig b{ color:#1b2a3b !important; } /* modelos de e-mail — lista com fundo branco */ :root[data-theme="dark"] .tpl-list, :root[data-theme="dark"] .tpl-row{ background:var(--surface) !important; border-color:var(--border-2) !important; } /* pills de cobertura/etapa com fundo claro → contagem em texto escuro */ :root[data-theme="dark"] .cov-sum b, :root[data-theme="dark"] .cov-cell b, :root[data-theme="dark"] .stage-bar b, :root[data-theme="dark"] .stage-bar{ color:#1b2a3b !important; } /* células tingidas claras da tabela de fluxo → fundo escuro */ :root[data-theme="dark"] .fluxo-table td[class], :root[data-theme="dark"] .fluxo-table tr[class] td, :root[data-theme="dark"] .fluxo-table tr[class] th{ background:var(--surface-2) !important; } /* cards de agenda (.appointment) — fundo pastel claro vira escuro com acento colorido */ :root[data-theme="dark"] .appointment{ background:var(--surface-3) !important; border-color:var(--border-2) !important; border-left:3px solid var(--border-2) !important; } :root[data-theme="dark"] .appointment.p1{ border-left-color:#6f9ac2 !important; } :root[data-theme="dark"] .appointment.p2{ border-left-color:#68c39a !important; } :root[data-theme="dark"] .appointment.p3{ border-left-color:#d9a06a !important; } :root[data-theme="dark"] .appointment.p4{ border-left-color:#9ea3d6 !important; } :root[data-theme="dark"] .appointment span, :root[data-theme="dark"] .appointment em, :root[data-theme="dark"] .appointment time{ color:#aebccb !important; } /* campos de formulário que ainda vinham claros (config, popup de tarefa do chat) */ :root[data-theme="dark"] .cfg-field input, :root[data-theme="dark"] .cfg-field select, :root[data-theme="dark"] .cprof-sel, :root[data-theme="dark"] .cprof-rep input, :root[data-theme="dark"] .chat-task-pop.form input, :root[data-theme="dark"] .chat-task-pop.form select, :root[data-theme="dark"] .chat-task-pop.form textarea{ background:var(--surface-3) !important; color:var(--ink) !important; border-color:var(--border-2) !important; }