/* Fonte da marca "Hobotik" — usada só no nome/logo da loja, não no resto do texto do painel (esse continua em --font-sans). */ @font-face { font-family: 'Helvetica LT Std Light'; src: url('/assets/fonts/helvetica-lt-std-light.otf') format('opentype'); font-weight: 300; font-style: normal; font-display: swap; } /* =================================================================== HOBOTIK — Sistema de tokens Paleta: base grafite/azul-noite + acento âmbar (assinatura do painel, referencia o universo do Mercado Livre sem copiar a marca). Verde/vermelho são reservados exclusivamente a sinais financeiros (lucro/prejuízo) — nunca usados como decoração. =================================================================== */ :root { /* Tema "India" (tweakcn) — substitui a paleta grafite/azul original. Aplicado por cima do sistema de tokens abaixo: cores mapeadas 1:1 pros mesmos nomes de variável, então o resto do CSS não precisou mudar. */ --bg: oklch(0.1448 0 0); --surface: oklch(0.1149 0 0); --surface-2: oklch(0.2178 0 0); --surface-3: oklch(0.2686 0 0); /* Alias sem hífen: várias páginas usam var(--surface2, #f0f0f0) inline; sem este alias a variável não resolve e o fallback branco quebra o tema escuro (ex.: botão de aba inativo ilegível). */ --surface2: var(--surface-2); --border: oklch(0.2478 0 0); --border-soft: oklch(0.2478 0 0 / .6); --text: oklch(0.9401 0 0); --muted: oklch(0.6830 0 0); --muted-2: oklch(0.5 0 0); --primary: oklch(0.7737 0.1629 60.2762); --primary-hover: oklch(0.7204 0.1833 52.8311); --primary-soft: oklch(0.7737 0.1629 60.2762 / .15); /* Dourado é claro — texto branco em cima fica ilegível, por isso usa um marrom escuro (mesmo tom que o tema tweakcn usa como primary-foreground). */ --primary-foreground: oklch(0.2319 0.0525 64.0125); --accent: oklch(0.7204 0.1833 52.8311); --accent-soft: oklch(0.7204 0.1833 52.8311 / .15); --accent-hover: oklch(0.62 0.17 55); --success: oklch(0.8158 0.1990 152.4085); --success-soft: oklch(0.8158 0.1990 152.4085 / .14); --danger: oklch(0.6453 0.2404 27.3106); --danger-soft: oklch(0.6453 0.2404 27.3106 / .14); --warning: oklch(0.78 0.16 85); --warning-soft: oklch(0.78 0.16 85 / .14); --warning-bg: var(--warning-soft); /* alias usado inline no index.php */ --radius-sm: .5rem; --radius: .625rem; --radius-lg: .75rem; --shadow: 0 1px 2px rgba(0,0,0,.24); --shadow-lg: 0 8px 24px rgba(0,0,0,.32); --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, sans-serif; --font-mono: "SF Mono", "JetBrains Mono", "Cascadia Code", Consolas, monospace; --font-marca: 'Helvetica LT Std Light', var(--font-sans); } /* Tema claro — ativado via [data-tema="claro"] no (assets/app.js, persistido em localStorage). Mesmos nomes de variável, só os valores trocam, então o resto do CSS funciona sem alteração nenhuma. */ :root[data-tema="claro"] { --bg: oklch(0.9800 0 0); --surface: oklch(1 0 0); --surface-2: oklch(0.9550 0 0); --surface-3: oklch(0.9100 0 0); --surface2: var(--surface-2); --border: oklch(0.8800 0 0); --border-soft: oklch(0.8800 0 0 / .6); --text: oklch(0.2200 0 0); --muted: oklch(0.4600 0 0); --muted-2: oklch(0.5600 0 0); --shadow: 0 6px 20px rgba(0,0,0,.08); --shadow-lg: 0 12px 32px rgba(0,0,0,.12); } * { box-sizing: border-box; } html { -webkit-font-smoothing: antialiased; } body { margin: 0; font-family: var(--font-sans); background: var(--bg); background-image: radial-gradient(circle at 10% 0%, rgba(59,130,246,.06), transparent 40%), radial-gradient(circle at 90% 0%, rgba(212,167,44,.05), transparent 40%); color: var(--text); line-height: 1.5; } a { color: inherit; } :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } /* ===== Login ===== */ .login-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 1rem; } .login-box { background: var(--surface); padding: 2.5rem; border-radius: var(--radius-lg); border: 1px solid var(--border); width: 100%; max-width: 380px; box-shadow: var(--shadow-lg); } .login-box h1 { font-family: var(--font-marca); text-transform: uppercase; margin: 0 0 .25rem; font-size: 1.75rem; letter-spacing: -.02em; } .login-box .subtitle { margin: 0 0 1.5rem; color: var(--muted); font-size: .9rem; text-align: center; } .login-box label { display: block; margin: 1rem 0 .35rem; font-size: .82rem; color: var(--muted); font-weight: 600; } .login-box input { width: 100%; padding: .7rem .9rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-size: 1rem; transition: border-color .15s, box-shadow .15s; } .login-box input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); } .login-box button { width: 100%; margin-top: 1.5rem; padding: .8rem; background: var(--primary); color: var(--primary-foreground); border: 0; border-radius: var(--radius-sm); font-weight: 600; cursor: pointer; font-size: 1rem; transition: background .15s; } .login-box button:hover { background: var(--primary-hover); } /* ===== Flash ===== */ .flash { padding: .75rem 1rem; border-radius: var(--radius-sm); margin-bottom: 1rem; font-size: .9rem; } .flash-erro { background: var(--danger-soft); color: #ffb3bd; border: 1px solid rgba(244,86,106,.3); } .flash-sucesso { background: var(--success-soft); color: #8af0d4; border: 1px solid rgba(45,212,167,.3); } .flash-aviso { background: var(--warning-soft); color: #fcd34d; border: 1px solid rgba(245,158,11,.3); } .alerta { padding: .9rem 1.1rem; border-radius: var(--radius-sm); margin-bottom: 1.25rem; font-weight: 600; font-size: .92rem; } .alerta.sucesso { background: var(--success-soft); color: #8af0d4; border: 1px solid rgba(45,212,167,.3); } .alerta.erro { background: var(--danger-soft); color: #ffb3bd; border: 1px solid rgba(244,86,106,.3); } /* ===== Layout do painel ===== */ .painel-wrap { max-width: none; margin: 0 auto; padding: 1.75rem 2rem 3rem; } /* Header simples — só usado por vendas_sku_publico.php (página pública sem login, fora do shell com sidebar/topbar das páginas internas). */ .app-header { display: flex; align-items: center; gap: 1rem; padding: .85rem 1.5rem; background: rgba(21,24,30,.85); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 10; } [data-tema="claro"] .app-header { background: rgba(255,255,255,.85); } .app-header .marca { font-family: var(--font-marca); text-transform: uppercase; font-weight: 800; font-size: 1.15rem; letter-spacing: -.01em; color: var(--text); text-decoration: none; white-space: nowrap; display: flex; align-items: center; gap: .5rem; } /* ===== Shell: sidebar + topbar + conteúdo ===== */ .app-shell { display: flex; min-height: 100vh; align-items: stretch; } /* Sidebar lateral (desktop: fixa; mobile: drawer que desliza da esquerda) */ .app-sidebar { width: 232px; flex-shrink: 0; background: var(--surface); border-right: 1px solid var(--border); position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; z-index: 30; } .sidebar-marca { font-family: var(--font-marca); text-transform: uppercase; font-weight: 800; font-size: 1.1rem; letter-spacing: -.01em; color: var(--text); text-decoration: none; white-space: nowrap; display: flex; align-items: center; gap: .6rem; padding: 1.1rem 1.2rem; border-bottom: 1px solid var(--border); flex-shrink: 0; } .marca-logo { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .sidebar-nav { flex: 1; overflow-y: auto; padding: .9rem .75rem; } .sidebar-grupo { margin-top: 1.1rem; } .sidebar-grupo-label { display: block; color: var(--muted-2); font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 0 .6rem; margin-bottom: .3rem; } .sidebar-link { display: block; color: var(--muted); text-decoration: none; padding: .55rem .6rem; border-radius: var(--radius-sm); font-size: .87rem; font-weight: 600; transition: background .15s, color .15s; } .sidebar-link:hover { background: var(--surface-2); color: var(--text); } .sidebar-link.ativo { background: var(--primary); color: var(--primary-foreground); } .sidebar-switcher { flex-shrink: 0; padding: .7rem 1.1rem; border-top: 1px solid var(--border); } .sidebar-switcher select { width: 100%; margin-top: .3rem; padding: .4rem .5rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-size: .82rem; } .sidebar-footer { flex-shrink: 0; padding: .9rem 1.1rem; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: .6rem; } .app-usuario { color: var(--muted); font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .app-usuario strong { color: var(--text); font-weight: 600; } .app-logout { color: var(--danger); text-decoration: none; font-size: .82rem; font-weight: 600; padding: .4rem .7rem; border-radius: var(--radius-sm); border: 1px solid rgba(244,86,106,.3); transition: background .15s; white-space: nowrap; flex-shrink: 0; } .app-logout:hover { background: var(--danger-soft); } .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 25; } /* Área principal (topbar + conteúdo da página) */ .app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .app-topbar { display: flex; align-items: center; gap: 1rem; padding: .75rem 1.5rem; background: rgba(21,24,30,.85); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 10; } [data-tema="claro"] .app-topbar { background: rgba(255,255,255,.85); } .sidebar-toggle { display: none; flex-direction: column; justify-content: center; gap: 4px; width: 34px; height: 34px; background: transparent; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; flex-shrink: 0; padding: 0; } .sidebar-toggle span { display: block; width: 18px; height: 2px; background: var(--text); margin: 0 auto; border-radius: 2px; } .busca-global { flex: 1; max-width: 420px; } .busca-global input { width: 100%; padding: .5rem .9rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-size: .87rem; transition: border-color .15s, box-shadow .15s; } .busca-global input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); } .theme-toggle { margin-left: auto; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; font-size: 1.05rem; flex-shrink: 0; transition: background .15s; } .theme-toggle:hover { background: var(--surface-2); } /* Spinner usado no loading state dos botões (app.js) */ .spinner { display: inline-block; width: .85em; height: .85em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spinner-girar .6s linear infinite; vertical-align: -.15em; } @keyframes spinner-girar { to { transform: rotate(360deg); } } @media (max-width: 900px) { .app-sidebar { position: fixed; left: 0; top: 0; transform: translateX(-100%); transition: transform .2s ease; box-shadow: var(--shadow-lg); } .app-sidebar.aberta { transform: translateX(0); } .sidebar-overlay.visivel { display: block; } .sidebar-toggle { display: flex; } .busca-global { max-width: none; } } .page-head { margin-bottom: 1.5rem; } .page-head h1 { margin: 0 0 .3rem; font-size: 1.6rem; letter-spacing: -.015em; } .page-head p { margin: 0; color: var(--muted); font-size: .92rem; } /* Cards / containers genéricos do painel */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.75rem; box-shadow: var(--shadow); } .card h2 { margin: 0 0 1rem; font-size: 1.05rem; font-weight: 600; letter-spacing: -.01em; } .card .subtitulo-ajuda { margin: .5rem 0 1.25rem; color: var(--muted); font-size: .85rem; } /* ===== Dashboard: grid de métricas (KPIs) ===== */ .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-bottom: 1.75rem; } .kpi-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.4rem 1.5rem; box-shadow: var(--shadow); position: relative; overflow: hidden; /* Sem cor por padrão — o número é o protagonista, não a moldura do card. Só ganha cor quando o valor em si é um sinal (lucro/prejuízo, ver kpi-valor inline color nas páginas). */ border-top: 1px solid var(--border); } .kpi-card .kpi-label { color: var(--muted); font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; margin-bottom: .55rem; display: block; } .kpi-card .kpi-valor { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 1.7rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; display: block; } .kpi-card .kpi-sub { margin-top: .45rem; font-size: .8rem; color: var(--muted); } /* Modificadores de cor: mantidos só pra quem já usa as classes, mas agora como um traço fino de 2px — sinal discreto, não uma faixa dominante. */ .kpi-card.kpi-accent { border-top-color: var(--accent); } .kpi-card.kpi-success { border-top-color: var(--success); } .kpi-card.kpi-danger { border-top-color: var(--danger); } .kpi-card.kpi-primary { border-top-color: var(--primary); } /* KPI card como link (dashboard) — mesmo visual, só ganha hover/cursor */ a.kpi-card { text-decoration: none; color: inherit; cursor: pointer; transition: transform .15s, border-color .15s, box-shadow .15s; } a.kpi-card:hover { transform: translateY(-2px); border-color: var(--primary); box-shadow: var(--shadow-lg); } /* Mini-gráfico de barras (vendas últimos 30 dias, dashboard) */ .mini-grafico-30d { display: flex; align-items: flex-end; gap: 3px; height: 90px; } .mini-grafico-barra { flex: 1; min-width: 3px; background: var(--primary); border-radius: 2px 2px 0 0; transition: opacity .15s; } .mini-grafico-barra:hover { opacity: .75 !important; } .kpi-bar { margin-top: .8rem; height: 5px; border-radius: 99px; background: var(--surface-3); overflow: hidden; } .kpi-bar > span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--danger), var(--warning), var(--success)); } .dash-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.25rem; } @media (max-width: 900px) { .dash-grid { grid-template-columns: 1fr; } } .lista-destaque { list-style: none; margin: 0; padding: 0; } .lista-destaque li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid var(--border-soft); } .lista-destaque li:last-child { border-bottom: 0; } .lista-destaque .item-nome { font-weight: 600; font-size: .9rem; } .lista-destaque .item-meta { color: var(--muted); font-size: .78rem; } .lista-destaque .item-valor { font-family: var(--font-mono); font-weight: 700; font-size: .92rem; white-space: nowrap; } .empty-state { text-align: center; padding: 2rem 1rem; color: var(--muted); font-size: .9rem; } .placeholder-integracao { margin-top: 1.75rem; border: 1px dashed var(--border); border-radius: var(--radius); padding: 1.25rem 1.5rem; display: flex; align-items: center; gap: 1rem; background: var(--surface-2); } .placeholder-integracao .icone-ml { width: 38px; height: 38px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1rem; flex-shrink: 0; } .placeholder-integracao .texto strong { display: block; font-size: .92rem; margin-bottom: .15rem; } .placeholder-integracao .texto span { color: var(--muted); font-size: .82rem; } .tag-em-breve { margin-left: auto; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--accent); background: var(--accent-soft); padding: .3rem .6rem; border-radius: 99px; white-space: nowrap; } /* ===== Grid de cadastro em lote (compras China) ===== */ .grid-cadastro { display: grid; grid-template-columns: minmax(200px, 2.5fr) 80px 110px 110px 90px 100px 90px 90px 1.5fr; gap: 10px; align-items: center; } .grid-header { font-weight: 700; color: var(--text); background: var(--surface-2); padding: .6rem; text-align: left; font-size: .78rem; border-radius: var(--radius-sm); } .linha-produto { display: contents; } .grid-cadastro input { width: 100%; padding: .55rem .65rem; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-size: .9rem; box-sizing: border-box; transition: border-color .15s, box-shadow .15s; } .grid-cadastro input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); } /* ===== Formulários gerais do painel ===== */ .form-group { margin-bottom: 1rem; } .form-group label, .checkbox-group > label { display: block; margin-bottom: .4rem; font-weight: 600; font-size: .82rem; color: var(--muted); } .form-row { display: flex; gap: 1rem; flex-wrap: wrap; } .form-row .form-group { flex: 1; min-width: 200px; } .painel-wrap input[type="number"], .painel-wrap input[type="text"], .painel-wrap input[type="url"], .painel-wrap select { width: 100%; padding: .65rem .85rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-size: .95rem; box-sizing: border-box; transition: border-color .15s, box-shadow .15s; } .painel-wrap input:focus, .painel-wrap select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); } .checkbox-group { background: var(--surface-2); padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 1rem; } .checkbox-item { display: inline-flex; align-items: center; margin: .25rem 1.25rem .25rem 0; font-weight: 600; font-size: .9rem; cursor: pointer; color: var(--text); } .checkbox-item input { margin-right: .5rem; transform: scale(1.15); accent-color: var(--primary); } .bloco-anuncio { background: var(--surface-2); border-left: 4px solid var(--primary); padding: 1.25rem; margin-bottom: 1.25rem; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; display: none; } .bloco-titulo { font-weight: 700; font-size: 1rem; margin-bottom: 1rem; color: var(--text); border-bottom: 1px dashed var(--border); padding-bottom: .5rem; } .btn-primario { background: var(--primary); color: var(--primary-foreground); padding: .8rem 1.4rem; border: 0; border-radius: var(--radius-sm); font-weight: 600; font-size: .95rem; cursor: pointer; transition: background .15s; } .btn-primario:hover { background: var(--primary-hover); } /* ===== Tabela de relatório ===== */ .tabela-wrap { overflow-x: auto; } .tabela-relatorio { width: 100%; table-layout: auto; border-collapse: collapse; margin-top: 1.25rem; background: var(--surface); border-radius: var(--radius); overflow: hidden; } .tabela-relatorio th, .tabela-relatorio td { padding: .85rem .75rem; text-align: left; border-bottom: 1px solid var(--border); font-size: .87rem; /* Quebra linha nos ESPAÇOS (como um parágrafo normal) pra caber na tela sem rolagem horizontal. overflow-wrap:break-word só parte uma palavra no meio como último recurso, quando ela sozinha não cabe na coluna (ex: um ID longo sem espaços) — não quebra palavras normais do texto. */ white-space: normal; overflow-wrap: break-word; } .tabela-relatorio td.num, .tabela-relatorio td .num { font-family: var(--font-mono); white-space: nowrap; } .tabela-relatorio th { background: var(--surface-2); color: var(--text); font-weight: 700; font-size: .76rem; text-transform: uppercase; letter-spacing: .03em; /* Quebra natural: cabeçalhos de até 2 palavras curtas cabem numa linha só; com 3+ palavras (ou uma palavra longa), o navegador quebra em 2 linhas sozinho, sem forçar uma palavra por linha. */ white-space: normal; vertical-align: bottom; line-height: 1.25; } /* Tabelas densas com muitas colunas curtas (data, código, valores, status) — nenhuma delas é texto longo, então nada deveria quebrar linha; em vez disso aperta o espaçamento pra caber tudo sem rolagem horizontal. */ .tabela-compacta th, .tabela-compacta td { padding: .4rem .45rem; font-size: .76rem; } .tabela-compacta th { font-size: .62rem; } .tabela-compacta .status-badge { padding: 1px 7px; font-size: .7rem; } .tabela-relatorio tr:hover { background: var(--surface-2); } .tabela-relatorio .sub { display: block; color: var(--muted); font-size: .78rem; margin-top: .15rem; } .lucro-positivo { color: var(--success); font-weight: 700; } .lucro-negativo { color: var(--danger); font-weight: 700; } .badge-empate { color: var(--text); font-weight: 600; background: var(--warning-soft); padding: .3rem .55rem; border-radius: var(--radius-sm); border: 1px solid rgba(245,158,11,.3); display: inline-block; white-space: nowrap; } .prazo-estoque { color: var(--primary); font-weight: 700; } /* ===== Badges (status de anúncio/venda, tipo de anúncio, composição produto×kit) — centralizado aqui porque antes cada página duplicava essas regras com cores pastel fixas (pensadas pra fundo branco), que destoavam do tema escuro. Paleta restrita de propósito: cor só onde é sinal (ativo/pago = sucesso, pausado = atenção, sem vínculo = alerta); o resto fica neutro, sem "arco-íris" de categorias. */ .status-badge, .badge-tipo, .badge-composicao { display: inline-block; padding: .2rem .6rem; border-radius: 999px; font-size: .72rem; font-weight: 600; letter-spacing: .01em; white-space: nowrap; } /* Status de venda/anúncio */ .status-active, .status-paid, .status-delivered { background: var(--success-soft); color: var(--success); } .status-paused { background: var(--warning-soft); color: var(--warning); } .status-closed, .status-cancelled, .status-outro { background: var(--surface-3); color: var(--muted); } /* Tipo de anúncio (nível ML: Premium/Clássico/Grátis) — só o topo (gold_pro) ganha destaque de cor, o resto fica neutro (não é sinal bom/ruim). */ .badge-gold_pro, .badge-gold_special, .badge-gold { background: var(--primary-soft); color: var(--primary); } .badge-silver, .badge-bronze, .badge-free, .badge-outro { background: var(--surface-3); color: var(--muted); } /* Composição Produto × Kit */ .badge-produto { background: var(--surface-3); color: var(--text); } .badge-kit { background: var(--primary-soft); color: var(--primary); } .badge-sem-vinculo { background: var(--danger-soft); color: var(--danger); } /* Status de concorrência no Catálogo ML (catalogo.php) */ .catalog-ganhando { background: var(--success-soft); color: var(--success); } .catalog-perdendo { background: var(--danger-soft); color: var(--danger); } .catalog-alerta { background: var(--warning-soft); color: var(--warning); } .catalog-neutro { background: var(--surface-3); color: var(--muted); }