/* ========================================================================== BR CONTROLE — style.css Identidade dentro do app: azul (claro = branco com azul; escuro = azul escuro predominante). A "capa" (tela de login/entrada) usa uma paleta fixa à parte — fundo escuro + verde neon, igual ao branding do cliente — ver bloco ".vc-brand-entry" mais abaixo, que não muda com o tema. Serifada no branding, sans técnica no corpo, monoespaçada nos valores. ========================================================================== */ :root { --bg: #F3F6FC; --bg-deep: #E6EDF7; --card: #FFFFFF; --card-hover: #EEF3FB; --surface-glass: rgba(255, 255, 255, 0.92); --input-bg: #FBFCFE; --navy: #123C7A; --navy-dark: #0B2650; --steel: #2C6FE0; --gold: #1462C4; --gold-soft: #5B8FE0; --gold-wash: rgba(20, 98, 196, 0.12); --primary: #123C7A; --primary-dark: #0B2650; --green: #178F49; --red: #9B2B26; --yellow: #A67C00; --blue: #1462C4; --text: #101826; --text-dim: #4C5A70; --text-faint: #79879F; --border: #D3DEEE; --border-navy: rgba(18, 60, 122, 0.16); --radius: 12px; --radius-sm: 7px; --shadow: 0 12px 32px rgba(10, 30, 60, 0.14); --shadow-sm: 0 2px 8px rgba(10, 30, 60, 0.09); --font-display: 'Source Serif 4', 'Georgia', serif; --font: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Menlo, monospace; } /* ---------------- Tema escuro (dentro do app) ---------------- Ativado via [data-theme="dark"] no , controlado pelo botão de alternância (ver .vc-theme-toggle) e persistido no localStorage — a troca em si acontece em app.js (App.initTheme). Azul escuro predominante no fundo/cartões, com um azul mais vivo nos botões/links pra manter contraste e legibilidade. */ [data-theme="dark"] { --bg: #060B16; --bg-deep: #03060D; --card: #101A30; --card-hover: #16223E; --surface-glass: rgba(6, 11, 22, 0.88); --input-bg: #101A30; --navy: #2F6FED; --navy-dark: #1B3E85; --steel: #5B9BFF; --gold: #5B9BFF; --gold-soft: #9CC2FF; --gold-wash: rgba(91, 155, 255, 0.16); --primary: #2F6FED; --primary-dark: #1B3E85; --green: #3DDC84; --red: #F0776E; --yellow: #F2C230; --blue: #5B9BFF; --text: #E8EEFB; --text-dim: #A9B8D6; --text-faint: #7C8CAD; --border: #1E2C4A; --border-navy: rgba(91, 155, 255, 0.22); --shadow: 0 12px 32px rgba(0, 0, 0, 0.45); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: var(--font); -webkit-font-smoothing: antialiased; transition: background-color 0.2s ease, color 0.2s ease; } body { padding-bottom: 84px; /* espaço pra bottom nav */ min-height: 100vh; background-image: radial-gradient(circle at 100% 0%, rgba(14,34,64,0.035), transparent 45%); background-attachment: fixed; } /* Trava de segurança contra elemento largo demais alargando a página inteira: aplicada no , não no . Botar overflow-x:hidden direto no body quebra position:fixed (barra de baixo, topo, modais) em iOS/WebView — eles passam a rolar junto com a página em vez de ficarem fixos. No html isso não acontece, porque quem tem os elementos fixed como referência continua sendo a viewport normalmente. */ html { overflow-x: hidden; } a { color: inherit; text-decoration: none; } button { font-family: var(--font); cursor: pointer; } input, select { font-family: var(--font); } ::selection { background: var(--navy); color: #ffffff; } /* Valores monetários e números sempre em monoespaçada — efeito "extrato" */ .vc-kpi-value, .vc-row-value, .vc-comissao-tag, .vc-table td.num, .vc-preview-box strong { font-family: var(--font-mono); font-feature-settings: "tnum" 1; letter-spacing: -0.01em; } /* ---------------- Layout containers ---------------- */ .vc-page { max-width: 720px; margin: 0 auto; padding: 20px 16px 40px; } /* Textura fina tipo "guilhoché" — linhas finas de segurança, bem sutil */ .vc-topbar { position: sticky; top: 0; z-index: 20; background: repeating-linear-gradient( 115deg, rgba(14, 34, 64, 0.025) 0px, rgba(14, 34, 64, 0.025) 1px, transparent 1px, transparent 7px ), var(--surface-glass); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border-navy); box-shadow: inset 0 -2px 0 var(--gold-wash); padding: 13px 16px; display: flex; align-items: center; justify-content: space-between; } .vc-topbar-left { display: flex; align-items: center; gap: 10px; } .vc-menu-btn { width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--border-navy); background: var(--card); color: var(--navy); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: 0.15s; } .vc-menu-btn:hover { background: var(--card-hover); border-color: var(--navy); } .vc-menu-btn svg { width: 19px; height: 19px; } .vc-topbar-brand { display: flex; align-items: center; gap: 10px; } /* Logo do cliente (triângulo + mão + wordmark "BR Controle") — imagem já vem recortada e transparente, no formato retangular original da marca. Por isso NUNCA forçamos largura/altura iguais nem object-fit:cover aqui: isso é o que fazia ela parecer "espremida" num quadrado. A régua certa é fixar a ALTURA (que acompanha o tamanho do texto ao lado) e deixar a largura livre (width:auto), então ela expande/encolhe mantendo a proporção real da arte, em qualquer tela. */ .vc-logo-mark { height: 34px; width: auto; display: block; flex-shrink: 0; object-fit: contain; } .vc-topbar-brand span { /* A logo agora já traz o wordmark "BR Controle" desenhado na própria arte (não é mais só o selo/ícone) — manter esse texto do lado ficaria repetindo o mesmo nome duas vezes. Escondido visualmente, mas o texto continua no HTML (útil pra leitor de tela/SEO). */ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; } .vc-topbar-user { display: flex; align-items: center; gap: 10px; } .vc-user-chip { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; } .vc-user-chip strong { font-size: 13px; font-weight: 600; max-width: 34vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; } .vc-user-chip small { font-size: 10px; color: var(--gold); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; } .vc-icon-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border-navy); background: var(--card); color: var(--text-dim); display: flex; align-items: center; justify-content: center; transition: 0.15s; position: relative; } .vc-icon-btn:hover { color: var(--red); border-color: var(--red); } .vc-icon-btn--neutral:hover { color: var(--navy); border-color: var(--navy); } .vc-icon-btn--ok:hover { color: var(--navy); border-color: var(--navy); } .vc-icon-badge-count { position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 99px; background: var(--navy); color: #fff; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; line-height: 1; } /* ---------------- Comprovantes (fotos da venda) ---------------- */ .vc-comprovantes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .vc-comprovante-item { position: relative; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); aspect-ratio: 1; } .vc-comprovante-item img { width: 100%; height: 100%; object-fit: cover; display: block; } .vc-comprovante-excluir { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; border: none; font-size: 12px; line-height: 1; cursor: pointer; } /* ---------------- Alternância de tema (claro/escuro) ---------------- */ .vc-theme-toggle:hover { color: var(--primary); border-color: var(--primary); } .vc-theme-toggle svg { width: 17px; height: 17px; } .vc-theme-toggle .vc-theme-icon-sun { display: none; } [data-theme="dark"] .vc-theme-toggle .vc-theme-icon-sun { display: block; } [data-theme="dark"] .vc-theme-toggle .vc-theme-icon-moon { display: none; } /* Versão flutuante, usada nas páginas de login/redefinir senha (sem topbar) */ .vc-theme-toggle--float { position: fixed; top: 16px; right: 16px; z-index: 30; } /* ---------------- Cards ---------------- */ .vc-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow-sm); } .vc-section-title { font-size: 11.5px; font-weight: 700; color: var(--navy); text-transform: uppercase; letter-spacing: 0.09em; margin: 30px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; } .vc-section-title::before { content: ""; width: 3px; height: 12px; background: var(--gold); border-radius: 1px; display: inline-block; } /* ---------------- KPI grid (dashboard) ---------------- */ .vc-kpi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .vc-kpi-grid .vc-kpi:first-child { grid-column: 1 / -1; } .vc-kpi { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; position: relative; overflow: hidden; box-shadow: var(--shadow-sm); } .vc-kpi--hero { background: repeating-linear-gradient( 120deg, rgba(255,255,255,0.025) 0px, rgba(255,255,255,0.025) 1px, transparent 1px, transparent 8px ), linear-gradient(150deg, var(--navy), var(--navy-dark) 75%); border-color: var(--navy-dark); } .vc-kpi--hero .vc-kpi-label { color: rgba(255,255,255,0.62); } .vc-kpi--hero::after { content: ""; position: absolute; right: -18px; top: -18px; width: 70px; height: 70px; border: 1px solid rgba(201, 169, 104, 0.35); border-radius: 50%; } .vc-kpi-label { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; font-weight: 600; } .vc-kpi-value { font-size: 23px; font-weight: 600; letter-spacing: -0.01em; color: var(--navy); } .vc-kpi--hero .vc-kpi-value { color: var(--gold-soft); font-size: 28px; } .vc-kpi--danger .vc-kpi-value { color: var(--red); } .vc-kpi--ok .vc-kpi-value { color: var(--green); } /* ---------------- Calendário de mensalidades (tela Lojas, admin) ---------------- */ .vc-calendario-topo { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 4px; } .vc-calendario-topo strong { min-width: 150px; text-align: center; font-size: 14.5px; text-transform: capitalize; } .vc-calendario-resumo { text-align: center; font-size: 12.5px; color: var(--text-dim); margin: 2px 0 12px; } .vc-calendario-legenda { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; font-size: 11.5px; color: var(--text-dim); margin-bottom: 12px; } .vc-calendario-legenda span { display: flex; align-items: center; gap: 5px; } .vc-calendario-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); } .vc-calendario-dot--danger { background: var(--red); } .vc-calendario-dot--warn { background: var(--yellow); } .vc-calendario-dot--ok { background: var(--blue); } .vc-calendario-dot--pago { background: var(--green); } .vc-calendario-semana { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: 11px; font-weight: 700; color: var(--text-faint); text-transform: uppercase; margin-bottom: 4px; } .vc-calendario-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; } .vc-calendario-dia { position: relative; aspect-ratio: 1; min-height: 40px; border-radius: var(--radius-sm); border: 1px solid transparent; background: var(--bg-deep); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 12.5px; font-weight: 600; color: var(--text); cursor: default; } .vc-calendario-dia--vazio { background: transparent; } .vc-calendario-dia--clicavel { cursor: pointer; } .vc-calendario-dia--clicavel:hover { background: var(--card-hover); } .vc-calendario-dia--hoje { border-color: var(--navy); } .vc-calendario-dia--selecionado { background: var(--gold-wash); border-color: var(--gold); } .vc-calendario-dia-pontos { display: flex; gap: 2px; } .vc-calendario-dia-ponto { width: 5px; height: 5px; border-radius: 50%; } .vc-calendario-dia-ponto--danger { background: var(--red); } .vc-calendario-dia-ponto--warn { background: var(--yellow); } .vc-calendario-dia-ponto--ok { background: var(--blue); } .vc-calendario-dia-ponto--pago { background: var(--green); } /* ---------------- Caixa (painel estilo TryController) ---------------- */ .vc-caixa-hero-row { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; } .vc-caixa-hero-atual .vc-kpi-value { font-size: 26px; } .vc-caixa-hero-inicial { background: var(--gold-wash); border-color: var(--border-navy); } .vc-caixa-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 12px; margin-top: 18px; } .vc-caixa-stat { display: flex; align-items: flex-start; gap: 8px; } .vc-caixa-stat-dot { width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--blue); flex-shrink: 0; } .vc-caixa-stat-dot--danger { background: var(--red); } .vc-caixa-stat-dot--warn { background: var(--yellow); } .vc-caixa-stat-label { font-size: 12.5px; color: var(--text-dim); line-height: 1.3; } .vc-caixa-stat-value { font-size: 15px; font-weight: 600; color: var(--text); font-family: var(--font-mono); margin-top: 2px; } @media (max-width: 380px) { .vc-caixa-hero-row { grid-template-columns: 1fr; } } /* ---------------- Buttons ---------------- */ .vc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: none; border-radius: var(--radius-sm); padding: 13px 20px; font-weight: 600; font-size: 14px; letter-spacing: 0.01em; transition: 0.15s transform, 0.15s opacity, 0.15s background; } .vc-btn:active { transform: scale(0.98); } .vc-btn--primary { background: var(--navy); color: #ffffff; } .vc-btn--primary:hover { background: var(--navy-dark); } .vc-btn--ghost { background: transparent; color: var(--navy); border: 1px solid var(--border-navy); } .vc-btn--ghost:hover { background: var(--card-hover); border-color: var(--navy); } .vc-btn--danger { background: rgba(155, 43, 38, 0.1); color: var(--red); } .vc-btn--danger:hover { background: rgba(155, 43, 38, 0.18); } .vc-btn--ok { background: var(--green); color: #ffffff; } .vc-btn--ok:hover { background: #16583a; } .vc-btn--warn { background: rgba(166, 124, 0, 0.12); color: var(--yellow); } .vc-btn--warn:hover { background: rgba(166, 124, 0, 0.2); } .vc-btn--sm { padding: 8px 14px; font-size: 12.5px; } .vc-btn--block { width: 100%; } .vc-fab { position: fixed; right: 18px; bottom: 96px; z-index: 25; border-radius: 50%; width: 56px; height: 56px; background: var(--navy); color: var(--gold-soft); border: 1px solid rgba(201, 169, 104, 0.4); font-size: 26px; box-shadow: 0 10px 24px rgba(14, 34, 64, 0.35); display: flex; align-items: center; justify-content: center; } /* ---------------- Forms ---------------- */ .vc-field { margin-bottom: 16px; } .vc-field label { display: block; font-size: 12.5px; color: var(--text-dim); margin-bottom: 6px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; } .vc-input, .vc-select, .vc-textarea { width: 100%; background: var(--input-bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 13px 14px; color: var(--text); font-size: 15px; outline: none; transition: 0.15s border-color, 0.15s box-shadow; } /* O navegador (Chrome/Safari) pinta o campo de branco/amarelo sozinho quando autopreenche e-mail/senha salvos, ignorando nosso "background" normal — esse truque força a cor certa também nesse caso. */ .vc-input:-webkit-autofill, .vc-input:-webkit-autofill:hover, .vc-input:-webkit-autofill:focus { -webkit-text-fill-color: var(--text); -webkit-box-shadow: 0 0 0 1000px var(--input-bg) inset; box-shadow: 0 0 0 1000px var(--input-bg) inset; transition: background-color 9999s ease-in-out 0s; } .vc-input:focus, .vc-select:focus, .vc-textarea:focus { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(14, 34, 64, 0.08); } .vc-input::placeholder { color: var(--text-faint); } .vc-input--erro { border-color: var(--red) !important; } .vc-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .vc-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; } /* Todo campo dentro de uma grid/flex precisa poder encolher abaixo do seu conteúdo (min-width:0 é o padrão do browser é "auto", que trava o item no tamanho do texto/select e empurra os vizinhos pra fora da tela — é a causa mais comum de texto/botão "saindo do lugar" no mobile). */ .vc-row-2 > *, .vc-row-3 > *, .vc-field { min-width: 0; } /* Cabeçalho padrão das páginas de lista (título + botão "+ Novo X"): substitui os estilos inline repetidos, garantindo que o título e o botão quebrem linha em vez de se espremerem/saírem da tela em telas estreitas. */ .vc-page-header { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; } .vc-page-header h2 { margin: 0; font-size: 20px; } /* Linha com tag + botões de ação (ex.: PIN do vendedor, campo de senha temporária): sem flex-wrap, em telas estreitas o texto dos botões era cortado/empurrado pra fora do modal. Agora quebra pra próxima linha. */ .vc-inline-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .vc-inline-actions > * { min-width: 0; } /* Linha de campos lado a lado (mensalidade/vendedor, período de cobrança, filtro de datas etc.): em telas largas ficam em colunas; em telas estreitas cada campo tem espaço mínimo garantido (140px) e quebra pra próxima linha em vez de espremer o texto/select até cortar. */ .vc-inline-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; } .vc-inline-row > .vc-field { flex: 1 1 140px; min-width: 140px; margin-bottom: 0; } .vc-inline-row--buttons > .vc-btn { flex: 1 1 140px; } .vc-badge--saque { background: rgba(166, 102, 0, 0.12); color: var(--yellow); } .vc-suffix-input { position: relative; } .vc-suffix-input span { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--text-faint); font-size: 13px; font-weight: 700; } .vc-search { position: relative; margin-bottom: 16px; } .vc-search input { width: 100%; background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow-sm); border-radius: var(--radius-sm); padding: 12px 16px 12px 40px; color: var(--text); font-size: 14px; } .vc-search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-faint); } /* ---------------- Badges ---------------- */ .vc-badge { font-size: 11px; font-weight: 700; padding: 5px 10px; border-radius: 5px; background: var(--border); color: var(--text-dim); white-space: nowrap; text-transform: uppercase; letter-spacing: 0.03em; } .vc-badge--ok { background: rgba(30, 113, 69, 0.1); color: var(--green); } .vc-badge--danger { background: rgba(155, 43, 38, 0.1); color: var(--red); } .vc-badge--info { background: rgba(44, 74, 117, 0.1); color: var(--steel); } .vc-badge--atencao { background: rgba(150, 102, 14, 0.12); color: var(--yellow); } .vc-badge--neutro { background: var(--border); color: var(--text-dim); } /* Variante pra avisos longos (ex: "Compra ativa com outro vendedor da loja") — em telas estreitas, o texto quebra em vez de ser cortado na borda da tela (o html tem overflow-x:hidden como rede de segurança, então um badge nowrap largo demais simplesmente some, sem dar scroll). */ .vc-badge--wrap { white-space: normal; display: inline-block; max-width: 100%; } .vc-tabs { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; } .vc-tab-btn { padding: 9px 16px; border-radius: 10px; border: 1px solid var(--border-navy); background: transparent; color: var(--navy); font-size: 13px; font-weight: 600; cursor: pointer; } .vc-tab-btn:hover { background: var(--card-hover); } .vc-tab-btn.is-active { background: var(--navy); color: #ffffff; border-color: var(--navy); } .vc-tab-panel { display: none; } .vc-tab-panel.is-active { display: block; } /* ---------------- Resumo de caixa (card no topo de Vendas) ---------------- */ .vc-resumo-caixa { margin-bottom: 18px; } .vc-resumo-caixa-topo { display: flex; align-items: center; gap: 14px; } .vc-resumo-caixa-icone { width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--border-navy); color: var(--navy); } .vc-resumo-caixa-label { font-size: 12.5px; color: var(--text-dim); margin: 0 0 2px; } .vc-resumo-caixa-valor { font-size: 22px; font-weight: 700; color: var(--navy-dark); line-height: 1.15; } .vc-resumo-caixa-meta { font-size: 12.5px; color: var(--text-dim); margin-top: 2px; } [data-theme="dark"] .vc-resumo-caixa-valor { color: var(--navy); } .vc-progress-bloco { margin-top: 16px; } .vc-progress-bloco-topo { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; } .vc-progress-bloco-topo span:first-child { font-size: 12.5px; color: var(--text-dim); } .vc-progress-bloco-topo span:last-child { font-size: 12.5px; font-weight: 600; color: var(--navy-dark); } [data-theme="dark"] .vc-progress-bloco-topo span:last-child { color: var(--navy); } .vc-progress-track { height: 8px; border-radius: 99px; background: var(--bg-deep); overflow: hidden; } .vc-progress-fill { height: 100%; border-radius: 99px; background: var(--navy); transition: width .25s ease; } .vc-progress-fill--ok { background: var(--green); } .vc-progress-fill--danger { background: var(--red); } .vc-progress-fill--warn { background: var(--yellow); } /* Variante maior, usada no fechamento de caixa (resumo e relatório final): mesma barra, mas com rótulo em destaque acima e valor grande ao lado. */ .vc-progress-bloco--lg .vc-progress-track { height: 10px; } .vc-progress-bloco--lg .vc-progress-bloco-topo span:first-child { font-size: 13.5px; font-weight: 600; color: var(--text); } .vc-progress-bloco--lg .vc-progress-bloco-topo span:last-child { font-size: 13.5px; } .vc-progress-bloco + .vc-progress-bloco, .vc-progress-bloco--lg + .vc-progress-bloco--lg { margin-top: 18px; } .vc-resumo-caixa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; } .vc-resumo-caixa-item { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; display: flex; align-items: center; gap: 10px; } .vc-resumo-caixa-item-icon { flex-shrink: 0; color: var(--navy); background: var(--bg-deep); border-radius: 9px; padding: 6px; box-sizing: content-box; } .vc-resumo-caixa-item > div { min-width: 0; } .vc-resumo-caixa-item .vc-label { display: block; margin-bottom: 4px; } .vc-resumo-caixa-item strong { font-size: 15px; } .vc-resumo-caixa-fechado { display: flex; align-items: center; gap: 10px; color: var(--text-dim); font-size: 13.5px; } /* ---------------- Rows / lists ---------------- */ .vc-row-item { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--border); } .vc-row-item:last-child { border-bottom: none; } .vc-row-item--danger { } .vc-row-title { font-weight: 600; font-size: 14.5px; color: var(--text); } .vc-row-sub { font-size: 12.5px; color: var(--text-dim); margin-top: 2px; } .vc-row-value { font-weight: 600; text-align: right; font-size: 14.5px; color: var(--navy); } .vc-row-multa { font-size: 11px; color: var(--red); font-weight: 600; } .vc-empty { text-align: center; color: var(--text-faint); padding: 32px 16px; font-size: 14px; } .vc-label { display: block; font-size: 11px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 3px; } .text-danger { color: var(--red); } .text-ok { color: var(--green); } /* ---------------- Clientes ---------------- */ .vc-cliente-card { display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; } .vc-cliente-info { display: flex; align-items: center; gap: 12px; } .vc-cliente-avatar { width: 44px; height: 44px; border-radius: 8px; background: var(--navy); color: var(--gold-soft); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 600; font-size: 17px; flex-shrink: 0; border: 1px solid rgba(201, 169, 104, 0.4); } .vc-cliente-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } /* ---------------- Vendas ---------------- */ .vc-emp-card { margin-bottom: 12px; cursor: pointer; transition: 0.15s background, 0.15s border-color; } .vc-emp-card:hover { background: var(--card-hover); border-color: var(--border-navy); } .vc-emp-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 14px; } .vc-emp-card-bottom { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .vc-emp-card-bottom strong { display: block; font-size: 14px; margin-top: 2px; font-family: var(--font-mono); color: var(--navy); } .vc-aviso-filtro { display: flex; align-items: center; justify-content: space-between; background: var(--gold-wash); border: 1px solid rgba(169, 134, 60, 0.3); color: var(--navy); padding: 10px 14px; border-radius: var(--radius-sm); font-size: 13px; margin-bottom: 16px; display: none; } .vc-aviso-filtro button { background: none; border: none; color: var(--navy); font-weight: 700; } .vc-aviso-danger { display: none; background: rgba(155, 43, 38, 0.08); border: 1px solid rgba(155, 43, 38, 0.3); color: var(--navy); padding: 12px 14px; border-radius: var(--radius-sm); font-size: 13px; margin-bottom: 18px; } .vc-aviso-danger-titulo { font-weight: 700; color: var(--red); margin-bottom: 4px; } .vc-aviso-danger-item { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; } .vc-aviso-danger-item a { color: var(--navy); text-decoration: underline; } /* ---------------- Table ---------------- */ .vc-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-sm); } .vc-table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 560px; } .vc-table th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--navy); font-weight: 700; padding: 10px 10px; border-bottom: 2px solid var(--navy); background: var(--bg-deep); } .vc-table td { padding: 10px; border-bottom: 1px solid var(--border); vertical-align: middle; } .vc-table tbody tr:hover { background: var(--card-hover); } .vc-td-actions { display: flex; gap: 6px; align-items: center; white-space: nowrap; flex-wrap: wrap; } .vc-checkbox-inline { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--vc-text-muted, #666); cursor: pointer; white-space: nowrap; } .vc-checkbox-inline input { margin: 0; cursor: pointer; } /* ---------------- Modal / painel lateral ---------------- */ .vc-overlay { position: fixed; inset: 0; background: rgba(8, 20, 38, 0.65); opacity: 0; pointer-events: none; transition: 0.2s; z-index: 40; } .vc-overlay.show { opacity: 1; pointer-events: auto; } .vc-modal, .vc-painel { position: fixed; z-index: 50; background: var(--card); border: 1px solid var(--border); transition: 0.25s cubic-bezier(.2,.8,.2,1); } .vc-modal { left: 50%; top: 50%; transform: translate(-50%, -46%) scale(0.96); width: 92%; max-width: 420px; border-radius: var(--radius); padding: 20px; opacity: 0; pointer-events: none; max-height: 86vh; overflow-y: auto; box-shadow: 0 24px 60px rgba(8, 20, 38, 0.35); border-top: 3px solid var(--navy); } .vc-modal.show { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); } .vc-painel { right: 0; top: 0; bottom: 0; width: 100%; max-width: 460px; border-radius: 0; padding: 20px; transform: translateX(100%); overflow-y: auto; border-left: 3px solid var(--navy); } .vc-painel.show { transform: translateX(0); } /* ---------------- Menu lateral (drawer) ---------------- */ .vc-painel--left { left: 0; right: auto; border-left: none; border-right: 3px solid var(--navy); transform: translateX(-100%); max-width: 300px; display: flex; flex-direction: column; } .vc-painel--left.show { transform: translateX(0); } .vc-drawer-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; } .vc-drawer-header .vc-topbar-brand span { font-size: 17px; } .vc-drawer-header .vc-logo-mark { height: 54px; } .vc-drawer-user { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; margin-bottom: 10px; border-bottom: 1px solid var(--border); } .vc-drawer-avatar { width: 42px; height: 42px; border-radius: 8px; background: var(--navy); color: var(--gold-soft); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 600; font-size: 17px; flex-shrink: 0; border: 1px solid rgba(201, 169, 104, 0.4); } .vc-drawer-user strong { display: block; font-size: 14.5px; color: var(--text); } .vc-drawer-user small { font-size: 10.5px; color: var(--gold); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; } .vc-drawer-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; } .vc-drawer-nav .vc-navitem { flex: 0 0 auto; flex-direction: row; justify-content: flex-start; gap: 12px; padding: 12px 10px; border-radius: 8px; font-size: 14px; text-transform: none; letter-spacing: normal; color: var(--text); } .vc-drawer-nav .vc-navitem svg { width: 20px; height: 20px; color: var(--text-dim); } .vc-drawer-nav .vc-navitem:hover { background: var(--card-hover); } .vc-drawer-nav .vc-navitem.active { background: var(--gold-wash); color: var(--navy); font-weight: 700; } .vc-drawer-nav .vc-navitem.active svg { color: var(--gold); } .vc-drawer-footer { border-top: 1px solid var(--border); padding-top: 14px; margin-top: 14px; } .vc-drawer-secure-note { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-faint); margin-top: 12px; } .vc-drawer-secure-note svg { width: 13px; height: 13px; color: var(--green); flex-shrink: 0; } .vc-modal-header, .vc-painel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; } .vc-modal-header h3, .vc-painel-header h3 { margin: 0; font-size: 18px; font-family: var(--font-display); font-weight: 600; color: var(--navy); } .vc-close-btn { background: var(--bg-deep); border: none; color: var(--text); width: 30px; height: 30px; border-radius: 50%; font-size: 16px; } .vc-preview-box { background: var(--bg-deep); border: 1px dashed var(--border-navy); border-radius: var(--radius-sm); padding: 14px; font-size: 14px; color: var(--text); margin-bottom: 18px; line-height: 1.5; } .vc-preview-box strong { color: var(--navy); } .vc-hint-prazo { font-size: 12.5px; color: var(--text-dim); margin: -8px 0 16px; line-height: 1.5; } /* ---------------- Bottom nav ---------------- */ /* Itens marcados com [data-tipos] (ex: "Lojas", "Vendedores") começam ESCONDIDOS de vez (display:none) até o JS confirmar o tipo do usuário logado — a barra fica só com os itens "de todo mundo" nesse meio-tempo, sem buraco vazio esperando os outros aparecerem. Isso é inevitável: cada clique aqui recarrega a página inteira, e o login (Firebase) leva um instante pra confirmar de novo toda vez. Pra não correr o risco de alguém tocar bem na hora em que os itens aparecem e acabar clicando no vizinho (a barra "pula" nesse instante), quem trava isso é o .vc-loading logo abaixo: ele desliga o toque na barra inteira até o JS terminar de decidir o que mostrar. */ .vc-navitem[data-tipos], .vc-drawer-nav .vc-navitem[data-tipos] { display: none; } /* Ligado por um script inline no (some assim que App.initNav roda, e só então o clique volta a funcionar). Sem isso, um toque no exato instante em que os itens aparecem podia cair no botão vizinho. */ .vc-loading .vc-bottomnav, .vc-loading .vc-drawer-nav { pointer-events: none; } .vc-bottomnav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 30; background: var(--surface-glass); backdrop-filter: blur(12px); border-top: 1px solid var(--border-navy); box-shadow: inset 0 2px 0 var(--gold-wash); display: flex; padding: 8px 6px calc(8px + env(safe-area-inset-bottom)); } .vc-navitem { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 0; color: var(--text-faint); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; border-radius: 10px; transition: 0.15s; } .vc-navitem svg { width: 21px; height: 21px; } .vc-navitem.active { color: var(--navy); } .vc-navitem.active svg { color: var(--gold); } .vc-navitem:active { background: var(--card-hover); } /* ---------------- Toast ---------------- */ .vc-toast { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%) translateY(10px); background: var(--navy); border: 1px solid var(--navy-dark); color: #fff; padding: 12px 20px; border-radius: var(--radius-sm); font-size: 13.5px; font-weight: 600; box-shadow: var(--shadow); opacity: 0; transition: 0.25s; z-index: 100; max-width: 90%; text-align: center; } .vc-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } .vc-toast--erro { background: var(--red); border-color: #7a221d; } .vc-toast--ok { background: var(--navy); } /* ---------------- Login page ---------------- */ /* "Capa" do sistema (login, trocar-senha, redefinir-senha): paleta FIXA — fundo escuro + verde neon, igual ao branding/print de referência do cliente. Não muda com o botão de tema (essas páginas nem mostram o botão) — o toggle claro/escuro só existe dentro do app, depois de logado. */ .vc-brand-entry { --bg: #04060B; --bg-deep: #020308; --card: #0A0F1C; --card-hover: #0F1626; --surface-glass: rgba(4, 6, 11, 0.9); --input-bg: #0A0F1C; --navy: #22D06B; --navy-dark: #1B9E54; --steel: #A9BEE8; --gold: #22D06B; --gold-soft: #7FE3A4; --gold-wash: rgba(34, 208, 107, 0.16); --primary: #22D06B; --primary-dark: #1B9E54; --green: #22D06B; --red: #F0776E; --yellow: #F2C230; --blue: #4C8DFF; --text: #F2F6FF; --text-dim: #A9B8D6; --text-faint: #7688AC; --border: #1B2740; --border-navy: rgba(34, 208, 107, 0.35); --shadow: 0 12px 32px rgba(0, 0, 0, 0.6); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.45); } /* Fundo com faixas neon diagonais (verde + azul), igual ao print de referência — em vez do fundo liso escuro que estava antes. */ .vc-brand-entry .vc-login-wrap { background: repeating-linear-gradient( 115deg, rgba(76, 141, 255, 0) 0px, rgba(76, 141, 255, 0) 38px, rgba(76, 141, 255, 0.16) 40px, rgba(76, 141, 255, 0.16) 44px, rgba(76, 141, 255, 0) 46px, rgba(76, 141, 255, 0) 96px ), repeating-linear-gradient( 115deg, rgba(34, 208, 107, 0) 14px, rgba(34, 208, 107, 0) 58px, rgba(34, 208, 107, 0.18) 60px, rgba(34, 208, 107, 0.18) 64px, rgba(34, 208, 107, 0) 66px, rgba(34, 208, 107, 0) 116px ), var(--bg); } /* Cartão com borda neon verde inteira (não só o topo) + o brilho ao redor, e campos com contorno prateado/azulado — igual ao print. */ .vc-brand-entry .vc-login-card { border: 1px solid var(--navy); box-shadow: 0 0 0 1px rgba(34, 208, 107, 0.25), 0 0 24px rgba(34, 208, 107, 0.18), var(--shadow); } .vc-brand-entry .vc-input { border-color: var(--steel); background: var(--input-bg); } .vc-brand-entry .vc-input:focus { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(34, 208, 107, 0.18); } .vc-login-wrap { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; background: repeating-linear-gradient( 115deg, rgba(14, 34, 64, 0.02) 0px, rgba(14, 34, 64, 0.02) 1px, transparent 1px, transparent 9px ), var(--bg); } .vc-login-brand { text-align: center; margin-bottom: 32px; } .vc-login-brand .vc-logo-mark { display: block; margin: 0 auto 14px; height: 96px; width: auto; border-radius: 0; } .vc-login-brand h1 { /* Mesmo caso do texto do topbar: a logo já traz "BR Controle" escrito na própria arte, então esse título ficaria duplicado visualmente. Escondido só visualmente — continua no HTML pra acessibilidade. */ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; } .vc-login-brand p { color: var(--gold); font-size: 11.5px; margin: 0; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; } .vc-login-card { width: 100%; max-width: 380px; border-top: 3px solid var(--navy); } /* ---------------- Login pareado (unidade) ---------------- */ .vc-unidade-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--border); } .vc-unidade-header h2 { margin: 0; font-size: 19px; } .vc-unidade-header .vc-row-sub { margin-top: 2px; } .vc-perfil-toggle { display: flex; background: var(--bg-deep); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 4px; margin-bottom: 18px; gap: 4px; } .vc-perfil-toggle button { flex: 1; border: none; background: transparent; padding: 10px 8px; font-size: 13px; font-weight: 700; border-radius: 6px; color: var(--text-dim); cursor: pointer; transition: 0.15s background, 0.15s color; } .vc-perfil-toggle button.active { background: var(--navy); color: #fff; } .vc-pin-input { text-align: center; letter-spacing: 6px; font-size: 20px; font-weight: 700; text-transform: uppercase; font-family: var(--font-mono, monospace); } .vc-login-hint { margin-top: 18px; font-size: 12px; color: var(--text-dim); background: var(--bg-deep); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; line-height: 1.6; } .vc-login-error { color: var(--red); font-size: 13px; margin: -6px 0 14px; display: none; } .vc-link-btn { background: none; border: none; padding: 0; cursor: pointer; color: var(--navy); font-weight: 700; font-size: 12px; text-decoration: underline; text-underline-offset: 2px; } .vc-link-btn:hover { color: var(--gold); } .vc-login-reset { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); } .vc-reset-msg { font-size: 12.5px; line-height: 1.6; color: var(--green); background: rgba(30, 113, 69, 0.08); border-radius: var(--radius-sm); padding: 10px 12px; margin: 0 0 14px; } .vc-reset-msg--erro { color: var(--red); background: rgba(155, 43, 38, 0.08); } .vc-aviso-cancelada { font-size: 12.5px; line-height: 1.6; color: var(--text-dim); background: var(--border); border-radius: var(--radius-sm); padding: 10px 12px; margin: 0 0 14px; } /* ---------------- Suporte ---------------- */ .vc-suporte-faq { margin-bottom: 10px; } .vc-suporte-faq summary { cursor: pointer; font-weight: 600; font-size: 14px; color: var(--navy); padding: 4px 0; list-style: none; } .vc-suporte-faq summary::-webkit-details-marker { display: none; } .vc-suporte-faq summary::before { content: '+ '; color: var(--gold); font-weight: 700; } .vc-suporte-faq[open] summary::before { content: '– '; } .vc-suporte-faq p { font-size: 13px; line-height: 1.6; color: var(--text-dim); margin: 6px 0 12px; } .vc-suporte-contato { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; } /* ---------------- Vendedores ---------------- */ /* O card tem até 5 itens do lado direito (comissão, acréscimo mínimo, Pix, Editar, Excluir) — sem flex-wrap eles empurravam o card pra fora da tela em celular, alargando a página inteira e escondendo a barra inferior fixa. Agora quebra em linhas conforme precisar. */ .vc-vendedor-card { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; gap: 10px; flex-wrap: wrap; } .vc-vendedor-card > div:first-child { flex: 1 1 180px; min-width: 0; } .vc-vendedor-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } .vc-comissao-tag { color: var(--navy); font-weight: 700; font-size: 15px; white-space: nowrap; } /* ---------------- Lojas / Redes ---------------- */ .vc-loja-card { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; gap: 10px; } .vc-loja-avatar { width: 44px; height: 44px; border-radius: 8px; background: var(--navy); color: var(--gold-soft); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 600; font-size: 17px; flex-shrink: 0; border: 1px solid rgba(201, 169, 104, 0.4); } .vc-loja-info { display: flex; align-items: center; gap: 12px; } /* ---------------- WhatsApp ---------------- */ .vc-whatsapp-btn { width: 32px; height: 32px; border-radius: 50%; background: rgba(30, 113, 69, 0.1); color: #1E7145; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: 0.15s; } .vc-whatsapp-btn:hover { background: rgba(30, 113, 69, 0.2); } .vc-td-actions .vc-whatsapp-btn { width: 30px; height: 30px; } /* ---------------- Busca de cliente no venda ---------------- */ .vc-cliente-dropdown { position: absolute; top: 100%; left: 0; right: 0; z-index: 20; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow); margin-top: 4px; max-height: 240px; overflow-y: auto; display: none; } .vc-cliente-dropdown.show { display: block; } .vc-cliente-dropdown-item { padding: 10px 14px; cursor: pointer; border-bottom: 1px solid var(--border); } .vc-cliente-dropdown-item:last-child { border-bottom: none; } .vc-cliente-dropdown-item:hover, .vc-cliente-dropdown-item.active { background: var(--card-hover); } .vc-cliente-dropdown-item .nome { font-weight: 600; color: var(--text); font-size: 14px; } .vc-cliente-dropdown-item .sub { font-size: 12.5px; color: var(--text-dim); } .vc-cliente-dropdown-empty { padding: 14px; color: var(--text-dim); font-size: 13.5px; text-align: center; } /* ---------------- Negociação de multa ---------------- */ .vc-badge--negociada { background: rgba(150,102,14,0.12); color: var(--yellow); } /* ---------------- Caixa no início / config automática ---------------- */ .vc-field input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--navy); flex: none; } #modal-config-auto .vc-field:first-of-type, #modal-movimento .vc-field { margin-bottom: 14px; } /* ---------------- Filtros da lista de vendas ---------------- */ .vc-search-row { display: flex; gap: 8px; align-items: center; margin-bottom: 16px; } .vc-btn-filtros { flex-shrink: 0; position: relative; } .vc-btn-filtros .vc-icon-badge-count { background: var(--gold); } .vc-filtro-grupo { margin-bottom: 18px; } .vc-filtro-grupo-titulo { font-size: 11.5px; font-weight: 700; color: var(--navy); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border); } .vc-filtro-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 2px; font-weight: normal; font-size: 14px; color: var(--text); cursor: pointer; border-bottom: 1px solid var(--border); } .vc-filtro-item:last-child { border-bottom: none; } .vc-filtro-item small { color: var(--text-faint); font-weight: 600; margin-left: 4px; } .vc-filtro-item input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--navy); flex-shrink: 0; } @media (max-width: 480px) { .vc-search-row { flex-wrap: wrap; } .vc-btn-filtros { flex: 1 1 100%; } } /* ---------------- Detalhe de saques por categoria (Relatório > Caixa) ---------------- */ /* Era "vc-row-sub" com margin-top negativo, encostando no card de cima — ficava pequeno e colado, quase ilegível. Agora tem respiro, cor com mais contraste e quebra as categorias em linhas (em vez de um texto corrido com "·"), o que também ajuda a não estourar a largura no celular. */ .vc-saques-detalhe { margin: 12px 0 0; font-size: 13.5px; color: var(--text); line-height: 1.7; } /* ---------------- Responsivo ---------------- */ @media (min-width: 720px) { .vc-page { padding-top: 28px; } .vc-kpi-grid { grid-template-columns: repeat(3, 1fr); } .vc-kpi-grid .vc-kpi:first-child { grid-column: span 1; } } @media (max-width: 420px) { .vc-row-2 { grid-template-columns: 1fr; } .vc-row-3 { grid-template-columns: 1fr; } .vc-emp-card-bottom { grid-template-columns: 1fr 1fr; } /* Modal mais estreito precisa de menos padding pro conteúdo não comprimir tanto — e o título menor evita quebra feia em 2 linhas. */ .vc-modal, .vc-painel { padding: 16px; } .vc-modal-header h3, .vc-painel-header h3 { font-size: 16px; } /* Tag do PIN (letter-spacing largo, monoespaçada) precisa poder encolher em telas bem estreitas em vez de empurrar os botões pra fora. */ #texto-pin-vendedor { font-size: 15px !important; letter-spacing: 1px !important; padding: 8px 10px !important; } } /* ========================================================================== AJUSTES MOBILE — formulários e modais (revisão 2026-09) -------------------------------------------------------------------------- Este bloco fica no FIM do arquivo de propósito: ele sobrescreve as regras antigas sem precisar mexer nelas, então dá pra remover tudo daqui pra baixo se algo der errado, sem quebrar o resto do sistema. Problemas que este bloco resolve: 1. Rótulo "colado" na caixa do campo (a sensação de "palavra em cima da caixa"): o label era MAIÚSCULO, com letter-spacing e só 6px de folga. Rótulos longos quebravam em 2-3 linhas comprimidas encostando no input. 2. iOS dando zoom sozinho ao tocar num campo (input com fonte < 16px) — isso desalinha a tela inteira e é a causa mais comum de "ficou estranho no celular". 3. Modal centralizado no meio da tela: num formulário longo (vendedor tem 8 campos), no celular ele virava uma caixinha espremida, com o botão "Salvar" escondido e a página de trás rolando junto. ========================================================================== */ /* ---------------- 1. Rótulos e textos de ajuda ---------------- */ .vc-field { margin-bottom: 18px; } .vc-field > label { text-transform: none; letter-spacing: 0; font-size: 13.5px; line-height: 1.35; font-weight: 600; color: var(--text); margin-bottom: 8px; } /* Texto explicativo abaixo de um campo. Substitui os style="font-size:12px; color:var(--text-dim)" inline espalhados pelo HTML. */ .vc-help { display: block; font-size: 12.5px; line-height: 1.5; color: var(--text-dim); margin-top: 7px; } .vc-help--erro { color: var(--red); font-weight: 600; } /* ---------------- 2. Grupo de checkboxes ---------------- */ /* Antes era um flex solto com labels minúsculos: alvo de toque pequeno demais no celular e sem indicação visual de "isto é clicável". Agora cada opção é um cartão de 48px de altura mínima (recomendação de acessibilidade do Google Play para alvos de toque). */ .vc-check-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin-top: 8px; } .vc-check, .vc-field .vc-check { display: flex; align-items: center; gap: 10px; min-height: 48px; margin: 0; padding: 10px 12px; font-size: 14px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--text); background: var(--input-bg); border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; transition: 0.15s border-color, 0.15s background; } .vc-check:has(input:checked), .vc-field .vc-check:has(input:checked) { border-color: var(--navy); background: var(--gold-wash); } .vc-check input[type="checkbox"] { width: 20px; height: 20px; flex: none; accent-color: var(--navy); margin: 0; } /* ---------------- 3. Campos no celular ---------------- */ @media (max-width: 640px) { /* 16px é o mínimo que impede o Safari/iOS de dar zoom ao focar o campo. */ .vc-input, .vc-select, .vc-textarea { font-size: 16px; padding: 14px; min-height: 48px; } .vc-btn { min-height: 48px; } .vc-btn--sm { min-height: 40px; } /* Título + botão "+ Novo X" empilhados, botão ocupando a linha toda: no celular o botão espremido no canto era difícil de acertar. */ .vc-page-header { align-items: stretch; } .vc-page-header .vc-btn { width: 100%; } } /* ---------------- 4. Modal vira "folha" que sobe de baixo ---------------- */ /* Padrão de app nativo (bottom sheet): ocupa a largura toda, cresce até 92% da altura útil e rola por dentro. Usa dvh (dynamic viewport height) em vez de vh justamente porque o vh no celular ignora a barra do navegador — era por isso que o botão "Salvar" às vezes ficava por baixo da barra de navegação. */ @media (max-width: 640px) { .vc-modal { left: 0; right: 0; top: auto; bottom: 0; width: 100%; max-width: none; max-height: 92dvh; padding: 16px; border-radius: 18px 18px 0 0; border-top: 3px solid var(--navy); transform: translateY(100%); box-shadow: 0 -18px 50px rgba(8, 20, 38, 0.35); overscroll-behavior: contain; } .vc-modal.show { transform: translateY(0); } /* Cabeçalho gruda no topo enquanto o formulário rola — o usuário sempre vê o título e o botão de fechar. */ .vc-modal > .vc-modal-header { position: sticky; top: -16px; z-index: 3; margin: -16px -16px 16px; padding: 18px 16px 12px; background: var(--card); border-bottom: 1px solid var(--border); border-radius: 18px 18px 0 0; } /* "Pega-dedo" — a barrinha cinza que indica que dá pra arrastar/fechar. */ .vc-modal > .vc-modal-header::before { content: ""; position: absolute; top: 7px; left: 50%; width: 38px; height: 4px; transform: translateX(-50%); border-radius: 99px; background: var(--border); } /* Área de ação do modal (botão Salvar) gruda no rodapé. */ .vc-modal-actions { position: sticky; bottom: -16px; z-index: 3; margin: 18px -16px -16px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--card); border-top: 1px solid var(--border); } .vc-modal-actions .vc-btn { width: 100%; } /* Mesmo tratamento para os modais que ainda usam o botão "Salvar" solto como último elemento do formulário (clientes, vendas, lojas...), sem precisar editar o HTML de cada página. */ .vc-modal form > button[type="submit"].vc-btn--block:last-child { position: sticky; bottom: -16px; z-index: 3; margin: 18px -16px -16px; width: calc(100% + 32px); border-radius: 0; padding-bottom: calc(13px + env(safe-area-inset-bottom)); } /* O painel lateral (filtros, detalhes) segue a mesma régua de respiro. */ .vc-painel { padding: 16px calc(16px + env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) 16px; } } /* Botão de ação do modal no desktop: só um respiro extra em cima. */ .vc-modal-actions { margin-top: 20px; } /* Trava a rolagem da página de trás enquanto um modal/painel está aberto (ligado por app.js). Sem isso, rolar dentro do modal "vazava" pra página e dava a impressão de que a tela tinha bugado. */ body.vc-modal-open { overflow: hidden; touch-action: none; } /* ---------------- 5. Barra de navegação inferior em telas estreitas ------ */ /* Com 6 itens num aparelho de 360px sobra ~58px por item: o rótulo "Vendedores"/"Relatório" era cortado. */ @media (max-width: 400px) { .vc-navitem { font-size: 9px; letter-spacing: 0; padding: 6px 2px; } .vc-navitem svg { width: 19px; height: 19px; } .vc-bottomnav { padding-left: 2px; padding-right: 2px; } } /* ---------------- 6. Rodapé legal (termos, privacidade, LGPD) ----------- */ .vc-legal-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin-top: 14px; font-size: 12px; color: var(--text-faint); } .vc-legal-links a { color: var(--text-dim); text-decoration: underline; text-underline-offset: 2px; } .vc-legal-links a:hover { color: var(--navy); } /* Páginas de texto legal (termos.html, privacidade.html, excluir-conta.html) */ .vc-legal { max-width: 760px; margin: 0 auto; padding: 24px 18px calc(48px + env(safe-area-inset-bottom)); line-height: 1.65; font-size: 15px; color: var(--text); } .vc-legal h1 { font-family: var(--font-display); font-size: 26px; color: var(--navy); margin: 0 0 4px; } .vc-legal h2 { font-family: var(--font-display); font-size: 19px; color: var(--navy); margin: 32px 0 8px; } .vc-legal h3 { font-size: 15.5px; margin: 20px 0 6px; color: var(--text); } .vc-legal p, .vc-legal li { color: var(--text); } .vc-legal ul { padding-left: 20px; } .vc-legal li { margin-bottom: 6px; } .vc-legal .vc-legal-data { font-size: 13px; color: var(--text-dim); margin: 0 0 24px; } .vc-legal table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 13.5px; display: block; overflow-x: auto; } .vc-legal th, .vc-legal td { border: 1px solid var(--border); padding: 9px 11px; text-align: left; vertical-align: top; } .vc-legal th { background: var(--bg-deep); font-weight: 600; color: var(--navy); } .vc-legal-box { background: var(--bg-deep); border: 1px solid var(--border-navy); border-left: 3px solid var(--navy); border-radius: var(--radius-sm); padding: 14px 16px; margin: 18px 0; font-size: 14px; } .vc-legal-topo { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border); background: var(--surface-glass); position: sticky; top: 0; z-index: 10; backdrop-filter: blur(10px); } .vc-legal-topo img { height: 26px; width: auto; } .vc-legal-topo a { font-size: 13px; color: var(--navy); font-weight: 600; margin-left: auto; } /* ========================================================================== PAGAMENTO DE PARCELA (modal estilo "cobrança em rua") Método de pagamento em abas, chave de "pagar total", valor em destaque e contador de quantas parcelas quitar de uma vez — mesmo fluxo que o cobrador já conhece de outros apps do ramo. ========================================================================== */ .vc-pag-cliente { background: var(--bg-deep); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 16px; } .vc-pag-cliente strong { display: block; font-size: 15px; color: var(--navy); } .vc-pag-cliente span { font-size: 12.5px; color: var(--text-dim); } /* Abas de método de pagamento (Dinheiro / Pix / Transferência) */ .vc-segmented { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: 1px solid var(--border-navy); border-radius: 10px; overflow: hidden; } .vc-seg-btn { padding: 11px 6px; border: none; background: transparent; color: var(--navy); font-size: 13px; font-weight: 600; cursor: pointer; border-right: 1px solid var(--border-navy); line-height: 1.2; } .vc-seg-btn:last-child { border-right: none; } .vc-seg-btn:hover { background: var(--card-hover); } .vc-seg-btn.is-active { background: var(--navy); color: #ffffff; } /* Chave liga/desliga */ .vc-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); font-size: 14px; font-weight: 600; color: var(--navy); } .vc-switch { position: relative; display: inline-block; width: 46px; height: 26px; flex-shrink: 0; } .vc-switch input { opacity: 0; width: 0; height: 0; } .vc-switch-slider { position: absolute; inset: 0; cursor: pointer; background: var(--border-navy); border-radius: 99px; transition: background .2s ease; } .vc-switch-slider::before { content: ''; position: absolute; height: 20px; width: 20px; left: 3px; top: 3px; background: #ffffff; border-radius: 50%; transition: transform .2s ease; box-shadow: 0 1px 3px rgba(0,0,0,.25); } .vc-switch input:checked + .vc-switch-slider { background: var(--navy); } .vc-switch input:checked + .vc-switch-slider::before { transform: translateX(20px); } /* Valor em destaque */ .vc-pag-valor { text-align: center; padding: 18px 0 14px; } .vc-pag-valor .vc-label { display: block; margin-bottom: 4px; } .vc-pag-valor-num { font-size: 30px; font-weight: 700; font-family: var(--font-mono); color: var(--navy); line-height: 1.1; } .vc-pag-valor-sub { font-size: 12.5px; color: var(--text-dim); margin-top: 6px; } /* Contador de parcelas (- 2 +) */ .vc-stepper { display: flex; align-items: stretch; height: 46px; } .vc-stepper-btn { width: 52px; border: none; background: var(--navy); color: #ffffff; font-size: 22px; font-weight: 700; cursor: pointer; line-height: 1; } .vc-stepper-btn:first-child { border-radius: 10px 0 0 10px; } .vc-stepper-btn:last-child { border-radius: 0 10px 10px 0; } .vc-stepper-btn:disabled { opacity: .4; cursor: not-allowed; } .vc-stepper-input { flex: 1; text-align: center; border: 1px solid var(--border-navy); border-left: none; border-right: none; background: var(--input-bg); color: var(--navy); font-size: 18px; font-weight: 700; font-family: var(--font-mono); -moz-appearance: textfield; } .vc-stepper-input::-webkit-outer-spin-button, .vc-stepper-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .vc-pag-detalhe { font-size: 12.5px; color: var(--text-dim); margin-top: 8px; line-height: 1.5; } /* ---------------- Card da lista de vendas: selo de parcelas atrasadas ---------------- */ .vc-atraso-count { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 7px; font-size: 12.5px; font-weight: 700; font-family: var(--font-mono); color: #ffffff; flex-shrink: 0; } .vc-atraso-count--vermelho { background: var(--red); } .vc-atraso-count--amarelo { background: var(--yellow); color: #3a2c00; } .vc-atraso-count--verde { background: var(--green); } .vc-atraso-count--neutro { background: var(--border-navy); } .vc-emp-card-bottom--4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 640px) { .vc-emp-card-bottom--4 { grid-template-columns: 1fr 1fr; } .vc-seg-btn { font-size: 12px; padding: 10px 4px; } } /* ---------------- Tela de Clientes (baixa diária, estilo TryController) ---------------- */ .vc-baixa-card { margin-bottom: 12px; } .vc-baixa-acoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); } .vc-baixa-acoes a.vc-icon-btn { text-decoration: none; } .vc-tab-btn span { font-weight: 500; opacity: 0.8; } .vc-tab-btn.is-active span { opacity: 1; } /* ========================================================================== AJUSTES PARA iPHONE / iOS (Safari e app instalado na tela de início) -------------------------------------------------------------------------- Este bloco fica no FIM do arquivo de propósito (mesmo padrão do bloco mobile acima): sobrescreve as regras antigas sem mexer nelas, então dá pra apagar tudo daqui pra baixo se algo der errado. Por que no Android estava bom e no iPhone não: - O iPhone tem "área segura" (notch/Dynamic Island em cima, barra do home embaixo). O Android quase não tem. Sem env(safe-area-inset-*), conteúdo fica por baixo dessas áreas. - O Safari trata 100vh como a altura SEM a barra do navegador (então a tela fica maior que o visível) e ignora background-attachment:fixed. - O Safari dá zoom sozinho ao focar qualquer campo com fonte < 16px. - Campos de data/hora têm aparência e altura próprias no iOS. Onde a correção pode mudar a aparência, ela vive dentro de @supports (-webkit-touch-callout: none), que só existe no WebKit do iOS — assim o Android/desktop continuam exatamente como estavam. ========================================================================== */ /* iOS aumenta o texto sozinho ao girar o aparelho; isto desliga. */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* Altura da tela: 100vh primeiro (navegadores antigos), dvh depois. E o respiro do fim da página passa a somar a área do "home indicator", pra o último item não ficar escondido atrás da barra de baixo. */ body { min-height: 100vh; min-height: 100dvh; padding-bottom: 84px; padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } .vc-login-wrap { min-height: 100vh; min-height: 100dvh; } /* Blur do vidro fosco: o Safari (iOS < 18) só entende com -webkit-. */ .vc-topbar, .vc-legal-topo { -webkit-backdrop-filter: blur(10px); } .vc-bottomnav { -webkit-backdrop-filter: blur(12px); } /* Áreas seguras: topo (notch), lados (aparelho deitado) e base. Em aparelhos sem notch/Android todos os env() valem 0 e nada muda. */ .vc-topbar { padding-top: calc(13px + env(safe-area-inset-top, 0px)); padding-left: calc(16px + env(safe-area-inset-left, 0px)); padding-right: calc(16px + env(safe-area-inset-right, 0px)); } .vc-legal-topo { padding-top: calc(14px + env(safe-area-inset-top, 0px)); } .vc-page { padding-left: calc(16px + env(safe-area-inset-left, 0px)); padding-right: calc(16px + env(safe-area-inset-right, 0px)); } .vc-bottomnav { padding-left: calc(6px + env(safe-area-inset-left, 0px)); padding-right: calc(6px + env(safe-area-inset-right, 0px)); } .vc-painel { padding-top: calc(20px + env(safe-area-inset-top, 0px)); } @media (max-width: 640px) { .vc-painel { padding-top: calc(16px + env(safe-area-inset-top, 0px)); } } /* Botão flutuante (+), aviso (toast) e alternador de tema flutuante ficavam por cima/atrás da barra de baixo e do notch no iPhone. */ .vc-fab { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); right: calc(18px + env(safe-area-inset-right, 0px)); } .vc-toast { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); } .vc-theme-toggle--float { top: calc(16px + env(safe-area-inset-top, 0px)); right: calc(16px + env(safe-area-inset-right, 0px)); } /* Barra de baixo do perfil ADMIN tem 6 itens; "VENDEDORES" ocupava mais que a fatia de cada item num iPhone (~60px) e os rótulos se encostavam. */ @media (max-width: 420px) { .vc-bottomnav .vc-navitem { font-size: 9px; letter-spacing: 0; } } /* Rede de segurança: nenhum elemento largo demais pode alargar a página (no iOS isso deixa a tela "pequena" e arrastável para o lado). "clip" não cria área de rolagem, então não quebra position:sticky/fixed. */ @supports (overflow: clip) { body { overflow-x: clip; } } /* ---------------- Somente iOS (WebKit) ---------------- */ @supports (-webkit-touch-callout: none) { /* O iOS ignora "fixed" no fundo e às vezes repinta a tela inteira ao rolar; com "scroll" o degradê sutil fica igual e a rolagem mais leve. */ body { background-attachment: scroll; } /* Zoom automático ao tocar: a caixa de busca (clientes/vendas) e o código Pix estavam com 12–14px; o iOS só deixa de dar zoom com 16px+. */ .vc-search input { font-size: 16px; } #pix-codigo { font-size: 16px !important; min-height: 132px; } /* Tira o visual nativo (sombra interna, cantos) dos campos de texto para ficarem iguais aos do Android. */ .vc-input, .vc-textarea, .vc-search input { -webkit-appearance: none; appearance: none; } /* Data/hora/mês: no iOS o campo vazio "murcha" (altura 0), o texto vai para o centro e a largura pode passar da coluna. */ .vc-input[type="date"], .vc-input[type="time"], .vc-input[type="month"] { display: block; min-width: 0; max-width: 100%; min-height: 48px; text-align: left; line-height: 1.25; } .vc-input[type="date"]::-webkit-date-and-time-value, .vc-input[type="time"]::-webkit-date-and-time-value, .vc-input[type="month"]::-webkit-date-and-time-value { text-align: left; min-height: 1.25em; margin: 0; } }