/* ========================================================================== NK Luz — Painel da fábrica -------------------------------------------------------------------------- Mesma engenharia do painel do Mônaco Select Motors (foi ele que a cliente viu e aprovou na reunião de 19/08/2026): barra lateral escura fixa, topbar com busca, cards e seções. O que muda é a cor e o assunto. ⚠️ O DOURADO DO PAINEL NÃO É O DOURADO DA MARCA, e não é escolha estética. O dourado da marca (#A87B37) tem 3,78:1 com branco: reprova em botão. E num dashboard o amarelo já significa "atenção" — se a moldura for amarela, o aviso some. Então: • --primaria #8A6A2E dourado escuro, 5,02:1 com branco (passa no AA) • --amarelo #A8560B virou LARANJA de propósito, pra não confundir com a cor da marca • o dourado da marca #A87B37 só aparece sobre o preto da barra lateral, onde ele dá 5,24:1 e é a marca respirando Todos os pares foram MEDIDOS. Não trocar sem medir de novo. Ícone é SVG inline, NUNCA emoji: no Windows vários emojis saem em preto e branco e o painel fica com cara de rascunho. ========================================================================== */ :root { --primaria: #8A6A2E; --primaria-escura:#71551F; --primaria-clara: #F9F4E9; --verde: #0F7132; /* disponível · lucro · meta batida */ --verde-bg: #E7F4EC; --amarelo: #A8560B; /* reservado · atenção */ --amarelo-bg:#FDEBDD; --vermelho: #B32F3B; /* vendido · prejuízo · apagar */ --vermelho-bg:#FBEAEC; --texto: #1B2430; --suave: #6A7280; --linha: #E5E8ED; --bg: #F5F7FA; --card: #FFFFFF; --sombra: 0 4px 18px rgba(27,36,48,.06); --sombra-f:0 20px 52px rgba(27,36,48,.18); --radius: 14px; --disp: "Plus Jakarta Sans", system-ui, sans-serif; --corpo: "Inter", system-ui, sans-serif; --ouro-marca: #A87B37; /* o dourado da vitrine — só sobre a barra escura */ } * { box-sizing: border-box; margin: 0; padding: 0; } .so-print { display: none; } body { font-family: var(--corpo); background: var(--bg); color: var(--texto); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, .num { font-family: var(--disp); letter-spacing: -.015em; } button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } input, select, textarea { font-family: inherit; } /* ============================== LOGIN ============================= */ .login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 20px; background: #141416; } .login-card { background: var(--card); border-radius: 22px; box-shadow: var(--sombra-f); max-width: 400px; width: 100%; padding: 36px 32px; text-align: center; } /* a logo é feita pra fundo escuro: mora num chip preto, nunca solta no branco. ⚠️ O arquivo é o `logo-chip.webp`, não o `logo.webp`: o da loja carrega 26% de vazio de cada lado e 11% em cima, e num chip largo isso lê como logo desalinhada e pequena. O chip é FLEX centrado — `margin:0 auto` não centra imagem inline, que foi o defeito de 19/08/2026. */ .login-card .chip-logo { background: #0B0B0C; border-radius: 14px; padding: 16px 20px; margin-bottom: 20px; display: flex; align-items: center; justify-content: center; } .login-card .chip-logo img { display: block; height: 84px; width: auto; } .login-card h1 { font-size: 21px; } .login-card .sub { font-size: 14px; color: var(--suave); margin: 5px 0 22px; } .login-erro { display: none; background: var(--vermelho-bg); color: var(--vermelho); font-size: 13.5px; font-weight: 600; padding: 10px 14px; border-radius: 10px; margin-bottom: 14px; } .login-erro.on { display: block; } .login-hint { font-size: 12.5px; color: var(--suave); margin-top: 18px; line-height: 1.55; } .campo { text-align: left; margin-bottom: 13px; } .campo label { display: block; font-size: 12.5px; font-weight: 700; margin-bottom: 6px; } .campo label small { font-weight: 600; color: var(--suave); font-size: 11.5px; } .campo input, .campo select, .campo textarea { width: 100%; font-size: 15px; padding: 11px 13px; background: #fff; color: var(--texto); border: 1.5px solid var(--linha); border-radius: 10px; outline: none; } .campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--primaria); } .campo textarea { resize: vertical; min-height: 84px; line-height: 1.55; } /* =============================== BOTÕES =========================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 14.5px; font-weight: 700; padding: 11px 20px; border-radius: 10px; background: var(--primaria); color: #fff; transition: background .16s, transform .16s; white-space: nowrap; } .btn:hover { background: var(--primaria-escura); } .btn:active { transform: translateY(1px); } .btn--bloco { width: 100%; } .btn--fantasma { background: transparent; color: var(--texto); border: 1.5px solid var(--linha); } .btn--fantasma:hover { background: #fff; border-color: var(--primaria); color: var(--primaria); } .btn--verde { background: var(--verde); } .btn--verde:hover { background: #0B5A28; } .btn--perigo { background: var(--vermelho); } .btn--perigo:hover { background: #96262F; } .btn--peq { font-size: 13px; padding: 8px 14px; } .btn[disabled] { opacity: .5; pointer-events: none; } /* =============================== LAYOUT =========================== */ .app { display: none; } .app.on { display: grid; grid-template-columns: 250px 1fr; min-height: 100vh; } .side { background: #141416; color: #C9D2DC; display: flex; flex-direction: column; padding: 20px 14px; position: sticky; top: 0; height: 100vh; } .side__logo { background: #0A0A0A; border-radius: 12px; padding: 14px; margin-bottom: 6px; display: flex; align-items: center; justify-content: center; } .side__logo img { display: block; height: 72px; width: auto; } .side__papel { font-size: 11px; color: #6E7B89; letter-spacing: .13em; text-transform: uppercase; text-align: center; margin: 8px 0 16px; } .side__nav { display: flex; flex-direction: column; gap: 2px; } .nav-item { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; padding: 11px 13px; border-radius: 10px; font-size: 14.5px; font-weight: 600; color: #A9B5C2; transition: background .15s, color .15s; } .nav-item svg { flex: none; } .nav-item:hover { background: #18222E; color: #fff; } .nav-item.on { background: var(--primaria); color: #fff; } .nav-item .badge { margin-left: auto; background: rgba(255,255,255,.16); font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; } .nav-item.on .badge { background: rgba(0,0,0,.24); } .side__pe { margin-top: auto; padding-top: 16px; border-top: 1px solid #1E2935; } .side__sair { width: 100%; text-align: left; font-size: 13.5px; color: #8B97A5; padding: 9px 13px; border-radius: 9px; } .side__sair:hover { background: #18222E; color: #fff; } .side__ver { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: #8B97A5; padding: 9px 13px; border-radius: 9px; } .side__ver:hover { background: #18222E; color: #fff; } .main { min-width: 0; } .topbar { background: #fff; border-bottom: 1px solid var(--linha); padding: 13px 26px; display: flex; align-items: center; gap: 16px; position: sticky; top: 0; z-index: 20; } .hamb { display: none; font-size: 22px; } .busca-t { position: relative; flex: 1; max-width: 440px; } .busca-t svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--suave); } .busca-t input { width: 100%; border: 1.5px solid var(--linha); border-radius: 10px; padding: 10px 14px 10px 40px; font-size: 14.5px; outline: none; background: var(--bg); } .busca-t input:focus { border-color: var(--primaria); background: #fff; } .quem { margin-left: auto; font-size: 14px; color: var(--suave); } .quem b { color: var(--texto); } .envol { padding: 26px; max-width: 1400px; } .sec { display: none; } .sec.on { display: block; } .titulo-pg { font-size: 26px; font-weight: 800; } .sub-pg { color: var(--suave); font-size: 14.5px; margin: 4px 0 22px; } @media (max-width: 940px) { .app.on { grid-template-columns: 1fr; } .side { position: fixed; z-index: 40; width: 250px; transform: translateX(-100%); transition: transform .25s; } .side.on { transform: none; } .hamb { display: block; } .envol { padding: 18px 14px; } .quem { display: none; } } .backdrop { display: none; position: fixed; inset: 0; background: rgba(16,23,32,.5); z-index: 35; } .backdrop.on { display: block; } /* ============================ RITMO DA META ======================== Cartão de abertura do Painel: sempre o mês corrente, cor escura de propósito (só ela e o login/sidebar usam esse tom) pra chamar atenção antes das métricas do período escolhido. */ .ritmo { background: linear-gradient(120deg, #141416, var(--primaria-escura)); border-radius: var(--radius); padding: 20px 22px; margin-bottom: 20px; color: #fff; box-shadow: var(--sombra); } .ritmo__topo { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; } .ritmo__ic { flex: none; width: 42px; height: 42px; border-radius: 11px; background: rgba(255,255,255,.14); display: grid; place-items: center; } .ritmo__cab { flex: 1; min-width: 0; } .ritmo__t { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: rgba(255,255,255,.68); } .ritmo__n { font-family: var(--disp); font-size: 25px; font-weight: 800; margin-top: 2px; } .ritmo__n small { font-size: 14px; font-weight: 600; color: rgba(255,255,255,.68); } .ritmo__pct { text-align: right; font-family: var(--disp); font-size: 25px; font-weight: 800; flex: none; } .ritmo__pct small { display: block; font-size: 11px; font-weight: 600; color: rgba(255,255,255,.68); } .ritmo__trilho { height: 12px; background: rgba(255,255,255,.18); border-radius: 999px; overflow: hidden; margin-bottom: 12px; } .ritmo__trilho > div { height: 100%; background: #fff; border-radius: 999px; transition: width .5s; } .ritmo__trilho > div.bateu { background: var(--verde); } .ritmo__legenda { font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,.85); } .ritmo__legenda b { color: #fff; } /* ============================= MÉTRICAS =========================== */ .periodo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; } .periodo-tabs { display: flex; gap: 4px; background: #fff; border: 1px solid var(--linha); border-radius: 10px; padding: 4px; flex-wrap: wrap; } .periodo-tabs button { font-size: 13.5px; font-weight: 600; padding: 7px 14px; border-radius: 7px; color: var(--suave); } .periodo-tabs button:hover { background: var(--bg); color: var(--texto); } .periodo-tabs button.on { background: var(--primaria); color: #fff; } .periodo-custom { display: none; gap: 8px; align-items: center; } .periodo-custom.on { display: flex; } .periodo-custom input { border: 1.5px solid var(--linha); border-radius: 9px; padding: 8px 11px; font-size: 13.5px; outline: none; } .periodo-lbl { font-size: 13px; color: var(--suave); } /* `auto-fit` e não `repeat(4,1fr)`: a página de Metas passou a ter CINCO cartões (entrou o prazo em dias) e com 4 colunas fixas o quinto caía sozinho numa linha, ocupando a largura inteira. */ .metricas { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 22px; } @media (max-width: 1100px) { .metricas { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .metricas { grid-template-columns: 1fr; } } .metrica { background: var(--card); border-radius: var(--radius); padding: 18px; box-shadow: var(--sombra); } .metrica__t { display: flex; align-items: center; gap: 8px; color: var(--suave); font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } .metrica__v { font-family: var(--disp); font-size: 27px; font-weight: 800; margin-top: 9px; letter-spacing: -.03em; } .metrica__p { font-size: 12.5px; color: var(--suave); margin-top: 4px; } .metrica--verde .metrica__v { color: var(--verde); } .metrica--vermelho .metrica__v { color: var(--vermelho); } .painel-cx { background: var(--card); border-radius: var(--radius); padding: 22px; box-shadow: var(--sombra); margin-bottom: 20px; } .painel-cx__topo { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; } .painel-cx h2 { font-size: 17px; font-weight: 700; } .painel-cx small { color: var(--suave); font-size: 13px; } /* gráfico de barras em CSS puro */ .grafico { display: flex; align-items: flex-end; gap: 8px; height: 190px; } .gbar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; height: 100%; justify-content: flex-end; } .gbar__b { width: 100%; background: var(--primaria-clara); border-radius: 6px 6px 0 0; min-height: 3px; position: relative; transition: background .15s; } .gbar__b--tem { background: var(--primaria); } .gbar:hover .gbar__b { background: var(--primaria-escura); } .gbar__v { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); font-size: 11px; font-weight: 700; color: var(--texto); white-space: nowrap; opacity: 0; transition: opacity .15s; } .gbar:hover .gbar__v { opacity: 1; } .gbar__r { font-size: 11.5px; color: var(--suave); font-weight: 600; } .duplo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 940px) { .duplo { grid-template-columns: 1fr; } } .rank { list-style: none; display: flex; flex-direction: column; gap: 3px; } .rank li { display: flex; align-items: center; gap: 11px; padding: 9px 0; border-bottom: 1px solid var(--linha); font-size: 14px; } .rank li:last-child { border-bottom: 0; } .rank img { width: 52px; height: 40px; object-fit: contain; border-radius: 8px; flex: none; background: var(--bg); } .rank b { font-weight: 600; display: block; font-size: 14px; } .rank small { color: var(--suave); font-size: 12.5px; } .rank i { margin-left: auto; font-style: normal; font-weight: 700; white-space: nowrap; } .aviso { display: flex; align-items: flex-start; gap: 12px; background: var(--amarelo-bg); border: 1px solid #F2D3B4; border-radius: var(--radius); padding: 14px 16px; margin-bottom: 20px; font-size: 14px; line-height: 1.55; } .aviso svg { color: var(--amarelo); flex: none; margin-top: 1px; } .aviso b { display: block; margin-bottom: 2px; } .aviso--ouro { background: var(--primaria-clara); border-color: #E4D3AE; } .aviso--ouro svg { color: var(--primaria); } /* ============================== TABELA ============================ */ .tabela-cx { background: var(--card); border-radius: var(--radius); box-shadow: var(--sombra); overflow: hidden; } .tabela-topo { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--linha); flex-wrap: wrap; } .tabela-topo h2 { font-size: 16.5px; font-weight: 700; margin-right: auto; } .filtro-pil { display: flex; gap: 4px; background: var(--bg); border-radius: 9px; padding: 3px; flex-wrap: wrap; } .filtro-pil button { font-size: 13px; font-weight: 600; padding: 7px 13px; border-radius: 7px; color: var(--suave); } .filtro-pil button.on { background: #fff; color: var(--texto); box-shadow: 0 1px 4px rgba(27,36,48,.1); } .rolagem { overflow-x: auto; } table { width: 100%; border-collapse: collapse; min-width: 780px; } th { text-align: left; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--suave); padding: 12px 16px; border-bottom: 1px solid var(--linha); white-space: nowrap; } td { padding: 12px 16px; border-bottom: 1px solid var(--linha); font-size: 14px; vertical-align: middle; } tr:last-child td { border-bottom: 0; } tbody tr:hover { background: #FAFBFC; } .cel-prod { display: flex; align-items: center; gap: 12px; min-width: 250px; } .cel-prod img { width: 62px; height: 47px; object-fit: contain; border-radius: 8px; flex: none; background: var(--bg); } .cel-prod b { font-weight: 600; display: block; line-height: 1.3; } .cel-prod small { color: var(--suave); font-size: 12.5px; } .acoes { display: flex; gap: 5px; justify-content: flex-end; } .ic-btn { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; color: var(--suave); transition: background .15s, color .15s; } .ic-btn:hover { background: var(--bg); color: var(--texto); } .ic-btn--perigo:hover { background: var(--vermelho-bg); color: var(--vermelho); } .ic-btn--ok:hover { background: var(--verde-bg); color: var(--verde); } .pilula { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; padding: 4px 11px; border-radius: 999px; white-space: nowrap; } .pilula--verde { background: var(--verde-bg); color: var(--verde); } .pilula--amarelo { background: var(--amarelo-bg); color: var(--amarelo); } .pilula--vermelho{ background: var(--vermelho-bg); color: var(--vermelho); } .pilula--cinza { background: var(--bg); color: var(--suave); } .pilula--azul { background: var(--primaria-clara); color: var(--primaria-escura); } /* ========================== GRADE DO ESTOQUE ======================== Substitui a tabela por cards quadrados (pedido do dono, 10/08/2026): ela quer clicar no modelo pra ver o detalhe, não ler uma linha de planilha. */ .grade-estoque { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; padding: 18px; } .card-prod { background: var(--card); border: 1.5px solid var(--linha); border-radius: 12px; overflow: hidden; cursor: pointer; transition: box-shadow .15s, transform .15s, border-color .15s; } .card-prod:hover { box-shadow: var(--sombra-f); transform: translateY(-2px); border-color: var(--primaria); } .card-prod__foto { position: relative; aspect-ratio: 4/3; background: var(--bg); } /* 🔴 `contain`, igual à loja. Era `cover`, e o painel é o lugar onde ela CONFERE a foto antes de publicar: com `cover` o painel cortava o cano da bota e o solado, e a loja (que já é `contain` desde 20/08/2026) mostrava a foto inteira. Ela aprovava um enquadramento e a cliente via outro, sem nada avisar. Painel e loja têm que mostrar a MESMA foto. */ .card-prod__foto img { width: 100%; height: 100%; object-fit: contain; } .card-prod__dias { position: absolute; left: 8px; top: 8px; background: rgba(16,23,32,.72); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; } .card-prod__sit { position: absolute; right: 8px; top: 8px; } .card-prod__corpo { padding: 12px 14px 6px; } .card-prod__corpo b { display: block; font-size: 14.5px; font-weight: 700; line-height: 1.3; } .card-prod__corpo small { display: block; color: var(--suave); font-size: 12.5px; margin-top: 2px; } .card-prod__preco { font-family: var(--disp); font-size: 19px; font-weight: 800; margin: 8px 0 6px; } .card-prod__acoes { display: flex; justify-content: flex-end; gap: 4px; padding: 8px 10px 12px; } /* ========================= DETALHE DO PRODUTO ======================== Abre por cima do Estoque quando o dono clica no card. */ .voltar { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; color: var(--suave); margin-bottom: 16px; padding: 6px 4px; border-radius: 8px; } .voltar:hover { color: var(--primaria); } .dv__topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; } .dv__grade { display: grid; grid-template-columns: 1.3fr 1fr; gap: 22px; align-items: start; } @media (max-width: 940px) { .dv__grade { grid-template-columns: 1fr; } } .dv__foto { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/3; background: var(--bg); box-shadow: var(--sombra); margin-bottom: 20px; } /* `contain`, não `cover`: a dona pediu (19/08/2026) que a foto apareça INTEIRA, sem corte, e o painel tem que mostrar o mesmo que a loja mostra. Quem segura o quadro é o fundo gelo, não o recorte da foto. */ .dv__foto img { width: 100%; height: 100%; object-fit: contain; } .dv__miniaturas { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; } .dv__miniaturas img { width: 62px; height: 62px; border-radius: 9px; object-fit: contain; background: var(--bg); border: 1px solid var(--linha); cursor: pointer; padding: 3px; } .dv__miniaturas img.on { border-color: var(--primaria); box-shadow: 0 0 0 2px var(--primaria-clara); } .dv__chips { display: flex; flex-wrap: wrap; gap: 6px; } .dv__desc { font-size: 14px; line-height: 1.6; color: var(--texto); } .dv__painel { position: sticky; top: 86px; } .dv__acoes { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; } .nada { text-align: center; padding: 54px 20px; color: var(--suave); } .nada h3 { font-size: 17px; color: var(--texto); margin-bottom: 6px; } .nada p { font-size: 14px; max-width: 42ch; margin: 0 auto 16px; line-height: 1.55; } /* =============================== MODAL ============================ */ /* ⚠️ `overscroll-behavior:contain` nos dois: sem ele, o formulário chega ao fim e o navegador continua a rolagem NA PÁGINA DE TRÁS (scroll chaining), que foi o que o dono viu em 20/08/2026. E `body.travado` cuida do outro caminho, a roda sobre a área escura — o JS devolve em padding a largura da barra de rolagem que some, senão a página inteira pula pro lado ao abrir o modal. */ .modal { display: none; position: fixed; inset: 0; z-index: 60; background: rgba(16,23,32,.6); padding: 24px; overscroll-behavior: contain; } body.travado { overflow: hidden; } .modal.on { display: flex; align-items: center; justify-content: center; } /* topo e rodapé fixos, só o corpo rola — com sticky puro (um scroll só, no .modal inteiro) o rodapé "grudava" no meio do formulário em telas curtas, porque ele gruda no fundo da JANELA, não no fim do conteúdo (achado do dono, 11/08/2026, no cadastro de cliente). Com o .modal__cx virando coluna flex e só o corpo rolando, o rodapé nunca mais fica por cima de campo. */ .modal__cx { background: var(--card); border-radius: 18px; box-shadow: var(--sombra-f); width: min(820px, 100%); max-height: calc(100vh - 48px); display: flex; flex-direction: column; } .modal__cx--peq { width: min(460px, 100%); } .modal__topo { display: flex; align-items: center; gap: 14px; padding: 20px 24px; border-bottom: 1px solid var(--linha); flex: none; border-radius: 18px 18px 0 0; } .modal__topo h2 { font-size: 18px; font-weight: 700; margin-right: auto; } .modal__x { font-size: 26px; line-height: 1; color: var(--suave); width: 34px; height: 34px; border-radius: 8px; } .modal__x:hover { background: var(--bg); color: var(--texto); } .modal__corpo { padding: 22px 24px; flex: 1 1 auto; overflow-y: auto; min-height: 0; overscroll-behavior: contain; } .modal__pe { display: flex; gap: 10px; justify-content: flex-end; padding: 16px 24px; border-top: 1px solid var(--linha); flex: none; background: var(--card); border-radius: 0 0 18px 18px; } @media (max-width: 640px) { .modal { padding: 0; } .modal__cx { border-radius: 0; min-height: 100vh; max-height: 100vh; } } .grade-f { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; } .grade-f--3 { grid-template-columns: 1fr 1fr 1fr; } .grade-f .col2 { grid-column: 1 / -1; } @media (max-width: 640px) { .grade-f, .grade-f--3 { grid-template-columns: 1fr; } } .legenda { font-size: 12.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--primaria); margin: 20px 0 12px; padding-top: 16px; border-top: 1px solid var(--linha); } .legenda:first-child { margin-top: 0; padding-top: 0; border-top: 0; } .dica { font-size: 12.5px; color: var(--suave); margin-top: -6px; margin-bottom: 12px; line-height: 1.5; } /* ========================== FOTOS DO PRODUTO ====================== */ .solta { border: 2px dashed var(--linha); border-radius: var(--radius); padding: 26px 18px; text-align: center; color: var(--suave); font-size: 14px; transition: border-color .15s, background .15s; cursor: pointer; } .solta:hover, .solta.arrasta { border-color: var(--primaria); background: var(--primaria-clara); color: var(--primaria-escura); } .solta b { display: block; color: var(--texto); font-size: 15px; margin-bottom: 3px; } .solta.arrasta b { color: var(--primaria-escura); } .fotos-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; margin-top: 14px; } .foto-item { position: relative; aspect-ratio: 4/3; border-radius: 10px; overflow: hidden; background: var(--bg); border: 2px solid transparent; cursor: grab; } .foto-item.capa { border-color: var(--primaria); } .foto-item.arrastando { opacity: .35; } .foto-item.sobre { outline: 2px dashed var(--primaria); outline-offset: -3px; } /* `contain`: e aqui que ela escolhe a CAPA e a ordem. Cortando a miniatura, ela ordena as fotos vendo um recorte que a loja nao mostra. */ .foto-item img { width: 100%; height: 100%; object-fit: contain; } .foto-item__num { position: absolute; top: 4px; left: 4px; width: 20px; height: 20px; border-radius: 999px; background: rgba(16,23,32,.72); color: #fff; font-size: 10.5px; font-weight: 800; display: grid; place-items: center; } .foto-item__x { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border-radius: 6px; background: rgba(16,23,32,.72); color: #fff; display: grid; place-items: center; font-size: 15px; line-height: 1; } .foto-item__x:hover { background: var(--vermelho); } .foto-item__capa { position: absolute; left: 4px; bottom: 4px; background: var(--primaria); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 3px 7px; border-radius: 5px; } .foto-item__def { position: absolute; left: 4px; right: 4px; bottom: 4px; background: rgba(16,23,32,.72); color: #fff; font-size: 9.5px; font-weight: 700; padding: 3px 7px; border-radius: 5px; opacity: 0; transition: opacity .15s; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .foto-item:hover .foto-item__def { opacity: 1; } /* lista de opcionais no cadastro */ .opc-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 2px 14px; } .opc-lista label { display: flex; align-items: center; gap: 8px; font-size: 14px; padding: 6px 0; cursor: pointer; } .opc-lista input { width: 16px; height: 16px; accent-color: var(--primaria); cursor: pointer; } /* ============================== FUNIL ============================= */ /* auto-fill em vez de 6 colunas fixas: numa tela mais estreita as colunas quebram pra próxima linha em vez de abrir barra de scroll lateral (pedido do dono, 10/08/2026 — "não quero barra de scroll, muito feio"). 180px é o suficiente pras 6 caberem numa linha só em monitor grande (pedido de 11/08/2026 — "não queria isso [a 6ª quebrando pra baixo], meu monitor é grande"); em tela menor continua quebrando linha em vez de rolar. */ .funil { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; align-items: start; } .coluna { background: #fff; border-radius: var(--radius); box-shadow: var(--sombra); overflow: hidden; } .coluna__t { display: flex; align-items: center; gap: 8px; padding: 12px 14px; font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #fff; } .coluna__t span { margin-left: auto; background: rgba(255,255,255,.26); border-radius: 999px; padding: 1px 9px; font-size: 11.5px; } .coluna__t--azul { background: var(--primaria); } .coluna__t--teal { background: #0E7C90; } .coluna__t--amarelo { background: var(--amarelo); } .coluna__t--laranja { background: #C9701D; } .coluna__t--verde { background: var(--verde); } .coluna__t--cinza { background: #55606E; } .coluna__corpo { padding: 12px; min-height: 90px; background: #F7F8FA; } /* Abre e fecha o histórico da coluna "Entregue". Ela acumula pedido pra sempre e, solta, fazia a tela de Pedidos passar de 3.900px no celular só de pacote que já chegou na mão da cliente. */ .coluna__mais { width: 100%; margin-top: 4px; padding: 9px 8px; border: 1px dashed var(--linha); background: #fff; border-radius: 10px; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--primaria); } .coluna__mais:hover { background: var(--primaria-clara); border-style: solid; } .lead { background: #fff; border-radius: 11px; padding: 12px; box-shadow: 0 1px 3px rgba(27,36,48,.09); margin-bottom: 9px; cursor: grab; } .lead:last-child { margin-bottom: 0; } .lead:active { cursor: grabbing; } .lead.arrastando { opacity: .4; } .lead b { font-size: 14px; font-weight: 700; display: block; } .lead small { color: var(--suave); font-size: 12.5px; display: block; margin-top: 3px; line-height: 1.45; } .lead__pe { display: flex; align-items: center; gap: 6px; margin-top: 9px; flex-wrap: wrap; } .coluna.sobre { outline: 2px dashed var(--primaria); outline-offset: -3px; } .coluna.sobre .coluna__corpo { background: var(--primaria-clara); } /* ============================== AGENDA ============================ */ .compromisso { display: flex; align-items: center; gap: 12px; padding: 13px 18px; border-bottom: 1px solid var(--linha); font-size: 14px; } .compromisso:last-child { border-bottom: 0; } .compromisso .hora { font-weight: 800; font-family: var(--disp); min-width: 52px; } .compromisso b { font-weight: 600; } .compromisso small { color: var(--suave); display: block; font-size: 12.5px; } /* -------- lista da Agenda: cards individuais quadrados, tipo Estoque ------ */ .agenda-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; } .card-compromisso { background: var(--card); border-radius: var(--radius); box-shadow: var(--sombra); padding: 16px; display: flex; flex-direction: column; gap: 4px; border-left: 4px solid var(--linha); } .card-compromisso--hoje { border-left-color: var(--primaria); } .card-compromisso--atrasado { border-left-color: var(--vermelho); } .card-compromisso__data { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--suave); } .card-compromisso__data span { margin-left: auto; color: var(--vermelho); font-weight: 800; text-transform: uppercase; font-size: 11px; } .card-compromisso--hoje .card-compromisso__data span { color: var(--primaria); } .card-compromisso__hora { font-family: var(--disp); font-size: 21px; font-weight: 800; margin: 4px 0 2px; } .card-compromisso b { font-size: 14.5px; font-weight: 700; } .card-compromisso small { color: var(--suave); font-size: 12.5px; } .card-compromisso__pe { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--linha); } /* --------------------------- CALENDÁRIO (Mês) ------------------------ */ .cal { display: grid; grid-template-columns: 1fr 320px; gap: 18px; align-items: start; } @media (max-width: 860px) { .cal { grid-template-columns: 1fr; } } .cal__cx { background: var(--card); border-radius: var(--radius); box-shadow: var(--sombra); padding: 20px; } .cal__topo { display: flex; align-items: center; justify-content: center; gap: 18px; margin-bottom: 16px; } /* ⚠️ nada de text-transform:capitalize aqui: ele vira "Agosto De 2026" e "Quarta-Feira". Quem põe a maiúscula certa é o JS, numa letra só. */ .cal__topo b { font-family: var(--disp); font-size: 16px; font-weight: 800; min-width: 150px; text-align: center; } .cal__semana { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: 11.5px; font-weight: 700; color: var(--suave); margin-bottom: 6px; } .cal__grade { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; } .cal__dia { aspect-ratio: 1; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 13.5px; font-weight: 600; color: var(--texto); background: transparent; } .cal__dia:not(.cal__dia--vazio):hover { background: var(--bg); } .cal__dia--vazio { pointer-events: none; } .cal__dia--hoje { background: var(--primaria-clara); color: var(--primaria-escura); font-weight: 800; } .cal__dia--sel { outline: 2px solid var(--primaria); outline-offset: -2px; } .cal__dia i { display: flex; gap: 3px; height: 5px; } .pt { width: 5px; height: 5px; border-radius: 999px; display: inline-block; } .pt--azul { background: var(--primaria); } .pt--laranja { background: #C9701D; } .cal__legenda { display: flex; gap: 18px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--linha); font-size: 12.5px; color: var(--suave); } .cal__legenda span { display: flex; align-items: center; gap: 6px; } .cal__dia-cx { background: var(--card); border-radius: var(--radius); box-shadow: var(--sombra); padding: 6px 18px 18px; } .cal__dia-t { font-size: 14px; font-weight: 700; padding: 14px 0 12px; } .cal__hoje-tag { color: var(--vermelho); font-weight: 700; text-transform: none; margin-left: 6px; font-size: 12.5px; } .cal__dia-cx .compromisso { padding: 12px 0; } /* ============================== METAS ============================= */ .barra-meta { height: 13px; background: var(--bg); border-radius: 999px; overflow: hidden; margin: 12px 0 8px; } .barra-meta div { height: 100%; background: var(--primaria); border-radius: 999px; transition: width .5s; } .barra-meta div.bateu { background: var(--verde); } .hist { list-style: none; } .hist li { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--linha); font-size: 14px; } .hist li:last-child { border-bottom: 0; } .hist .mes { font-weight: 700; min-width: 92px; text-transform: capitalize; } .hist .tr { flex: 1; height: 9px; background: var(--bg); border-radius: 999px; overflow: hidden; min-width: 70px; } .hist .tr div { height: 100%; background: var(--primaria); border-radius: 999px; } .hist .tr div.bateu { background: var(--verde); } .hist .vl { font-weight: 700; white-space: nowrap; font-size: 13.5px; } @media (max-width: 560px) { /* a barrinha de progresso não cabe na mesma linha dos números; desce pra linha de baixo em vez de forçar rolagem lateral na página toda */ .hist li { flex-wrap: wrap; gap: 6px 10px; } .hist .tr { flex-basis: 100%; order: 3; min-width: 0; } } /* ================= LUCRO REAL: a conta e as despesas fixas ============= O dono precisa ver a subtração, não só o resultado: foi a desconfiança dele com "lucro" que gerou o pedido na reunião. */ .conta { list-style: none; } .conta li { display: flex; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--linha); font-size: 14px; } .conta li span { flex: 1; color: var(--suave); } .conta li b { font-weight: 700; white-space: nowrap; } .conta li b.neg { color: var(--vermelho); } .conta li.tot { border-bottom: 0; padding-top: 14px; font-size: 16px; } .conta li.tot span { color: var(--texto); font-weight: 700; } .conta li.tot b { font-family: var(--disp); font-size: 20px; font-weight: 800; } .fixas { list-style: none; } .fixas li { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--linha); font-size: 14px; } .fixas li:last-child { border-bottom: 0; } .fx__o { flex: 1; min-width: 0; } .fx__o b { display: block; font-weight: 700; } .fx__o small, .fx__v small { display: block; color: var(--suave); font-size: 12.5px; } .fx__v { font-weight: 700; white-space: nowrap; text-align: right; } /* ======================= DESPESAS DA FÁBRICA ========================== Uma linha por gasto: descrição larga, valor estreito e a lixeira. No celular o valor e a lixeira dividem a segunda linha, senão a descrição fica com uns 80px e ninguém consegue ler o que digitou. */ .desp-item { display: grid; grid-template-columns: 1fr 130px 32px; gap: 8px; align-items: center; margin-bottom: 8px; } .desp-item input { width: 100%; font: inherit; font-size: 14px; padding: 10px 12px; border: 1.5px solid var(--linha); border-radius: 10px; outline: none; background: #fff; color: var(--texto); } .desp-item input:focus { border-color: var(--primaria); } .desp-add { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; } .desp-total { font-size: 13.5px; font-weight: 700; color: var(--texto); } @media (max-width: 560px) { .desp-item { grid-template-columns: 1fr 32px; } .desp-item input.desp-o { grid-column: 1 / -1; } } /* visibility junto do transform: só o transform deixa a pílula preta vazia aparecendo no meio de print de página inteira */ .toast { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 90px); visibility: hidden; background: #141416; color: #fff; font-size: 14px; font-weight: 600; padding: 13px 22px; border-radius: 11px; box-shadow: var(--sombra-f); z-index: 90; transition: transform .28s, visibility .28s; max-width: 90vw; text-align: center; } .toast.on { transform: translate(-50%, 0); visibility: visible; } .toast--erro { background: var(--vermelho); } /* ============================= IMPRESSÃO ============================= Só vale com o body em `.imprimindo`, que o botão Imprimir liga. Sem esse recorte a folha sai com o menu lateral, a barra de busca e as outras seções. Nada de `break-before:page` nas caixas: já custou 3 folhas em branco na proposta da Baby & Cia. */ @media print { body.imprimindo { background: #fff; } body.imprimindo .side, body.imprimindo .topbar, body.imprimindo .backdrop, body.imprimindo .modal, body.imprimindo .toast, body.imprimindo .no-print, body.imprimindo .periodo-tabs, body.imprimindo .periodo-custom, body.imprimindo .acoes { display: none !important; } /* O cabeçalho é o contrário de tudo aqui: só existe no papel. Sem ele, duas folhas de períodos diferentes viram a mesma coisa em cima da mesa. */ body.imprimindo .so-print { display: block !important; font-size: 11.5px; color: #444; border-bottom: 1px solid #ccd2da; padding-bottom: 8px; margin-bottom: 14px; } /* 🔴 A CAUSA DO RELATORIO CORTADO (achado em 20/08/2026, com o print do dono). A tabela tem `min-width:780px` pra rolar de lado na tela. Na folha A4 com a margem padrao do Chrome sobram ~717px uteis, e `min-width` VENCE `width`: o `width:100%` daqui nunca pegou, a tabela ficava travada em 780 e os 63px que sobravam eram exatamente a coluna VALOR, que e a que interessa. Zerar o min-width e o conserto; o resto abaixo e o que faz caber bonito. */ body.imprimindo .rolagem { overflow: visible !important; } body.imprimindo table { min-width: 0 !important; width: 100% !important; font-size: 10.5px !important; } /* Sem `table-layout:fixed`: com ele as 8 colunas ficam da MESMA largura e o nome do produto invade a coluna do lado. O automatico ja cabe na folha quando a fonte encolhe. */ body.imprimindo table td, body.imprimindo table th { padding: 5px 6px !important; word-break: normal; overflow-wrap: break-word; } body.imprimindo .cel-prod img { width: 26px !important; height: 26px !important; } /* ⚠️ Data e valor NAO PODEM QUEBRAR. Quebrando, "20/08/2026" vira "20/08" numa linha e "/2026" na outra, e "R$ 239,80" vira "R$ 239,8" e "0" embaixo, que le como valor errado. Sao as duas colunas mais estreitas e as unicas em que a quebra muda o SENTIDO do que esta escrito. */ body.imprimindo table td.num, body.imprimindo table th.num, body.imprimindo table td.cel-num, body.imprimindo table th.cel-num, body.imprimindo table td:first-child { white-space: nowrap !important; } /* `.cel-num` existe SO pro papel: na tela a classe `.num` trocaria a fonte das celulas (ela puxa a display), e ninguem pediu mudanca visual na tela. */ body.imprimindo table td.cel-num, body.imprimindo table th.cel-num { text-align: right; font-variant-numeric: tabular-nums; } /* A coluna de entrega diz "Correios (Brasil todo)" em TODO pedido (frete gratis pra todo o Brasil), ocupando 3 linhas pra repetir a mesma coisa. No papel ela encolhe pro essencial e devolve a largura pras que variam. */ body.imprimindo table .cel-entrega { font-size: 9.5px !important; max-width: 58px; } /* Medido em 20/08/2026 na folha de 717px: a tabela de pedidos pedia 801px e a coluna "Sobrou" caia fora. O peso estava em tres colunas FOLGADAS, e nao na fonte, entao apertar elas cabe sem encolher o texto de todo mundo: "O que levou" 262px (33% da tabela, e ela ja quebra em linha), "Data" 92px pra caber "20/08/2026", e "Situacao" 89px por causa do padding da pilula. Medir coluna a coluna antes de mexer: reduzir a fonte no chute deixaria o relatorio ilegivel e ainda assim poderia nao caber. */ body.imprimindo #tabelaPedidos td:first-child, body.imprimindo #tabelaPedidos th:first-child { width: 68px; } /* 🔴 O MESMO tipo de trava do `min-width` da tabela, uma camada abaixo: a `.cel-prod` tem `min-width:250px` pro nome do modelo nao espremer na tela. No papel ela sozinha segurava 262px, um terco da tabela. `max-width` sem zerar o `min-width` nao faz nada — min VENCE max. */ body.imprimindo #tabelaPedidos .cel-prod { min-width: 0 !important; max-width: 185px; } /* O cabecalho e caixa alta com tracking, o que engorda toda coluna estreita. No papel ele volta ao normal e devolve alguns pixels por coluna. */ body.imprimindo th { letter-spacing: 0 !important; font-size: 10px !important; } body.imprimindo #tabelaPedidos .pilula { font-size: 9px !important; padding: 2px 6px !important; } body.imprimindo .main { margin: 0 !important; } body.imprimindo .envol { padding: 0 !important; max-width: none !important; } body.imprimindo .sec { display: none !important; } body.imprimindo #sec-relatorios { display: block !important; } /* ⚠️ As regras da tabela viviam DUPLICADAS aqui embaixo, e a segunda copia (sem `!important` no font-size) confundia quem viesse consertar. Ficou uma so, acima. A foto do produto some do papel: em 26px ela nao informa nada e ainda gasta tinta. */ body.imprimindo .cel-prod img { display: none; } body.imprimindo .painel-cx, body.imprimindo .tabela-cx, body.imprimindo .metrica { box-shadow: none !important; border: 1px solid #ccd2da !important; break-inside: avoid; } body.imprimindo .duplo { display: block !important; } body.imprimindo .duplo > * { margin-bottom: 14px; } body.imprimindo tr { break-inside: avoid; } } /* ====================== TOQUES PRÓPRIOS DA NK LUZ ====================== O dourado da marca (#A87B37) só aparece sobre o preto da barra lateral e do cartão de ritmo, onde ele dá 7:1. Em fundo claro ele é ilegível. */ .side__papel { color: var(--ouro-marca); letter-spacing: .16em; } .side__logo { border: 1px solid rgba(195,154,78,.22); } .nav-item.on { box-shadow: inset 3px 0 0 var(--ouro-marca); } .ritmo__t { color: rgba(231,200,119,.85); } /* ---- A conta aberta embaixo das métricas do Painel ---- Ela existe porque o dono leu "Faturamento" e entendeu "custo + o que a cliente pagou". Número sem a conta do lado é número que cada um lê de um jeito. Some da impressão. */ .conta-linha { background: var(--card); border: 1px solid var(--linha); border-left: 3px solid var(--primaria); border-radius: 12px; padding: 13px 16px; margin: -6px 0 20px; font-size: 13.5px; line-height: 1.65; color: var(--suave); } .conta-linha b { color: var(--texto); } .conta-linha a { color: var(--primaria); font-weight: 700; margin-left: 4px; } .conta-linha a:hover { text-decoration: underline; } /* ---- As fotos do modelo, no formulário de cadastro ---- A dona anexa do computador e ORDENA na mão. A primeira é a capa da loja, e por isso ela é a única com etiqueta escrita: número de posição sem a palavra "Capa" ninguém entende que aquela é a que aparece na busca. */ .fotos-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; margin-bottom: 12px; } .fmini { position: relative; border: 1px solid var(--linha); border-radius: 12px; overflow: hidden; background: var(--bg); aspect-ratio: 1/1; cursor: grab; } .fmini img { width: 100%; height: 100%; object-fit: contain; padding: 6px; display: block; } .fmini.arrastando { opacity: .4; } .fmini.sobre { border-color: var(--primaria); box-shadow: 0 0 0 2px var(--primaria-clara); } .fmini__sel { position: absolute; top: 6px; left: 6px; background: rgba(11,11,12,.82); color: #F4E3BC; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 3px 7px; border-radius: 999px; } .fmini__acoes { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 1px; background: rgba(11,11,12,.78); } .fmini__acoes button { flex: 1; color: #EDEFF3; font-size: 15px; line-height: 1; padding: 6px 0; } .fmini__acoes button:hover:not([disabled]) { background: rgba(255,255,255,.16); } .fmini__acoes button[disabled] { opacity: .3; cursor: default; } .fmini__x { color: #F19AA2 !important; font-size: 17px !important; } /* A caixa de "nenhuma foto" ocupa a LARGURA TODA numa faixa baixa, e nao um quadrado. Ela era `aspect-ratio:1/1` com `grid-column:span 2`, ou seja duas colunas de 112px: um quadrado de ~235px so pra dizer que nao ha foto, maior que a miniatura da foto de verdade. Aviso pesa menos que conteudo. */ .fvazia { border: 1.5px dashed var(--linha); border-radius: 12px; background: var(--bg); display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 11px; text-align: left; color: var(--suave); font-size: 12px; line-height: 1.45; padding: 13px 16px; grid-column: 1 / -1; } .fvazia svg { flex: none; opacity: .75; } /* A barra de anexar vai de fora a fora: e a acao principal do bloco e a primeira coisa que ela faz ao cadastrar um modelo. Em `inline-flex` ela encolhia no texto e ficava com cara de link solto no meio do formulario. */ .fotos-add { position: relative; display: flex; width: 100%; align-items: center; justify-content: center; gap: 9px; border: 1.5px dashed var(--linha); border-radius: 11px; padding: 15px 18px; font-size: 14.5px; font-weight: 600; color: var(--primaria); cursor: pointer; transition: border-color .15s, background .15s; } .fotos-add:hover { border-color: var(--primaria); background: var(--primaria-clara); } .fotos-add span { display: inline-flex; align-items: center; gap: 9px; } .fotos-add input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } /* ================== CLIENTES: A LISTA DE ACAO ("Hoje") ================== O quadro sozinho respondia "como esta o funil" e nunca "com quem eu falo agora". Esta lista responde a segunda, que e a pergunta que ela faz todo dia. Uma linha por pessoa, agrupada por urgencia, com o combinado a vista e o WhatsApp a um toque: ela desce a lista e vai resolvendo. ====================================================================== */ .gcli { background: var(--card); border-radius: var(--radius); box-shadow: var(--sombra); margin-bottom: 14px; overflow: hidden; } .gcli__t { display: flex; align-items: center; gap: 9px; padding: 15px 18px; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--texto); cursor: pointer; list-style: none; user-select: none; } .gcli__t::-webkit-details-marker { display: none; } .gcli__t b { margin-left: auto; background: var(--bg); color: var(--suave); font-size: 12.5px; letter-spacing: 0; padding: 2px 10px; border-radius: 999px; } .gcli__t::after { content: "›"; color: var(--suave); font-size: 19px; line-height: 1; transform: rotate(90deg); transition: transform .15s; } .gcli[open] .gcli__t::after { transform: rotate(-90deg); } .gcli__c { border-top: 1px solid var(--linha); } .pt--verde { background: var(--verde); } .pt--vermelho { background: var(--vermelho); } .pt--amarelo { background: var(--amarelo); } .pt--cinza { background: var(--suave); } .gcli__t .pt { width: 8px; height: 8px; flex: none; } .lcli { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--linha); cursor: pointer; transition: background .12s; } .lcli:last-child { border-bottom: 0; } .lcli:hover { background: var(--bg); } .lcli__q { flex: 1; min-width: 0; } .lcli__q b { display: block; font-size: 14.5px; } .lcli__q small { display: block; color: var(--suave); font-size: 12.5px; margin-top: 2px; } .lcli__o { font-size: 13px; color: var(--texto); margin-top: 6px; line-height: 1.45; } .lcli__o--v { color: var(--suave); font-style: italic; } .lcli__d { display: flex; align-items: center; gap: 10px; flex: none; } .lcli__z { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; background: var(--verde-bg); color: var(--verde); flex: none; } .lcli__z:hover { background: var(--verde); color: #fff; } /* Em tela de celular a pilula e o zap descem pra baixo do nome: lado a lado com 390px de largura eles espremem a anotacao ate ela virar duas palavras por linha, e a anotacao e o que diz o que fazer. */ @media (max-width: 560px) { .lcli { flex-direction: column; align-items: stretch; gap: 10px; } .lcli__d { justify-content: space-between; } } /* ---- O proximo retorno, dentro do cadastro do cliente ---- */ .prox { background: var(--primaria-clara); border: 1px solid #EADFC6; border-radius: 12px; padding: 15px 16px; margin-top: 4px; } .prox__t { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--primaria-escura); margin-bottom: 10px; } /* Mesma historia do nome da parte na ficha: este input nao mora dentro de `.campo`, entao sai com a borda quadrada do navegador no meio de um formulario todo arredondado. */ .prox input { width: 100%; font-size: 15px; padding: 11px 13px; background: #fff; color: var(--texto); border: 1.5px solid var(--linha); border-radius: 10px; outline: none; } .prox input:focus { border-color: var(--primaria); } .mais { margin-top: 16px; margin-bottom: 16px; } .mais summary { font-size: 13.5px; font-weight: 700; color: var(--primaria); cursor: pointer; padding: 6px 0; list-style: none; } .mais summary::-webkit-details-marker { display: none; } .mais summary::before { content: "+ "; } .mais[open] summary::before { content: "− "; } /* ========================= A TELA DE DESPESAS ========================== Uma linha por conta fixa do mês, e a linha é a mesma coisa que ela faz na mão: conferir o valor que veio na conta e dizer que pagou. Por isso o valor é editável ali mesmo, sem abrir modal — energia e água nunca vêm iguais ao previsto, e obrigar dois cliques pra corrigir centavos faz ela desistir. ====================================================================== */ .mes-nav { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; } .mes-nav b { font-family: var(--disp); font-size: 17px; font-weight: 800; min-width: 178px; text-align: center; } .fxs { display: flex; flex-direction: column; } .fxs__l { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--linha); } .fxs__l:last-child { border-bottom: 0; padding-bottom: 0; } .fxs__l--ok { opacity: .72; } .fxs__d { flex: none; width: 44px; text-align: center; } .fxs__d b { display: block; font-family: var(--disp); font-size: 17px; font-weight: 800; } .fxs__d small { display: block; font-size: 10.5px; color: var(--suave); text-transform: uppercase; letter-spacing: .05em; } .fxs__o { flex: 1; min-width: 0; } .fxs__o b { display: block; font-size: 14.5px; } .fxs__o small { display: block; font-size: 12.5px; color: var(--suave); margin-top: 2px; } .fxs__v { flex: none; width: 146px; } .fxs__b { flex: none; border: 1.5px solid var(--linha); border-radius: 9px; padding: 9px 14px; font-size: 13px; font-weight: 700; color: var(--primaria); background: #fff; white-space: nowrap; } .fxs__b:hover { border-color: var(--primaria); background: var(--primaria-clara); } .fxs__b--ok { display: inline-flex; align-items: center; gap: 6px; border-color: #BFE0CC; background: var(--verde-bg); color: var(--verde); } /* O cadastro das contas fixas (o molde), dentro do modal */ .fxe { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; } .fxe__o { flex: 1; min-width: 0; font-size: 15px; padding: 11px 13px; background: #fff; color: var(--texto); border: 1.5px solid var(--linha); border-radius: 10px; outline: none; } .fxe__o:focus { border-color: var(--primaria); } .fxe__d { display: flex; align-items: center; gap: 6px; flex: none; width: 96px; background: #fff; border: 1.5px solid var(--linha); border-radius: 10px; padding: 0 10px; } .fxe__d:focus-within { border-color: var(--primaria); } .fxe__d span { font-size: 12.5px; font-weight: 700; color: var(--suave); flex: none; } .fxe__d input { border: 0; background: none; outline: none; font-size: 15px; width: 100%; min-width: 0; padding: 10.5px 0; text-align: right; color: var(--texto); -moz-appearance: textfield; } .fxe__d input::-webkit-outer-spin-button, .fxe__d input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .fxe__v { flex: none; width: 138px; } .aviso-pagar { display: flex; flex-direction: column; gap: 3px; margin-top: 14px; background: var(--amarelo-bg); border-radius: 11px; padding: 12px 15px; font-size: 14px; color: var(--amarelo); } .aviso-pagar small { color: var(--texto); opacity: .75; font-size: 12.5px; line-height: 1.5; } /* A tabela de despesas do relatório: dia a dia, agrupada, e sai no papel. */ .tb-desp td.num, .tb-desp th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } .tb-desp tr.grupo td { background: var(--bg); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--primaria); padding-top: 12px; padding-bottom: 12px; } .tb-desp tr.soma td { font-weight: 700; background: #FCFCFD; } .tb-desp tr.soma--tot td { font-size: 15px; border-top: 2px solid var(--linha); } @media (max-width: 720px) { .fxs__l { flex-wrap: wrap; } .fxs__o { flex: 1 1 60%; } .fxs__v { width: 128px; } .fxs__b { flex: 1 1 auto; } .mes-nav b { min-width: 0; flex: 1; } } /* ---- Campo de DINHEIRO ---- O "R$" fica FORA do input, na caixa. Dentro, ele viraria texto que a pessoa apaga sem querer e que o parser teria que limpar toda vez. O input e `type="text"` de proposito (o porque esta escrito no `admin.js`, no bloco DINHEIRO): o `number` desenha setinhas, muda de valor com o scroll do mouse e recusa virgula, que e como se escreve preco no Brasil. */ .moeda-cx { display: flex; align-items: center; gap: 8px; background: #fff; border: 1.5px solid var(--linha); border-radius: 10px; padding: 0 13px; } .moeda-cx:focus-within { border-color: var(--primaria); } .moeda-cx > span { flex: none; font-size: 13.5px; font-weight: 700; color: var(--suave); } .moeda-cx input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font-size: 15px; color: var(--texto); padding: 11px 0; text-align: right; font-variant-numeric: tabular-nums; } /* ---- O botao de adicionar linha e o X, usados pelas contas fixas ---- Nasceram na ficha de custo do par, que a Helane mandou tirar em 24/08/2026 (ela digita um numero so agora). As contas fixas herdaram os dois. */ .ficha-add { margin-top: 10px; font-size: 13.5px; font-weight: 700; color: var(--primaria); padding: 7px 0; } .ficha-add:hover { text-decoration: underline; } .fic__x { flex: none; width: 32px; height: 32px; border-radius: 8px; color: var(--suave); font-size: 19px; line-height: 1; } .fic__x:hover { background: var(--vermelho-bg); color: var(--vermelho); } /* A caixa da conta ao vivo embaixo do custo do par (custo / preco / sobra). Reaproveita a `.conta`, que ja e o jeito do painel mostrar conta aberta. */ .ficha-fim { margin-top: 12px; background: var(--bg); border-radius: 12px; padding: 4px 15px 13px; } /* ---- A soma do pedido, dentro do formulário ---- */ .soma-ped { margin: 4px 0 2px; } .soma-ped .conta { background: var(--bg); border-radius: 12px; padding: 4px 14px; } /* ---- Texto de ajuda embaixo de um campo ---- */ .ajuda { display: block; margin-top: 6px; font-size: 12px; color: var(--suave); line-height: 1.5; } /* Pediu mais pares do que tem: o aviso é na hora, não só no clique em Registrar. Chegar até o fim do formulário pra ouvir "não tem" é pior. */ .disp--falta { color: var(--vermelho) !important; font-weight: 700; } /* ---- A faixa dos pedidos cancelados, embaixo do funil ---- Cancelado sai do funil porque não é venda, mas some da tela inteira se não tiver esta porta — e aí o cancelamento por engano não tem volta. */ .cancelados { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 18px; background: var(--card); border: 1px solid var(--linha); border-radius: 12px; padding: 12px 16px; font-size: 13.5px; } .cancelados b { color: var(--texto); } .cancelados span { color: var(--suave); margin-right: auto; } /* ---- A agenda da NK Luz tem QUATRO tipos, não dois ---- */ .pt--verde { background: var(--verde); } .pt--cinza { background: #55606E; } /* ---- Estoque número a número (34 ao 39) ---- É a peça que o painel de carro não tinha: aqui um produto não é uma unidade, é seis. A cor conta a história sem ler número: cheio, baixo ou zerado. */ .grade-num { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; } @media (max-width: 520px) { .grade-num { grid-template-columns: repeat(3, 1fr); } } .gnum { border: 1.5px solid var(--linha); border-radius: 10px; padding: 9px 6px; text-align: center; background: #fff; } .gnum--zero { background: var(--vermelho-bg); border-color: #EFD2D5; } .gnum--baixo { background: var(--amarelo-bg); border-color: #F2D3B4; } .gnum__n { font-family: var(--disp); font-size: 16px; font-weight: 800; color: var(--suave); } .gnum__q { font-family: var(--disp); font-size: 22px; font-weight: 800; margin-top: 2px; } .gnum--zero .gnum__q { color: var(--vermelho); } .gnum--baixo .gnum__q { color: var(--amarelo); } /* A palavrinha "atacado" / "mesclado" embaixo do número, no formulário do mesclado: diz de relance em qual balcão aquele número está. */ .gnum__bal { font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; margin-top: 3px; color: var(--suave); } .gnum--on .gnum__bal { color: var(--primaria-escura); } .gnum input { width: 100%; text-align: center; font: inherit; font-size: 16px; font-weight: 700; margin-top: 4px; padding: 6px 2px; border: 1.5px solid var(--linha); border-radius: 8px; outline: none; color: var(--texto); background: #fff; -moz-appearance: textfield; } .gnum input:focus { border-color: var(--primaria); } /* ---- A célula que ela MARCA (a numeração do mesclado) ---- Reaproveita a mesma .gnum do cadastro de propósito: é a mesma grade de números que ela já conhece, só que aqui o dedo escolhe em vez de digitar. O