/** * Temas visuais por loja (data-theme no ). * masculino = cyber dark barbearia (valores idênticos ao layout original). * feminino = claro para salão / estética (variáveis separadas, sem misturar com o dark). */ body[data-theme="masculino"], body:not([data-theme]) { /* index.html (agendamento) — mesmos valores que antes */ --delfino-gold: #d4af37; --bg-dark: #0a0a0a; --panel-bg: #1a1a1a; --text-main: #f5f5f5; --accent: #2a2a2a; --bg-principal: #050505; --cor-primaria: #00b1ea; --cor-secundaria: #d4af37; --texto-principal: #ffffff; --bg: var(--bg-principal); --panel: #111111; --text: var(--texto-principal); --gold: var(--cor-secundaria); --saas-blue: var(--cor-primaria); --danger: #ff4444; --success: #00c851; --mp-blue: #009ee3; --pro-purple: #9c27b0; --tv-color: #f39c12; --border-soft: #222222; --border-input: #333333; --muted: #888888; --input-bg: #000000; --tab-inactive-bg: #222222; --tab-inactive-color: #aaaaaa; --card-shadow: rgba(0, 0, 0, 0.5); --overlay-scrim: rgba(5, 5, 5, 0.98); } body[data-theme="feminino"] { --delfino-gold: #e5a1a1; --bg-dark: #faf7fc; --panel-bg: #ffffff; --text-main: #2d2d2d; --accent: #eee6f2; --bg-principal: #ffffff; --cor-primaria: #e5a1a1; --cor-secundaria: #7d5ba6; --texto-principal: #2d2d2d; --bg: #f7f4fa; --panel: #ffffff; --text: var(--texto-principal); --gold: var(--cor-primaria); --saas-blue: var(--cor-secundaria); --danger: #c44545; --success: #2e7d4a; --mp-blue: #009ee3; --pro-purple: #7d5ba6; --tv-color: #c08457; --border-soft: #e8e0ef; --border-input: #cfc4d8; --muted: #5c5466; --input-bg: #ffffff; --tab-inactive-bg: #ede8f2; --tab-inactive-color: #5c5466; --card-shadow: rgba(125, 91, 166, 0.12); --overlay-scrim: rgba(45, 45, 45, 0.45); } /* Ajustes estruturais comuns (recepção / barbeiro / master) */ body[data-theme="feminino"] .tab-btn { background: var(--tab-inactive-bg) !important; color: var(--tab-inactive-color) !important; border-color: var(--border-input) !important; } body[data-theme="feminino"] .tab-btn.active { background: var(--saas-blue) !important; color: #ffffff !important; border-color: var(--saas-blue) !important; } body[data-theme="feminino"] .card { border-color: var(--border-soft) !important; box-shadow: 0 4px 14px var(--card-shadow) !important; } body[data-theme="feminino"] table th, body[data-theme="feminino"] table td { border-bottom-color: var(--border-soft) !important; } body[data-theme="feminino"] input, body[data-theme="feminino"] select, body[data-theme="feminino"] textarea { background: var(--input-bg) !important; border-color: var(--border-input) !important; color: var(--text) !important; } body[data-theme="feminino"] label { color: var(--muted) !important; } body[data-theme="feminino"] .lock-screen, body[data-theme="feminino"] .modal { background: var(--overlay-scrim) !important; } body[data-theme="feminino"] .lock-card, body[data-theme="feminino"] .modal-card, body[data-theme="feminino"] .onb-card { background: var(--panel) !important; border-color: var(--border-input) !important; } body[data-theme="feminino"] .onb-step { background: var(--input-bg) !important; border-color: var(--border-soft) !important; } body[data-theme="feminino"] .kpi-box { background: var(--input-bg) !important; border-color: var(--border-soft) !important; } body[data-theme="feminino"] .kpi-box .valor, body[data-theme="feminino"] .caixa-box .valor { color: var(--text) !important; } body[data-theme="feminino"] .kpi-box h3 { color: var(--muted) !important; } body[data-theme="feminino"] .header h1 { color: var(--gold) !important; } body[data-theme="feminino"] .tabs { border-bottom-color: var(--border-soft) !important; } /* login-cliente.html — cartões e cabeçalho */ body[data-theme="feminino"] .header { background: var(--panel) !important; border-bottom-color: var(--gold) !important; } body[data-theme="feminino"] .card h2 { color: var(--text) !important; border-bottom-color: var(--border-soft) !important; } body[data-theme="feminino"] .servico-item { background: var(--input-bg) !important; border-color: var(--border-input) !important; } body[data-theme="feminino"] .servico-info h4 { color: var(--text) !important; } body[data-theme="feminino"] .modo-btn { background: var(--tab-inactive-bg) !important; color: var(--tab-inactive-color) !important; } body[data-theme="feminino"] .modo-btn.active { background: var(--saas-blue) !important; color: #fff !important; } /* index.html — agendamento cliente */ body[data-theme="feminino"] .step-title { color: var(--muted) !important; border-bottom-color: var(--border-soft) !important; } body[data-theme="feminino"] .card-option { background: var(--accent) !important; border-color: var(--border-input) !important; } body[data-theme="feminino"] .card-option h4 { color: var(--text-main) !important; } body[data-theme="feminino"] .tracker-status { color: var(--text-main) !important; } body[data-theme="feminino"] input { background: var(--input-bg) !important; border-color: var(--border-input) !important; color: var(--text-main) !important; } body[data-theme="feminino"] .cliente-atual { color: var(--text) !important; } /* Marca do produto (cabeçalho) — tipografia forte, sem imagem */ .app-brand-header { font-size: 1.5rem; font-weight: 900; letter-spacing: -1px; color: var(--cor-primaria); margin: 0 0 4px 0; line-height: 1.05; text-transform: uppercase; font-family: "Segoe UI", system-ui, -apple-system, sans-serif; } .app-brand-header-sec { color: var(--cor-secundaria); } /* Rodapé / assinatura empresa (minimalista) */ .app-brand-delfino-bros { opacity: 0.6; font-size: 0.8rem; color: var(--muted); font-weight: 500; letter-spacing: 0.02em; } .app-watermark { position: fixed; right: 14px; bottom: 10px; z-index: 9990; pointer-events: none; user-select: none; } /* Wordmark Mercado Pago no front (sem logo em PNG) */ .mp-connect-wordmark { font-weight: 800; font-size: 13px; letter-spacing: 0.03em; color: #fff; } .btn-tema-local-pagina { min-width: 44px; padding: 10px 12px !important; font-size: 1.1rem !important; line-height: 1; }