/* =========================================================== Tema escuro — ativado por [data-tema="escuro"] no . A sidebar permanece escura (chrome da marca) nos dois temas; aqui escurecemos o canvas de trabalho. =========================================================== */ [data-tema="escuro"] { /* Redesign — canvas quase-preto neutro (estilo fintech das refs). Cards "flutuam" por borda fina translúcida, não por sombra pesada. */ --bg: #0A0A0B; --surface: #141416; --surface-2: #101012; --surface-3: #1C1C1F; --border: rgba(255, 255, 255, .07); --border-forte: rgba(255, 255, 255, .13); --ink: #F5F5F4; --ink-2: #A8A8A6; --ink-3: #6C6C6A; /* Sidebar/chrome da marca — deep black coeso com o canvas (levemente elevado) */ --marca-bg: #0D0D0F; --marca-bg-2: #17171A; --marca-border: rgba(255, 255, 255, .07); --marca-ink: #F5F5F4; --marca-ink-2: #A8A8A6; --marca-ink-3: #6C6C6A; --accent-texto: #F9A45C; /* laranja claro p/ texto sobre escuro */ --accent-suave: rgba(242, 119, 17, .13); --sucesso: #45C26A; --sucesso-bg: rgba(69, 194, 106, .14); --urg-atras: #F4736B; --urg-atras-bg: rgba(244, 115, 107, .14); --urg-breve: #E8A23A; --urg-breve-bg: rgba(232, 162, 58, .14); --urg-prazo: #45C26A; --urg-prazo-bg: rgba(69, 194, 106, .13); --st-prioridade: #F0685B; --st-a-fazer: #9AA3B2; --st-execucao: #5B8DEF; --st-revisao: #A079F0; --st-entregue: #45C26A; --sombra-sm: 0 1px 2px rgba(0, 0, 0, .5); --sombra-card: 0 1px 3px rgba(0, 0, 0, .5); --sombra-md: 0 8px 28px rgba(0, 0, 0, .55); --sombra-lg: 0 24px 60px rgba(0, 0, 0, .7); --sombra-flutua: 0 28px 64px rgba(0, 0, 0, .78); } [data-tema="escuro"] ::selection { background: var(--accent-suave); color: var(--accent-texto); } /* Scrollbar do canvas no escuro */ [data-tema="escuro"] .conteudo::-webkit-scrollbar-thumb, [data-tema="escuro"] .coluna__lista::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .14); background-clip: content-box; } /* Topbar translúcida adaptada ao escuro */ [data-tema="escuro"] .topbar { background: rgba(25, 22, 20, .82); } [data-tema="escuro"] .busca:focus-within { background: var(--surface); } /* Selos de vínculo */ /* Prioridade */ [data-tema="escuro"] .p-media, [data-tema="escuro"] .p-baixa { background: rgba(255, 255, 255, .07); } [data-tema="escuro"] .p-media { color: var(--ink-2); } [data-tema="escuro"] .p-baixa { color: var(--ink-3); } /* Regime tributário (Clientes) */ [data-tema="escuro"] .reg--simples { background: rgba(69, 194, 106, .16); color: #6BD389; } [data-tema="escuro"] .reg--presumido { background: rgba(91, 141, 239, .16); color: #8FB4F7; } [data-tema="escuro"] .reg--real { background: rgba(160, 121, 240, .16); color: #BFA3F7; } /* Pills de tarefa no calendário: mistura a cor da categoria com a superfície escura */ [data-tema="escuro"] .cal-pill { background: color-mix(in srgb, var(--cor) 24%, #141416); } [data-tema="escuro"] .cal-pill:hover { background: color-mix(in srgb, var(--cor) 36%, #141416); } [data-tema="escuro"] .cal-pill__t { color: var(--ink); } [data-tema="escuro"] .cal-cel.fora { background: rgba(255, 255, 255, .015); } /* Etiqueta de categoria: clareia o texto para legibilidade no escuro */ [data-tema="escuro"] .etiqueta { color: color-mix(in srgb, var(--cor) 60%, #ffffff); } /* Selo Google: ajusta a borda/superfície */ /* Botão primário: mantém o laranja da marca, leve realce de borda */ [data-tema="escuro"] .btn--primario { box-shadow: 0 1px 2px rgba(0, 0, 0, .5); } /* Rosca do painel: o "miolo" usa a superfície escura */ /* Fantasma do drag no escuro */ [data-tema="escuro"] .card--fantasma { background: var(--accent-suave); }