@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Manrope:wght@400;500;600;700&display=swap'); :root { /* paleta oficial Dagior -- 5 cores dadas pelo usuario, usadas em todo o sistema: carvao (texto/fundo escuro), bege champagne (bordas/soft), quase-branco (superficies), creme (fundo geral), taupe dourado (destaque). Cores funcionais de status (verde/vermelho/laranja/ciano) ficam de fora de proposito -- servem pra leitura rapida de estado, nao pra marca. Essa e' a paleta padrao (tema claro); a variante escura fica logo abaixo em html.tema-escuro, ligada pelo botao na barra lateral (sidebar.js). */ --bg: #fcf2e8; --surface: #f8f8f8; --border: #e4d7c4; --text: #2e2d2b; --text-muted: #6b6259; /* Testamos o destaque Botanico (verde-salvia, 2026-08-22) -- usuario gostou da tipografia/cantos mas pediu pra voltar so a cor pro taupe original. Tipografia (Fraunces/Manrope) e --radius maior continuam. */ --primary: #b7a38d; --primary-dark: #96826c; --primary-soft: #e4d7c4; /* --on-primary: texto sobre fundo --primary (botao primario, selos etc) -- ver commit que introduziu essa variable pro motivo dela existir separada de --text (bug de contraste no tema escuro). */ --on-primary: #2e2d2b; --danger: #b3403a; --danger-soft: #fbe9e7; --success: #3f7a52; --success-soft: #e6f0e8; --warning: #a06a1f; --warning-soft: #f7ecd9; --faturado: #0e7490; --faturado-soft: #dcf1f4; --radius: 16px; --shadow: 0 2px 10px rgba(46, 45, 43, 0.1); --lateral-bg: #2e2d2b; --lateral-bg-hover: #3e3c39; --lateral-texto: #e4d7c4; --lateral-texto-muted: #b7a38d; --lateral-largura: 248px; } /* Tema escuro -- pedido do usuario (2026-08-22): fundo/superficies na mesma familia de carvao da barra lateral, mesmo destaque taupe-dourado de sempre. Ligado via html.tema-escuro (botao na barra lateral, persistido em localStorage -- ver configurarAlternadorTema em sidebar.js). Fica na tag (nao ) de proposito -- assim da pra aplicar num script bloqueante no (antes do existir), sem piscar o tema errado por uma fracao de segundo antes do JS rodar (login.html faz isso, ja que nao carrega sidebar.js). Custom properties resolvem por heranca, entao so precisa redeclarar aqui o que muda; tudo que nao e redeclarado continua vindo do :root acima. */ html.tema-escuro { --bg: #2e2d2b; --surface: #3e3c39; --border: #5a564f; --text: #e4d7c4; --text-muted: #b7a38d; /* --success/--danger/--warning/--faturado sao "fixas" entre temas (nao mudam de significado), mas o TOM calibrado pro tema claro (ex: --success #3f7a52) fica escuro demais em cima de --surface escuro -- baixo contraste, quase ilegivel (bug relatado pelo usuario no "Total pago" do modal de Pagamentos). Essas versoes so' clareiam o tom pra ficar legivel em fundo escuro; --success-soft etc continuam do jeito que estao (viram badge/pill clara, funciona bem em cima de escuro). */ --success: #6fcf97; --danger: #e2867e; --warning: #dba85c; --faturado: #5fc3d6; } /* Cor de destaque (Configuracoes > Personalizar) -- independente do tema claro/escuro (mesmo principio de --primary hoje: nao muda entre os dois). Escolhida via html[data-accent="x"], persistida em localStorage (dagior_cor) e aplicada cedo no de cada pagina, igual o tema. "Padrao" (sem atributo) continua a paleta taupe original do :root. */ html[data-accent='salvia'] { --primary: #8a9a7b; --primary-dark: #6d7d5f; --primary-soft: #e1e6da; --on-primary: #2e2d2b; --lateral-texto-muted: #8a9a7b; } html[data-accent='petroleo'] { --primary: #4f7f8c; --primary-dark: #3d6570; --primary-soft: #d7e6e9; --on-primary: #ffffff; --lateral-texto-muted: #6fa3b0; } html[data-accent='vinho'] { --primary: #8c4a56; --primary-dark: #6f3843; --primary-soft: #f0dde0; --on-primary: #ffffff; --lateral-texto-muted: #b06c78; } html[data-accent='ameixa'] { --primary: #7c6a9c; --primary-dark: #5f4f7d; --primary-soft: #e6e0ef; --on-primary: #ffffff; --lateral-texto-muted: #a190bd; } html[data-accent='terracota'] { --primary: #b8674a; --primary-dark: #96503a; --primary-soft: #f0ddd3; --on-primary: #ffffff; --lateral-texto-muted: #cf8a70; } .grade-cores-personalizar { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 14px; max-width: 640px; margin-top: 16px; } .pastilha-cor-personalizar { border: 2px solid transparent; border-radius: var(--radius); padding: 4px; cursor: pointer; background: var(--surface); text-align: center; } .pastilha-cor-personalizar.selecionada { border-color: var(--text); } .amostra-cor-personalizar { height: 48px; border-radius: 10px; margin-bottom: 8px; position: relative; } .amostra-cor-personalizar .marca-selecionada { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 20px; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); opacity: 0; } .pastilha-cor-personalizar.selecionada .marca-selecionada { opacity: 1; } .nome-cor-personalizar { font-size: 13px; color: var(--text-muted); } .linha-info-admin-config { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--border); } .linha-info-admin-config:last-of-type { border-bottom: none; } .rotulo-info-admin-config { font-weight: 600; } .descricao-info-admin-config { font-size: 13px; color: var(--text-muted); margin-top: 2px; } .valor-info-admin-config { color: var(--text-muted); white-space: nowrap; } * { box-sizing: border-box; } html { overflow-x: hidden; } body { margin: 0; overflow-x: hidden; max-width: 100vw; font-family: 'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif; background: var(--bg); color: var(--text); } /* Titulos com a serifada da logo (pedido do usuario 2026-08-22) -- Manrope continua no corpo do texto, so os titulos ganham a Fraunces. */ h1, h2, h3, h4 { font-family: 'Fraunces', serif; font-weight: 500; } .tela-login { min-height: 100vh; display: flex; } .painel-marca-login { flex: 1.3; background: var(--bg); display: flex; align-items: center; justify-content: center; padding: 40px; } .logo-hero-login { width: 100%; max-width: 560px; height: auto; } .painel-form-login { flex: 1; background: var(--lateral-bg); display: flex; align-items: center; justify-content: center; padding: 40px; } .cartao-form-login { width: 100%; max-width: 320px; text-align: center; } .icone-form-login { width: 88px; height: auto; margin: 0 auto 28px; } .cartao-form-login form { text-align: left; } .painel-form-login label { color: var(--lateral-texto); } .painel-form-login input[type='text'], .painel-form-login input[type='password'] { background: var(--lateral-bg-hover); border-color: var(--lateral-bg-hover); color: #fff; } .painel-form-login input[type='text']::placeholder, .painel-form-login input[type='password']::placeholder { color: var(--lateral-texto-muted); } .slogan-login { margin-top: 28px; text-align: center; font-size: 12px; letter-spacing: 0.06em; line-height: 1.7; color: var(--lateral-texto-muted); } @media (max-width: 760px) { .tela-login { flex-direction: column; } .painel-marca-login { flex: none; padding: 32px 20px; } .logo-hero-login { max-width: 220px; } .painel-form-login { flex: none; padding: 32px 20px; } } label { display: block; font-size: 13px; font-weight: 600; margin: 16px 0 6px; color: var(--text); } input[type='text'], input[type='password'] { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; background: var(--bg); color: var(--text); } input:focus { outline: 2px solid var(--primary); outline-offset: 1px; } input[type='number'], input[type='date'], input[type='month'], input[type='time'], select, textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; background: var(--bg); color: var(--text); } /* Icone nativo (relogio/calendario) do navegador vem sempre escuro -- some em cima do fundo escuro do tema. Inverte so' no tema escuro (no claro o icone escuro original ja contrasta bem com o fundo --bg claro). */ html.tema-escuro input[type='date']::-webkit-calendar-picker-indicator, html.tema-escuro input[type='month']::-webkit-calendar-picker-indicator, html.tema-escuro input[type='time']::-webkit-calendar-picker-indicator { filter: invert(1); } textarea { font-family: inherit; resize: vertical; } button { cursor: pointer; font-family: inherit; /*