/* ===================================================================== SALAO 1.0 — Modo escuro do sistema inteiro (painel, vitrine, login) Ativado por [data-theme="dark"] no . Aditivo: o modo claro permanece intocado (nada fora de [data-theme="dark"] é alterado). Estratégia em duas camadas: 1) Remapear os TOKENS (cream/ink/line + legados) para uma paleta escura coesa — verde-quase-preto, com esmeralda e dourado vibrantes. Componentes que já usam var(...) escurecem automaticamente. 2) Override explícito das superfícies de cor FIXA (#fff, branco translúcido) que os tokens não alcançam. Sumário: Tokens · Painel · Vitrine · Login · Universais. Movimento herda as @media (prefers-reduced-motion) dos arquivos base. ===================================================================== */ /* ===================================================================== 1. TOKENS — paleta escura (esmeralda profundo + acentos vivos) ===================================================================== */ :root[data-theme="dark"] { /* Superfícies (do mais fundo ao mais elevado) */ --bg-page: #0c1712; /* fundo da página */ --surface-1: #15231c; /* cartões/superfície base */ --surface-2: #18271f; /* variação de cartão */ --surface-3: #1d2f25; /* superfície elevada (hover, addbar, chips) */ --surface-4: #233a2d; /* realce mais alto (linhas hover fortes) */ /* Texto */ --text-strong: #e9f1ec; /* títulos e valores */ --text-muted: #9db3a7; /* secundário/legendas */ /* Bordas e divisores sobre fundo escuro */ --line-dark: rgba(255,255,255,.09); --line-soft: rgba(255,255,255,.06); /* --- Remapeamento dos tokens usados pelos componentes --- */ /* Acentos: mantêm o verde/dourado, levemente mais luminosos p/ AA */ --plum-900: #081310; /* aprofunda a base da sidebar */ --plum-800: #0c1c14; --wine-700: #1f6a45; /* "emerald profundo" passa a brilhar no escuro */ --wine-600: #2a7d54; --rose-500: #36a874; /* acento primário (mais claro p/ contraste) */ --rose-400: #4bbd88; /* verde claro */ --rose-100: rgba(75,189,136,.16); /* "verde pálido" vira tinta translúcida */ --gold-600: #c69a3d; /* dourado escuro (gradientes/acentos) no escuro */ --gold-500: #d8b25e; /* dourado mais luminoso sobre escuro */ --gold-400: #e3c47a; /* dourado claro (gradientes) no escuro */ --gold-300: #ecd596; /* Neutros que muitos componentes consomem diretamente */ --cream-50: #15231c; /* era quase-branco → vira superfície de cartão */ --cream-100: #1d2f25; /* fundos sutis/hover → superfície elevada */ --ink-900: #e9f1ec; /* texto principal */ --ink-600: #9db3a7; /* texto secundário */ --line: rgba(255,255,255,.09); /* Sombras mais densas (no escuro, sombra clara não existe) */ --shadow-soft: 0 16px 44px rgba(0,0,0,.55); --shadow-card: 0 8px 28px rgba(0,0,0,.42); } /* Fundo geral da página (cobre painel, vitrine e login) */ :root[data-theme="dark"] body { background: var(--bg-page); color: var(--text-strong); } /* ===================================================================== 2. PAINEL — superfícies de cor fixa viram escuras ===================================================================== */ /* Fundo do painel: substitui os radial-gradients creme por brilho esmeralda sutil */ :root[data-theme="dark"] body { background: radial-gradient(1200px 600px at 100% -10%, rgba(54,168,116,.10) 0%, transparent 55%), radial-gradient(900px 500px at -10% 110%, rgba(216,178,94,.07) 0%, transparent 50%), var(--bg-page); } /* Sidebar: já é verde escuro — apenas aprofunda e suaviza divisões */ :root[data-theme="dark"] .sidebar { background: linear-gradient(180deg, #06120c 0%, #0e2c1d 100%); border-right: 1px solid var(--line-soft); } :root[data-theme="dark"] .sidebar-user { background: rgba(255,255,255,.04); border-color: var(--line-soft); } /* Pílula ativa: gradiente um pouco mais luminoso p/ destacar no escuro */ :root[data-theme="dark"] .sidebar .nav-link.active::before { background: linear-gradient(135deg, var(--rose-500), var(--wine-700)); } /* Rótulos de seção: mais luminância sobre o gradiente escuro */ :root[data-theme="dark"] .sidebar .nav-section { color: rgba(236, 213, 150, .7); } /* Botão recolher + textos do rodapé */ :root[data-theme="dark"] .sidebar-collapse { background: rgba(255,255,255,.025); border-color: var(--line-soft); } :root[data-theme="dark"] .sidebar-collapse:hover { background: rgba(255,255,255,.06); } :root[data-theme="dark"] .su-name { color: var(--text-strong); } :root[data-theme="dark"] .su-mail { color: var(--text-muted); } /* Fio dourado da borda: tom levemente mais quente no escuro */ :root[data-theme="dark"] .sidebar::after { background: linear-gradient(180deg, transparent, rgba(236,213,150,.18) 22%, rgba(236,213,150,.08) 78%, transparent); } /* Tooltip do modo recolhido: superfície escura legível */ :root[data-theme="dark"] body.sidebar-collapsed .nav-link::after, :root[data-theme="dark"] body.sidebar-collapsed .btn-sair::after { background: #06120c; box-shadow: 0 8px 22px rgba(0,0,0,.6); border-color: var(--line-soft); } /* Títulos do topo: clareiam (eram tons escuros sobre creme) */ :root[data-theme="dark"] .topbar-title { color: var(--text-strong); } :root[data-theme="dark"] .topbar-eyebrow { color: var(--rose-400); } :root[data-theme="dark"] .topbar-date { background: var(--surface-1); border-color: var(--line-dark); color: var(--text-muted); } /* Cards e cabeçalhos */ :root[data-theme="dark"] .card, :root[data-theme="dark"] .premium-card { background: var(--surface-1); border-color: var(--line-dark); } :root[data-theme="dark"] .card-header { background: var(--surface-2); border-bottom-color: var(--line-dark); color: #d7e7dd; } /* Botão outline: borda/hover legíveis no escuro */ :root[data-theme="dark"] .btn-outline-secondary { border-color: var(--line-dark); color: var(--text-muted); } :root[data-theme="dark"] .btn-outline-secondary:hover { background: var(--surface-3); color: #d7e7dd; border-color: var(--rose-400); } /* Formulários: fundo escuro, texto claro, placeholder legível */ :root[data-theme="dark"] .form-control, :root[data-theme="dark"] .form-select { background-color: var(--surface-2); border-color: var(--line-dark); color: var(--text-strong); } :root[data-theme="dark"] .form-control::placeholder { color: #6f857a; } :root[data-theme="dark"] .form-control:focus, :root[data-theme="dark"] .form-select:focus { background-color: var(--surface-3); border-color: var(--rose-400); color: var(--text-strong); box-shadow: 0 0 0 .2rem rgba(75,189,136,.22); } /* Seta do select (SVG do Bootstrap é escuro) → clareia, sem tilhar */ :root[data-theme="dark"] .form-select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%239db3a7' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right .75rem center; background-size: 16px 12px; } :root[data-theme="dark"] .form-label { color: #bcd2c6; } /* Tabelas */ :root[data-theme="dark"] .table { color: var(--text-strong); } :root[data-theme="dark"] .table thead th { color: var(--text-muted); border-bottom-color: var(--line-dark); } :root[data-theme="dark"] .table tbody td { border-color: var(--line-soft); } :root[data-theme="dark"] .table-hover tbody tr:hover { background: var(--rose-100); } /* Badges de estado (combinam fundo translúcido + texto claro) */ :root[data-theme="dark"] .badge-on, :root[data-theme="dark"] .sum-chip.badge-on, :root[data-theme="dark"] .hr-chip.on { background: rgba(54,168,116,.22); color: #9ff0c4; } :root[data-theme="dark"] .badge-off, :root[data-theme="dark"] .sum-chip.badge-off { background: rgba(224,82,103,.20); color: #ffb3bd; } :root[data-theme="dark"] .divider { background: var(--line-dark); } /* --- Dashboard: gráfico semanal, ranking, brief, timeline --- */ :root[data-theme="dark"] .week-val, :root[data-theme="dark"] .week-day { color: var(--text-muted); } :root[data-theme="dark"] .rank-pos { background: var(--surface-3); color: #bcd2c6; } :root[data-theme="dark"] .rank-row + .rank-row { border-top-color: var(--line-soft); } :root[data-theme="dark"] .rank-bar, :root[data-theme="dark"] .ocup-bar, :root[data-theme="dark"] .caixa-bar, :root[data-theme="dark"] .comp-bar { background: var(--surface-3); } :root[data-theme="dark"] .rank-name, :root[data-theme="dark"] .tl-name { color: var(--text-strong); } :root[data-theme="dark"] .day-brief { background: linear-gradient(135deg, rgba(54,168,116,.14), rgba(216,178,94,.12)); border-color: var(--line-dark); color: var(--text-strong); } /* Timeline do dashboard (.tl-card usa cream-50 → já escurece; reforça texto) */ :root[data-theme="dark"] .tl-card { background: var(--surface-2); border-color: var(--line-dark); } :root[data-theme="dark"] .tl-dot { border-color: var(--surface-1); } /* --- Agenda: tira da semana + timeline rica --- */ :root[data-theme="dark"] .wk { background: var(--surface-2); border-color: var(--line-dark); } :root[data-theme="dark"] .wk-n { color: #cfeada; } :root[data-theme="dark"] .atl-card { background: var(--surface-1); border-color: var(--line-dark); } :root[data-theme="dark"] .atl-name, :root[data-theme="dark"] .atl-serv { color: var(--text-strong); } :root[data-theme="dark"] .atl-dot { border-color: var(--surface-1); } :root[data-theme="dark"] .atl-row.is-cancel .atl-card { background: var(--surface-2); } :root[data-theme="dark"] .atl-gap span { background: var(--surface-3); border-color: var(--line-dark); } :root[data-theme="dark"] .sum-chip { background: var(--surface-3); color: var(--text-muted); } /* --- Comandas/PDV --- */ :root[data-theme="dark"] .pdv-stat, :root[data-theme="dark"] .pdv-top { background: var(--surface-1); border-color: var(--line-dark); } :root[data-theme="dark"] .cmd-item, :root[data-theme="dark"] .pdv-item { border-bottom-color: var(--line-soft); } :root[data-theme="dark"] .cmd-link:hover { background: var(--rose-100); } :root[data-theme="dark"] .cmd-item-link:hover { background: rgba(58, 168, 116, .12); } :root[data-theme="dark"] .card-footer-link { border-top-color: var(--line-dark); } :root[data-theme="dark"] .pdv-item:hover { background: var(--surface-2); } :root[data-theme="dark"] .cmd-name, :root[data-theme="dark"] .pi-name { color: var(--text-strong); } :root[data-theme="dark"] .pdv-back { border-color: var(--line-dark); color: #bcd2c6; } :root[data-theme="dark"] .pdv-back:hover { background: var(--rose-100); border-color: var(--rose-400); } :root[data-theme="dark"] .pdv-addbar { background: var(--surface-2); border-top-color: var(--line-dark); } /* Tipos de item: mantêm cor de marca com fundo translúcido */ :root[data-theme="dark"] .pi-type.srv { background: rgba(54,168,116,.20); color: #9ff0c4; } :root[data-theme="dark"] .pi-type.prod { background: rgba(106,160,227,.20); color: #aecbf5; } :root[data-theme="dark"] .pi-rm .btn { border-color: var(--line-dark); color: var(--text-muted); } :root[data-theme="dark"] .pi-rm .btn:hover { color: #ff8d86; border-color: rgba(255,120,112,.5); background: rgba(255,80,72,.12); } /* Stepper de quantidade */ :root[data-theme="dark"] .qty-stepper { background: var(--surface-2); border-color: var(--line-dark); } :root[data-theme="dark"] .qs-btn { background: var(--surface-3); color: #bcd2c6; } :root[data-theme="dark"] .qs-btn:hover:not([disabled]) { background: var(--rose-100); } :root[data-theme="dark"] .qs-val { color: var(--text-strong); } /* Pagamentos */ :root[data-theme="dark"] .pay-chip { background: var(--surface-2); border-color: var(--line-dark); } :root[data-theme="dark"] .pay-chip i { color: var(--rose-400); } :root[data-theme="dark"] .pay-btn { background: var(--surface-2); border-color: var(--line-dark); color: #cfeada; } :root[data-theme="dark"] .pay-btn:hover { background: var(--rose-100); border-color: var(--rose-400); } :root[data-theme="dark"] .pdv-quitado { color: #9ff0c4; } /* --- Serviços / Produtos: grade de cards e galeria --- */ :root[data-theme="dark"] .svc-stat, :root[data-theme="dark"] .svc-tile, :root[data-theme="dark"] .svc-preview { background: var(--surface-1); border-color: var(--line-dark); } :root[data-theme="dark"] .st-photo, :root[data-theme="dark"] .gal-tile, :root[data-theme="dark"] .prod-foto-atual, :root[data-theme="dark"] .cfg-logo { background: var(--surface-3); } :root[data-theme="dark"] .st-empty, :root[data-theme="dark"] .spv-photo, :root[data-theme="dark"] .pf-empty, :root[data-theme="dark"] .cl-empty { background: linear-gradient(135deg, rgba(75,189,136,.12), rgba(255,255,255,.03)); color: var(--rose-400); } :root[data-theme="dark"] .st-name, :root[data-theme="dark"] .spv-name { color: #cfeada; } :root[data-theme="dark"] .st-actions { border-top-color: var(--line-dark); } /* Galeria: botões sobre a foto continuam claros (sobre overlay escuro) */ :root[data-theme="dark"] .gal-btn { background: rgba(232,241,236,.92); color: #14482f; } :root[data-theme="dark"] .gal-btn:hover { background: #fff; } /* Dropzone */ :root[data-theme="dark"] .dropzone { background: linear-gradient(135deg, rgba(75,189,136,.07), rgba(216,178,94,.06)); border-color: var(--rose-400); } :root[data-theme="dark"] .dropzone:hover { background: linear-gradient(135deg, rgba(75,189,136,.12), rgba(216,178,94,.10)); } :root[data-theme="dark"] .dz-title { color: #cfeada; } :root[data-theme="dark"] .dz-preview img { border-color: var(--surface-1); } /* --- Clientes: linha, ficha, histórico --- */ :root[data-theme="dark"] .cli-row:hover, :root[data-theme="dark"] .hist-row:hover { background: var(--surface-2); } :root[data-theme="dark"] .cli-row, :root[data-theme="dark"] .hist-row, :root[data-theme="dark"] .blk-item { border-bottom-color: var(--line-soft); } :root[data-theme="dark"] .cli-row .cmd-name, :root[data-theme="dark"] .hist-serv { color: var(--text-strong); } :root[data-theme="dark"] .cli-hero { background: var(--surface-1); border-color: var(--line-dark); } :root[data-theme="dark"] .cli-hero-av { border-color: var(--surface-1); } :root[data-theme="dark"] .cli-hero-name, :root[data-theme="dark"] .cli-hero-stats .cli-stat .v, :root[data-theme="dark"] .cli-stat .v { color: #cfeada; } /* --- Financeiro: composição + caixa --- */ :root[data-theme="dark"] .caixa-card { background: var(--surface-2); border-color: var(--line-dark); } :root[data-theme="dark"] .caixa-forma { color: var(--text-strong); } :root[data-theme="dark"] .caixa-bar { background: var(--surface-3); border-color: var(--line-dark); } /* --- Sub-abas (nav-pills) --- */ :root[data-theme="dark"] .content .nav-pills .nav-link { color: var(--text-muted); } :root[data-theme="dark"] .content .nav-pills .nav-link:hover { color: #cfeada; background: var(--rose-100); } /* --- Configurações: horários + bloqueios --- */ :root[data-theme="dark"] .hr-day { border-bottom-color: var(--line-soft); } :root[data-theme="dark"] .hr-chip.off, :root[data-theme="dark"] .hr-chip.closed { background: var(--surface-3); color: var(--text-muted); } :root[data-theme="dark"] .hr-track { background: var(--surface-3); } :root[data-theme="dark"] .hr-block.pausado { background: repeating-linear-gradient(45deg, #3a4a42, #3a4a42 5px, #2b3a33 5px, #2b3a33 10px); } :root[data-theme="dark"] .hr-add summary:hover, :root[data-theme="dark"] .hr-add[open] summary { background: var(--rose-100); } :root[data-theme="dark"] .hr-add-form { background: var(--surface-2); border-color: var(--line-dark); } :root[data-theme="dark"] .blk-range { color: var(--text-strong); } :root[data-theme="dark"] .blk-tag.fut { background: rgba(216,178,94,.18); color: var(--gold-300); } :root[data-theme="dark"] .blk-tag.past { background: var(--surface-3); color: var(--text-muted); } :root[data-theme="dark"] .motivo-chip { background: var(--surface-2); border-color: var(--line-dark); color: var(--text-muted); } :root[data-theme="dark"] .motivo-chip:hover { background: var(--rose-100); border-color: var(--rose-400); color: #cfeada; } /* Modal (Bootstrap) — usado no painel e na vitrine */ :root[data-theme="dark"] .modal-content { background: var(--surface-1); color: var(--text-strong); border: 1px solid var(--line-dark); } :root[data-theme="dark"] .modal-header, :root[data-theme="dark"] .modal-footer { border-color: var(--line-dark); } /* Botão "X" de fechar do Bootstrap é escuro por padrão → inverte p/ claro */ :root[data-theme="dark"] .btn-close { filter: invert(1) grayscale(1) brightness(1.6); } /* Dropdowns do Bootstrap (se houver) */ :root[data-theme="dark"] .dropdown-menu { background: var(--surface-2); border-color: var(--line-dark); color: var(--text-strong); } :root[data-theme="dark"] .dropdown-item { color: #cfeada; } :root[data-theme="dark"] .dropdown-item:hover { background: var(--rose-100); color: #fff; } /* ===================================================================== 3. VITRINE — navbar, hero (card), cards, info, agendar ===================================================================== */ /* Fundo creme da vitrine → escuro */ :root[data-theme="dark"] body { background: var(--bg-page); } :root[data-theme="dark"] .bg-cream { background: var(--bg-page); } :root[data-theme="dark"] a { color: var(--rose-400); } /* Navbar: era translúcida clara → translúcida escura */ :root[data-theme="dark"] .vnav { background: rgba(12,23,18,.85); border-bottom-color: var(--line-dark); } :root[data-theme="dark"] .vnav.scrolled { box-shadow: 0 8px 28px rgba(0,0,0,.5); } :root[data-theme="dark"] .vbrand .name { color: #e9f1ec; } :root[data-theme="dark"] .vnav .nav-link { color: var(--text-muted); } :root[data-theme="dark"] .vnav .nav-link:hover { color: var(--rose-400); } :root[data-theme="dark"] .vnav-toggle { background: var(--surface-2); border-color: var(--line-dark); color: #cfeada; } :root[data-theme="dark"] .vnav-toggle:hover { background: var(--rose-100); border-color: var(--rose-400); } :root[data-theme="dark"] .vmenu { background: var(--surface-1); } :root[data-theme="dark"] .vmenu .offcanvas-header { border-bottom-color: var(--line-dark); } :root[data-theme="dark"] .vmenu-link { color: #cfeada; } :root[data-theme="dark"] .vmenu-link:hover { background: var(--rose-100); color: #fff; } /* Hero: já é escuro — mantém. Apenas o cartão-preview flutuante (era branco) */ :root[data-theme="dark"] .hv-card { background: rgba(24,39,31,.97); border-color: var(--line-dark); box-shadow: 0 36px 70px rgba(0,0,0,.6); } :root[data-theme="dark"] .hv-name { color: #e9f1ec; } :root[data-theme="dark"] .hv-sub, :root[data-theme="dark"] .hv-foot { color: var(--text-muted); } :root[data-theme="dark"] .hv-row { border-bottom-color: var(--line-dark); } :root[data-theme="dark"] .hv-row-nome { color: var(--text-strong); } :root[data-theme="dark"] .hv-status.is-open { background: rgba(54,168,116,.20); color: #9ff0c4; } :root[data-theme="dark"] .hv-status.is-closed { background: rgba(216,178,94,.18); color: var(--gold-300); } /* Chips flutuantes do hero (eram brancos) */ :root[data-theme="dark"] .hv-chip { background: var(--surface-2); color: #cfeada; box-shadow: 0 14px 32px rgba(0,0,0,.5); } /* Section heading (sobre fundo escuro agora) */ :root[data-theme="dark"] .section-head h2 { color: #e9f1ec; } :root[data-theme="dark"] .section-head .sub { color: var(--text-muted); } /* Passos "como funciona" */ :root[data-theme="dark"] .step-card { background: var(--surface-1); border-color: var(--line-dark); } :root[data-theme="dark"] .step-num { color: rgba(75,189,136,.16); } :root[data-theme="dark"] .step-card p { color: var(--text-muted); } /* Cards de serviço (catálogo público) */ :root[data-theme="dark"] .svc-card { background: var(--surface-1); border-color: var(--line-dark); } :root[data-theme="dark"] .svc-card:hover { border-color: var(--rose-100); } :root[data-theme="dark"] .svc-name { color: #cfeada; } :root[data-theme="dark"] .svc-desc, :root[data-theme="dark"] .svc-dur { color: var(--text-muted); } :root[data-theme="dark"] .svc-photo, :root[data-theme="dark"] .svc-photo-empty { background: var(--surface-3); } :root[data-theme="dark"] .svc-photo-empty { background: linear-gradient(135deg, rgba(75,189,136,.12), rgba(255,255,255,.03)); color: var(--rose-400); } /* Chips de categoria */ :root[data-theme="dark"] .cat-pill { background: var(--surface-2); border-color: var(--line-dark); color: var(--text-muted); } :root[data-theme="dark"] .cat-pill:hover, :root[data-theme="dark"] .cat-pill.active { background: var(--wine-600); color: #fff; border-color: var(--wine-600); } /* Cartões de informação/contato */ :root[data-theme="dark"] .info-card { background: var(--surface-1); border-color: var(--line-dark); } :root[data-theme="dark"] .info-card .ico { background: rgba(54,168,116,.18); color: var(--rose-400); } :root[data-theme="dark"] .hours-row { border-bottom-color: var(--line-dark); } :root[data-theme="dark"] .hours-row .closed { color: var(--rose-400); } /* contraste AA sobre escuro */ /* Footer: já é verde escuro — apenas aprofunda p/ casar com a página */ :root[data-theme="dark"] .vfooter { background: #06120c; } :root[data-theme="dark"] .vfooter .copy { border-top-color: var(--line-dark); } /* Botão flutuante de WhatsApp: no escuro o verde-neon (#25d366) destoava do tema. Vira um verde de marca mais profundo, com anel fino e sombra densa (em vez do halo neon) — assenta no fundo escuro sem perder o reconhecimento. O ícone fica branco explícito (garante o glifo nítido sobre o verde). */ :root[data-theme="dark"] .wa-float { background: linear-gradient(160deg, #20b95b, #128a47); border: 1px solid rgba(255, 255, 255, .16); box-shadow: 0 12px 30px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .12); } :root[data-theme="dark"] .wa-float, :root[data-theme="dark"] .wa-float > i { color: #fff; } :root[data-theme="dark"] .wa-float:hover { box-shadow: 0 16px 36px rgba(0, 0, 0, .6), 0 0 20px rgba(37, 211, 102, .32); } /* Anel de pulso: alpha menor no escuro p/ não virar neon (mantém o keyframe base). */ :root[data-theme="dark"] .wa-float::after { box-shadow: 0 0 0 0 rgba(54, 168, 116, .4); } /* Lightbox: trilho do carrossel já é #0a1410 — mantém */ /* --- Fluxo de agendamento --- */ :root[data-theme="dark"] .step-badge { background: var(--surface-3); border-color: var(--line-dark); color: var(--text-muted); } :root[data-theme="dark"] .passo.is-active .step-badge { background: var(--rose-100); border-color: var(--rose-400); color: #9ff0c4; } /* Serviço selecionável (cartão que acende) */ :root[data-theme="dark"] .svc-row { background: var(--surface-2); border-color: var(--line-dark); } :root[data-theme="dark"] .svc-row:hover { background: var(--surface-3); border-color: var(--rose-400); } :root[data-theme="dark"] .svc-row.is-checked { background: var(--rose-100); border-color: var(--rose-400); } :root[data-theme="dark"] .svc-row-nome { color: var(--text-strong); } :root[data-theme="dark"] .svc-row .svc-dur { color: var(--text-muted); } /* Elementos novos do agendar com fundo branco fixo → superfície escura */ :root[data-theme="dark"] .svc-search input { background: var(--surface-2); border-color: var(--line-dark); color: var(--text-strong); } :root[data-theme="dark"] .day-chip { background: var(--surface-2); border-color: var(--line-dark); color: var(--text-strong); } :root[data-theme="dark"] .day-chip:hover { background: var(--surface-3); border-color: var(--rose-400); } :root[data-theme="dark"] .stepper { background: var(--surface-1); border-color: var(--line-dark); box-shadow: var(--shadow-card); } :root[data-theme="dark"] .stepper .step .st-n { background: var(--surface-3); } :root[data-theme="dark"] .btn-primeiro { background: var(--surface-2); border-color: var(--gold-400); color: var(--text-strong); } :root[data-theme="dark"] .btn-primeiro:hover { background: var(--surface-3); } /* Pílulas de período (horários) — texto mais luminoso no escuro */ :root[data-theme="dark"] .sg-manha .slot-group-h { color: var(--gold-400); } :root[data-theme="dark"] .sg-noite .slot-group-h { color: #9aa6e0; } :root[data-theme="dark"] .sg-noite .slot-group-h i { color: #9aa6e0; } /* Modal de confirmação no escuro (card e botão Cancelar têm fundo branco fixo) */ :root[data-theme="dark"] .cfm-card { background: var(--surface-1); border-color: var(--line-dark); } :root[data-theme="dark"] .cfm-cancel { background: var(--surface-2); color: var(--text-strong); border-color: var(--line-dark); } :root[data-theme="dark"] .cfm-cancel:hover { background: var(--surface-3); } /* Botão de horário (slot) — base outline do Bootstrap fica escura */ :root[data-theme="dark"] .slot-btn { background: var(--surface-2); border-color: var(--line-dark); color: #cfeada; } :root[data-theme="dark"] .slot-btn:hover { background: var(--surface-3); border-color: var(--rose-400); color: #fff; } :root[data-theme="dark"] .slot-btn.is-sel { background: linear-gradient(135deg, var(--rose-500), var(--wine-600)); border-color: transparent; color: #fff; } /* Cartão de resumo (coluna direita do agendar) */ :root[data-theme="dark"] .resumo-card { background: var(--surface-1); border-color: var(--line-dark); } :root[data-theme="dark"] .resumo-vazio, :root[data-theme="dark"] .resumo-total-val { color: var(--text-muted); } :root[data-theme="dark"] #resumo-itens .ri { border-bottom-color: var(--line-dark); } :root[data-theme="dark"] #resumo-itens .ri .nome, :root[data-theme="dark"] .resumo-quando .linha, :root[data-theme="dark"] .resumo-total > span:first-child { color: var(--text-strong); } :root[data-theme="dark"] .resumo-quando { border-top-color: var(--line-dark); } :root[data-theme="dark"] .resumo-total { border-top-color: rgba(75,189,136,.30); } :root[data-theme="dark"] .resumo-dados { border-top-color: var(--line-dark); } /* Validação inline / dicas */ :root[data-theme="dark"] .field-hint.ok { color: var(--rose-400); } :root[data-theme="dark"] .field-hint.err { color: #ff8d86; } :root[data-theme="dark"] .login-alert, :root[data-theme="dark"] .alert-danger { background: rgba(255,80,72,.12); color: #ff9d96; border-color: rgba(255,120,112,.4); } /* ===================================================================== 4. LOGIN — card do formulário escurece (a marca já é verde escuro) ===================================================================== */ /* Tokens próprios do login remapeados para o escuro */ :root[data-theme="dark"] .login-page, :root[data-theme="dark"] .login-card { --paper: #15231c; /* superfície do formulário */ --cream: #1d2f25; /* hover de botões/ícones */ --ink: #e9f1ec; /* texto */ --muted: #9db3a7; /* secundário */ --line: rgba(255,255,255,.09); } /* Card: borda e sombra mais densas */ :root[data-theme="dark"] .login-card { background: var(--surface-1); border: 1px solid var(--line-dark); box-shadow: 0 44px 100px rgba(0,0,0,.7), 0 6px 18px rgba(0,0,0,.5); } /* Lado do formulário (era branco) */ :root[data-theme="dark"] .card-form { background: var(--surface-1); } :root[data-theme="dark"] .form-head h2 { color: #e9f1ec; } :root[data-theme="dark"] .form-head p { color: var(--text-muted); } :root[data-theme="dark"] .field label { color: #bcd2c6; } :root[data-theme="dark"] .input-wrap input { background: var(--surface-2); border-color: var(--line-dark); color: var(--text-strong); } :root[data-theme="dark"] .input-wrap input::placeholder { color: #6f857a; } :root[data-theme="dark"] .input-wrap input:focus { border-color: var(--rose-400); box-shadow: 0 0 0 4px rgba(75,189,136,.18); } /* Autofill no escuro: casa com a superfície do input (--surface-2), não branco */ :root[data-theme="dark"] .input-wrap input:-webkit-autofill, :root[data-theme="dark"] .input-wrap input:-webkit-autofill:hover, :root[data-theme="dark"] .input-wrap input:-webkit-autofill:focus { -webkit-text-fill-color: var(--text-strong); -webkit-box-shadow: 0 0 0 1000px var(--surface-2) inset; box-shadow: 0 0 0 1000px var(--surface-2) inset; caret-color: var(--text-strong); } :root[data-theme="dark"] .toggle-eye:hover { background: var(--surface-3); color: var(--rose-400); } :root[data-theme="dark"] .secure-note { color: #7a8f84; } :root[data-theme="dark"] .form-foot { color: var(--text-muted); } :root[data-theme="dark"] .form-foot a { color: var(--rose-400); } :root[data-theme="dark"] .form-foot a:hover { color: var(--rose-400); } /* O lado .card-brand já é verde escuro nativo — mantido sem override. */ /* ===================================================================== 5. UNIVERSAIS — texto utilitário e foco ===================================================================== */ :root[data-theme="dark"] .text-wine { color: var(--rose-400) !important; } :root[data-theme="dark"] .text-muted { color: var(--text-muted) !important; } :root[data-theme="dark"] .form-text { color: var(--text-muted); } /* Foco por teclado: dourado luminoso garante contraste sobre escuro */ :root[data-theme="dark"] a:focus-visible, :root[data-theme="dark"] button:focus-visible, :root[data-theme="dark"] .form-control:focus-visible, :root[data-theme="dark"] .form-select:focus-visible { outline-color: var(--gold-300); } /* Barra de rolagem escura (Firefox + WebKit) */ :root[data-theme="dark"] { scrollbar-color: #2b3a33 transparent; } :root[data-theme="dark"] ::-webkit-scrollbar { width: 12px; height: 12px; } :root[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--bg-page); } :root[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #2b3a33; border-radius: 8px; border: 3px solid var(--bg-page); } :root[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #38493f; } /* Realce de seleção de texto coerente com o tema */ :root[data-theme="dark"] ::selection { background: rgba(75,189,136,.35); color: #fff; } /* Alerts nativos do Bootstrap (dashboard, etc.) — escurecidos por variante */ :root[data-theme="dark"] .alert-warning { --bs-alert-bg: #38300f; --bs-alert-color: #f1da94; --bs-alert-border-color: #574818; } :root[data-theme="dark"] .alert-info { --bs-alert-bg: #0e2d2f; --bs-alert-color: #9fdbe0; --bs-alert-border-color: #1c4a4d; } :root[data-theme="dark"] .alert-success { --bs-alert-bg: #0f2e1d; --bs-alert-color: #88e2af; --bs-alert-border-color: #1d5a3a; } :root[data-theme="dark"] .alert-danger { --bs-alert-bg: #38161a; --bs-alert-color: #f1a3ab; --bs-alert-border-color: #5a232a; } :root[data-theme="dark"] .alert-light { --bs-alert-bg: #1d2f25; --bs-alert-color: var(--ink-900); --bs-alert-border-color: rgba(255,255,255,.1); } /* Input-group e utilitários de fundo claro (prefixos de busca etc.) */ :root[data-theme="dark"] .input-group-text { background: #1d2f25; border-color: rgba(255,255,255,.10); color: #c5d0c9; font-weight: 500; /* sufixos (min/horas/dias) legíveis no escuro */ } :root[data-theme="dark"] .bg-white, :root[data-theme="dark"] .bg-light { background-color: #16241d !important; } /* Botões primários: texto branco no escuro (links .btn-primary herdavam a cor verde de link) */ :root[data-theme="dark"] .btn-primary, :root[data-theme="dark"] .btn-primary:hover, :root[data-theme="dark"] .btn-primary:focus, :root[data-theme="dark"] .btn-wa, :root[data-theme="dark"] .btn-wa:hover { color: #fff; } /* Nome do cliente no PDV usava --plum-800 (escuro no escuro) → texto claro */ :root[data-theme="dark"] .pdv-cliente { color: var(--text-strong); } /* Preços/valores em esmeralda (--wine-700) ficavam escuros demais no dark → clareia o TEXTO (sem mexer no token, que também é usado como fundo) */ :root[data-theme="dark"] :is(.text-wine, .svc-price, .hv-row-preco, .st-price, .ss-val, .cmd-val, .caixa-val, .ps-val, .tl-val, .rank-val, .atl-val, .pi-sub, .comp-pct, .preco, .resumo-total-val strong, .sum-prev, .hours-row.is-today span, .hoje-tag, .tl-time .h, .atl-time .h, .text-success) { color: #54cf98 !important; } /* Variáveis do Bootstrap no escuro — corrige texto/listas que herdavam defaults claros (texto #212529 dentro de .card, .list-group-item com fundo branco, bordas claras) */ :root[data-theme="dark"] { --bs-body-color: #e9f1ec; --bs-body-color-rgb: 233, 241, 236; --bs-emphasis-color: #ffffff; --bs-secondary-color: rgba(157, 179, 167, .85); --bs-tertiary-color: rgba(157, 179, 167, .65); --bs-card-color: #e9f1ec; --bs-border-color: rgba(255, 255, 255, .12); --bs-border-color-translucent: rgba(255, 255, 255, .12); --bs-secondary-bg: #1d2f25; --bs-tertiary-bg: #16241d; --bs-list-group-bg: transparent; --bs-list-group-color: #e9f1ec; --bs-list-group-border-color: rgba(255, 255, 255, .08); --bs-list-group-action-color: #e9f1ec; --bs-list-group-action-hover-bg: rgba(255, 255, 255, .05); --bs-list-group-action-hover-color: #ffffff; --bs-emphasis-color-rgb: 255, 255, 255; } /* .list-group redefine --bs-list-group-bg localmente (= --bs-body-bg) → override direto */ :root[data-theme="dark"] .list-group-item { background-color: transparent; color: var(--ink-900); border-color: rgba(255, 255, 255, .08); } :root[data-theme="dark"] .list-group-item-action:hover, :root[data-theme="dark"] .list-group-item-action:focus { background-color: rgba(255, 255, 255, .05); color: #fff; } /* O modo escuro não introduz movimento novo; todas as animações vêm dos arquivos base, já cobertas por @media (prefers-reduced-motion: reduce). */