:root { /* Cores por negócio — as mesmas do vault no Obsidian. Não inventar outras. */ --biz-barberchopp: #f59e0b; --biz-fabrica: #8b5cf6; --biz-pessoal: #3b82f6; --biz-sistema: #64748b; /* Accent ativo — trocado por data-biz no conforme a fonte selecionada. */ --accent: #d9b85c; --accent-dark: #bfa04a; --accent-ink: #0f1216; --accent-soft: rgba(217, 184, 92, .14); --green: #34d399; --red: #f87171; --amber: #fbbf24; --bg: #0f1216; --sidebar: #12151a; --panel: #171b21; --panel-2: #1c2128; --ink: #e6e9ee; --muted: #8b93a1; --line: #262b33; } body[data-biz="barberchopp"] { --accent: var(--biz-barberchopp); --accent-dark: #d18908; --accent-soft: rgba(245, 158, 11, .14); } body[data-biz="fabrica"] { --accent: var(--biz-fabrica); --accent-dark: #7442e6; --accent-soft: rgba(139, 92, 246, .16); } body[data-biz="pessoal"] { --accent: var(--biz-pessoal); --accent-dark: #2668d8; --accent-soft: rgba(59, 130, 246, .16); } * { box-sizing: border-box; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: var(--bg); color: var(--ink); } h1, h2 { margin: 0; } .hidden { display: none !important; } .muted { color: var(--muted); font-size: 13px; } .num { text-align: right; } /* App shell: sidebar + conteúdo */ .app { display: flex; min-height: 100vh; } /* Sidebar (estilo menu Trinks) */ .sidebar { width: 234px; flex-shrink: 0; background: var(--sidebar); border-right: 1px solid var(--line); padding: 18px 14px; display: flex; flex-direction: column; gap: 18px; position: sticky; top: 0; height: 100vh; } .sidebar .brand { display: flex; align-items: center; gap: 12px; padding: 4px 6px; border: 0; background: transparent; width: 100%; text-align: left; cursor: pointer; font-family: inherit; color: var(--ink); } .sidebar .brand:hover .logo { filter: brightness(1.1); } .sidebar .logo { width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0; background: linear-gradient(135deg, var(--accent), var(--accent-dark)); color: var(--accent-ink); display: grid; place-items: center; font-weight: 800; font-size: 16px; } .sidebar h1 { font-size: 15px; line-height: 1.25; font-weight: 800; } .source-nav { display: flex; flex-direction: column; gap: 3px; } /* Cor do negócio — vale para o cabeçalho do grupo e para cada aba. */ .source-nav [data-biz] { --tab: var(--biz-sistema); } .source-nav [data-biz="barberchopp"] { --tab: var(--biz-barberchopp); } .source-nav [data-biz="fabrica"] { --tab: var(--biz-fabrica); } .source-nav [data-biz="pessoal"] { --tab: var(--biz-pessoal); } .src-group { display: flex; align-items: center; gap: 8px; margin: 14px 6px 5px; font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); } .src-group::before { content: ""; width: 8px; height: 8px; border-radius: 3px; background: var(--tab); flex-shrink: 0; } .src-group::after { content: ""; flex: 1; height: 1px; background: var(--line); } .src-group:first-child { margin-top: 0; } .source-tab { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; border: 0; background: transparent; color: var(--muted); padding: 9px 10px; border-radius: 10px; cursor: pointer; font-size: 14px; font-weight: 600; transition: background .12s, color .12s; } .source-tab:hover:not(:disabled) { background: rgba(255,255,255,.04); color: var(--ink); } .source-tab.active { background: color-mix(in srgb, var(--tab) 15%, transparent); color: var(--tab); box-shadow: inset 3px 0 0 var(--tab); } .source-tab.active .src-ava { background: var(--tab); color: var(--bg); box-shadow: none; } .source-tab:disabled { opacity: .45; cursor: not-allowed; } .src-ava { width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0; background: color-mix(in srgb, var(--tab) 16%, transparent); color: var(--tab); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tab) 38%, transparent); display: grid; place-items: center; font-size: 12px; font-weight: 800; } .src-name { flex: 1; } .soon { font-size: 9px; text-transform: uppercase; letter-spacing: .5px; opacity: .7; } .content-area { flex: 1; min-width: 0; display: flex; flex-direction: column; } /* Topbar (dentro do conteúdo) */ .topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 24px; background: var(--panel); border-bottom: 1px solid var(--line); box-shadow: inset 0 3px 0 var(--accent); } .topbar #sourceName { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.01em; } .topbar-left { display: flex; align-items: center; gap: 12px; min-width: 0; } .topbar-right { display: flex; align-items: center; gap: 14px; } .biz-chip { flex-shrink: 0; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; padding: 5px 11px; border-radius: 20px; background: var(--accent-soft); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); } #refreshBtn { background: var(--accent); color: var(--accent-ink); border: 0; padding: 8px 14px; border-radius: 8px; font-weight: 700; cursor: pointer; } #refreshBtn:hover { background: var(--accent-dark); } .topbar-right .muted { color: var(--muted); } /* Layout */ main { padding: 20px 24px 40px; max-width: 1180px; width: 100%; margin: 0 auto; } .grid { display: grid; gap: 16px; } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 900px) { .grid-3 { grid-template-columns: 1fr; } } @media (max-width: 1100px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .grid-4 { grid-template-columns: 1fr; } .grid-2 { grid-template-columns: 1fr; } } .panel { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; margin-bottom: 16px; } .panel h2 { font-size: 14px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .4px; display: flex; align-items: center; gap: 8px; } .panel h2::before { content: ""; width: 3px; height: 13px; border-radius: 2px; background: var(--accent); flex-shrink: 0; } /* KPIs: números sempre alinhados em coluna. */ .big-result, .today-block .big, .rs-item .val, .sd-num, .rc-total, .bar-val, .num, .qty-val { font-variant-numeric: tabular-nums; } .panel-head { display: flex; align-items: baseline; justify-content: space-between; } .ph-right { display: flex; align-items: center; gap: 12px; } .ghost-btn { background: transparent; border: 1px solid var(--line); color: var(--ink); padding: 6px 12px; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 13px; } .ghost-btn:hover { border-color: var(--accent); color: var(--accent); } .ghost-btn.sm { padding: 4px 10px; font-size: 12px; } /* Transferência para lojas (botões +/−) */ .transfer-head { display: flex; align-items: baseline; gap: 12px; margin: 20px 0 8px; flex-wrap: wrap; } .transfer-head h2 { font-size: 14px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .4px; } .transfer-lojas { display: flex; flex-direction: column; gap: 8px; } .loja-block { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--panel-2); } .loja-toggle { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 0; background: transparent; color: var(--ink); cursor: pointer; padding: 12px 14px; font-size: 14px; font-weight: 700; } .loja-toggle:hover { background: rgba(255,255,255,.03); } .loja-toggle .lt-arrow { color: var(--accent); width: 14px; } .loja-toggle .lt-name { flex: 1; } .loja-toggle .lt-sum { font-weight: 600; } .loja-editor { padding: 6px 14px 14px; border-top: 1px solid var(--line); } .prod-row { display: grid; grid-template-columns: 1fr 110px 118px 100px; align-items: center; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13px; } .prod-row:last-of-type { border-bottom: 0; } .prod-row.has-qtd .prod-name { color: var(--ink); font-weight: 600; } .prod-head { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .4px; font-weight: 700; border-bottom: 2px solid var(--line); } .prod-head .qty-head { text-align: center; } .prod-name { color: var(--muted); } .prod-unit { color: var(--muted); } .prod-val { font-weight: 700; color: var(--accent); } .qty-cell { display: flex; align-items: center; justify-content: center; gap: 8px; } .qty-btn { width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); cursor: pointer; font-size: 15px; font-weight: 800; line-height: 1; } .qty-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); } .qty-btn:disabled { opacity: .3; cursor: not-allowed; } .qty-val { min-width: 24px; text-align: center; font-weight: 700; } .qty-batch { width: 46px; height: 26px; border-radius: 7px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font-size: 12px; text-align: center; margin-left: 4px; } .qty-batch-btn { width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); cursor: pointer; font-size: 13px; font-weight: 800; line-height: 1; } .qty-batch-btn:hover { border-color: var(--accent); color: var(--accent); } .loja-foot { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); } .extrato-wrap { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 6px; } .extrato-sub { margin: 14px 0 6px; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; } .neutro-flag { color: var(--amber); font-size: 11px; font-weight: 700; } .fatura-flag { color: var(--accent); font-size: 11px; font-weight: 700; } .gasto-real { margin: 10px 0 4px; padding: 12px 14px; border: 1px solid #3a2f1d; background: linear-gradient(135deg, var(--panel), #221a12); border-radius: 10px; } .gasto-real .gr-label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; } .gasto-real .gr-value { font-size: 22px; font-weight: 800; color: var(--amber); margin-top: 2px; } .gasto-real .gr-parcial { font-size: 11px; font-weight: 700; color: var(--amber); border: 1px solid #3a2f1d; border-radius: 6px; padding: 1px 6px; vertical-align: middle; } .gasto-real .gr-note { font-size: 12px; margin-top: 4px; } .estoque-wrap { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 6px; } .estoque-wrap .row-zero td { color: var(--muted); } .estoque-wrap .rz-flag { color: var(--amber); font-size: 11px; font-weight: 700; } .panel-accent { background: linear-gradient(135deg, var(--panel), color-mix(in srgb, var(--accent) 12%, var(--panel))); border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); } .loader { padding: 60px; text-align: center; color: var(--muted); } .error-box { background: rgba(248,113,113,.12); border: 1px solid rgba(248,113,113,.3); color: #fca5a5; padding: 16px; border-radius: 10px; } /* Alert bar */ .alert-bar { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; } .alert { flex: 1; min-width: 220px; border-radius: 10px; padding: 12px 16px; display: flex; align-items: center; gap: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px; } .alert .big { font-size: 22px; font-weight: 800; } .alert.red { background: rgba(248,113,113,.12); color: #fca5a5; border: 1px solid rgba(248,113,113,.3); } .alert.amber { background: rgba(251,191,36,.12); color: #fcd34d; border: 1px solid rgba(251,191,36,.3); } .alert.green { background: rgba(52,211,153,.12); color: #6ee7b7; border: 1px solid rgba(52,211,153,.3); } /* Result blocks */ .result-block .big-result { font-size: 30px; font-weight: 800; margin: 8px 0 14px; } .rs-lines { display: flex; gap: 10px; } .rs-item { flex: 1; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; } .rs-item .label { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; } .rs-item .val { font-size: 17px; font-weight: 700; margin-top: 2px; } .up { color: var(--green); } .down { color: var(--red); } .today-block .big { font-size: 34px; font-weight: 800; color: var(--green); margin: 10px 0 4px; } /* Resumo cards (clickable filters) */ .resumo-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin: 12px 0 16px; } @media (max-width: 900px) { .resumo-cards { grid-template-columns: repeat(2, 1fr); } } .resumo-card { border: 1px solid var(--line); border-radius: 10px; padding: 12px; cursor: pointer; background: var(--panel-2); text-align: left; transition: border-color .12s, transform .05s; color: var(--ink); } .resumo-card:hover { border-color: var(--accent); } .resumo-card.active { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); } .resumo-card .rc-label { font-size: 12px; color: var(--muted); font-weight: 700; text-transform: uppercase; } .resumo-card .rc-total { font-size: 18px; font-weight: 800; margin-top: 4px; } .resumo-card .rc-count { font-size: 12px; color: var(--muted); } .resumo-card.vencidas .rc-total { color: var(--red); } .resumo-card.pagas .rc-total { color: var(--green); } .resumo-card.semana .rc-total { color: var(--amber); } /* Serviços do dia (corte & barba) */ .servicos-dia { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 12px; } @media (max-width: 900px) { .servicos-dia { grid-template-columns: repeat(3, 1fr); } } .sd-item { border: 1px solid var(--line); border-radius: 10px; padding: 16px; text-align: center; background: var(--panel-2); } .sd-item .sd-num { font-size: 34px; font-weight: 800; color: var(--ink); } .sd-item .sd-label { font-size: 13px; color: var(--muted); font-weight: 600; margin-top: 4px; } .sd-item.sd-total { background: linear-gradient(135deg, var(--panel-2), color-mix(in srgb, var(--accent) 14%, var(--panel-2))); border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); } .sd-item.sd-total .sd-num { color: var(--accent); } /* Ranking de barbeiros */ .ranking-table { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 12px; } .ranking-table th { text-align: left; color: var(--muted); font-size: 12px; text-transform: uppercase; padding: 8px 10px; border-bottom: 2px solid var(--line); } .ranking-table th.num { text-align: right; } .ranking-table td { padding: 9px 10px; border-bottom: 1px solid var(--line); } .ranking-table tr:hover td { background: var(--panel-2); } .ranking-table .rk-pos { font-weight: 800; color: var(--muted); width: 44px; } .ranking-table tr:nth-child(1) .rk-pos { color: var(--accent); } .ranking-table .rk-prod { font-weight: 700; } .ranking-table .rk-receber { font-weight: 700; color: var(--green); } /* Table */ .contas-table { width: 100%; border-collapse: collapse; font-size: 14px; } .contas-table th { text-align: left; color: var(--muted); font-size: 12px; text-transform: uppercase; padding: 8px 10px; border-bottom: 2px solid var(--line); } .contas-table td { padding: 9px 10px; border-bottom: 1px solid var(--line); } .contas-table tr:hover td { background: var(--panel-2); } .tag { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 20px; } .tag.pago { background: rgba(52,211,153,.15); color: #6ee7b7; } .tag.vencida { background: rgba(248,113,113,.15); color: #fca5a5; } .tag.aberta { background: rgba(139,147,161,.15); color: #b3bac6; } .row-vencida td { background: rgba(248,113,113,.06); } /* Bars */ .bars { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; } .bar-row { display: grid; grid-template-columns: 160px 1fr 110px; align-items: center; gap: 10px; font-size: 13px; } .bar-track { background: var(--panel-2); border-radius: 6px; height: 18px; overflow: hidden; } .bar-fill { background: var(--accent); height: 100%; border-radius: 6px; } .bar-val { text-align: right; font-weight: 700; } /* ======= Home ======= */ .home-header { margin-bottom: 18px; } /* Só a primeira letra sobe. `capitalize` deixava "Sexta-Feira, 31 De Julho". */ .home-dia { font-size: 34px; font-weight: 800; } .home-mes { font-size: 15px; color: var(--muted); margin-top: 2px; } .home-dia::first-letter, .home-mes::first-letter { text-transform: uppercase; } .cal-semana { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; margin-top: 14px; } @media (max-width: 900px) { .cal-semana { grid-template-columns: repeat(2, 1fr); } } .cal-dia { border: 1px solid var(--line); border-radius: 10px; padding: 10px; background: var(--panel-2); min-height: 110px; display: flex; flex-direction: column; gap: 6px; } .cal-dia.hoje { border-color: var(--accent); background: var(--accent-soft); } .cal-dia .cd-label { font-size: 11px; color: var(--muted); text-transform: uppercase; font-weight: 700; } .cal-dia .cd-num { font-size: 18px; font-weight: 800; } .cal-dia.hoje .cd-num { color: var(--accent); } .cal-evt { font-size: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 4px 6px; } .cal-evt .ce-hora { color: var(--accent); font-weight: 700; margin-right: 4px; } .cal-evt-empty { font-size: 12px; color: var(--muted); } .cal-mes { margin-top: 14px; } .cal-mes-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; } .cal-mes-dow { font-size: 11px; color: var(--muted); text-transform: uppercase; font-weight: 700; text-align: center; padding-bottom: 4px; } .cal-mes-cell { border: 1px solid var(--line); border-radius: 8px; padding: 6px; min-height: 64px; background: var(--panel-2); font-size: 12px; display: flex; flex-direction: column; gap: 3px; } .cal-mes-cell.fora { opacity: .35; } .cal-mes-cell.hoje { border-color: var(--accent); } .cal-mes-cell .cmc-num { font-weight: 800; } .cal-mes-cell .cmc-evt { background: var(--panel); border-radius: 5px; padding: 1px 4px; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cal-aniversarios { margin-top: 12px; padding: 8px 12px; background: rgba(255, 200, 87, 0.12); border: 1px solid rgba(255, 200, 87, 0.4); border-radius: 8px; font-size: 13px; } .cal-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; border-top: 1px solid var(--line); padding-top: 14px; } .cal-form input[type="text"] { flex: 1; min-width: 180px; } .cal-form input, .cal-form label { background: var(--panel-2); border: 1px solid var(--line); color: var(--ink); border-radius: 8px; padding: 7px 10px; font-size: 13px; font-family: inherit; } .cal-form .cal-allday { display: flex; align-items: center; gap: 6px; } .cal-evt, .cmc-evt { cursor: pointer; } .cal-evt:hover, .cmc-evt:hover { filter: brightness(1.2); } .modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, .55); display: flex; align-items: center; justify-content: center; z-index: 100; } .modal-box { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 24px; max-width: 420px; width: 90%; position: relative; } .modal-close { position: absolute; top: 10px; right: 14px; background: transparent; border: 0; color: var(--muted); font-size: 20px; cursor: pointer; line-height: 1; } .modal-box h3 { margin: 0 18px 6px 0; font-size: 17px; } .modal-field { margin: 8px 0 0; font-size: 14px; } .modal-field strong { color: var(--muted); font-weight: 600; margin-right: 4px; } /* Seletor de mês (páginas de unidade). Rola na horizontal no celular em vez de quebrar em duas fileiras — a barra fica com altura previsível. */ .mes-seletor { display: flex; gap: 6px; margin-bottom: 14px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .mes-seletor::-webkit-scrollbar { display: none; } .mes-btn { flex: 0 0 auto; padding: 7px 13px; border-radius: 999px; cursor: pointer; border: 1px solid var(--line); background: var(--panel-2); color: var(--muted); font-size: 13px; font-weight: 600; text-transform: capitalize; transition: color .15s ease, border-color .15s ease; } .mes-btn.active { color: var(--ink); border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); background: color-mix(in srgb, var(--accent) 14%, var(--panel-2)); } /* Histórico ainda baixando: continua clicável, só avisa que não está pronto. */ .mes-btn.preparando { opacity: .45; font-style: italic; } @media (hover: hover) { .mes-btn:hover { color: var(--ink); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); } } /* Mês em fechamento: ponto âmbar avisando que o número ainda vai mudar. */ .mes-dot { display: inline-block; width: 5px; height: 5px; margin-left: 5px; vertical-align: middle; border-radius: 50%; background: var(--biz-barberchopp); } .mes-aviso { margin-bottom: 14px; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel-2); color: var(--muted); font-size: 13px; } .mes-aviso.provisorio { border-color: color-mix(in srgb, var(--biz-barberchopp) 40%, var(--line)); background: color-mix(in srgb, var(--biz-barberchopp) 8%, var(--panel-2)); } .mes-aviso-dica { display: block; margin-top: 4px; font-size: 12px; opacity: .75; } /* Crescimento mês a mês (Home) — um card por unidade. */ .cresc-cards { display: grid; gap: 10px; margin-top: 12px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } .cresc-card { border: 1px solid var(--line); border-radius: 12px; padding: 14px; background: var(--panel-2); } .cr-nome { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); margin-bottom: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Grade compartilhada pelo cabeçalho e pelas linhas: mês | faturamento | serviços. */ .cr-cab, .cr-linha { display: grid; grid-template-columns: 28px 1fr 1fr; align-items: center; gap: 8px; } .cr-cab { font-size: 10px; color: var(--muted); margin-bottom: 4px; text-transform: uppercase; letter-spacing: .4px; } .cr-linha { padding: 4px 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 45%, transparent); } .cr-linha:last-child { border-bottom: 0; } .cr-mes { font-size: 11px; color: var(--muted); text-transform: capitalize; } /* Curva do faturamento. O SVG é esticado na largura do card (preserveAspectRatio="none"), por isso todo traço precisa de vector-effect — senão a espessura deforma junto. */ .cr-graf { display: block; width: 100%; height: 78px; margin: 2px 0 10px; overflow: visible; } .cr-graf path { vector-effect: non-scaling-stroke; } .cr-area { fill: color-mix(in srgb, var(--biz-barberchopp) 14%, transparent); stroke: none; } .cr-traco { fill: none; stroke: var(--biz-barberchopp); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; } .cr-ponto { stroke: var(--biz-barberchopp); stroke-width: 5; stroke-linecap: round; fill: none; } /* Mês em andamento: tracejado e apagado — ainda não fechou, não conta como tendência. */ .cr-traco.cr-parcial { stroke-dasharray: 4 3; opacity: .55; } .cr-ponto.cr-parcial { opacity: .55; } .cr-val { font-size: 12px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; } .cr-linha.vazia { opacity: .35; } .cr-linha.vazia .cr-val { font-weight: 400; color: var(--muted); } /* Mês em fechamento: o % já vale, mas o número ainda pode subir — daí o ponto no rótulo. */ .cr-linha.provisorio .cr-mes::after { content: ""; display: inline-block; width: 4px; height: 4px; margin-left: 3px; vertical-align: middle; border-radius: 50%; background: var(--biz-barberchopp); } .cr-pct { font-size: 11px; font-weight: 600; font-style: normal; } .cr-pct.up { color: #4ade80; } .cr-pct.down { color: #f87171; } .cr-pct.zero { color: var(--muted); font-weight: 400; } /* Cartões de serviços por unidade (Home). Card cinza neutro, sem cor por unidade — quem carrega a cor é o número, em âmbar. Só o total da rede ganha um destaque a mais para fechar a fileira. */ .unid-cards { display: grid; gap: 10px; margin-top: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .unid-card { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; padding: 14px; background: var(--panel-2); transition: transform .18s ease, border-color .18s ease; } .uc-nome { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); margin-bottom: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .uc-total { font-size: 32px; font-weight: 700; line-height: 1; color: var(--biz-barberchopp); font-variant-numeric: tabular-nums; /* dígito de largura fixa: os cards alinham entre si */ } .uc-detalhe { font-size: 12px; color: var(--muted); margin-top: 6px; } /* Total da rede: mesma cor de número, mas borda e fundo mais fortes pra sobressair. Navegador sem color-mix ignora as duas linhas e fica no cinza padrão acima. */ .unid-card.destaque { border-color: color-mix(in srgb, var(--biz-barberchopp) 40%, var(--line)); background: color-mix(in srgb, var(--biz-barberchopp) 8%, var(--panel-2)); } .unid-card.destaque .uc-nome { color: var(--biz-barberchopp); } .unid-card.vazio { opacity: .5; } .unid-card.vazio .uc-total { color: var(--muted); } /* Dado que não é do dia de hoje: número em cinza, para não ser lido como o número atual. */ .unid-card.desatualizado .uc-total { color: var(--muted); } .unid-card.desatualizado { border-style: dashed; } .aviso-velho { font-size: 12px; color: var(--red); font-weight: 600; } /* Só onde existe mouse — no toque, hover fica "grudado" depois do tap. */ @media (hover: hover) { .unid-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--biz-barberchopp) 40%, var(--line)); } } @media (prefers-reduced-motion: reduce) { .unid-card { transition: none; } .unid-card:hover { transform: none; } } .tarefa-form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .tarefa-form input { flex: 1; background: var(--panel-2); border: 1px solid var(--line); color: var(--ink); border-radius: 8px; padding: 8px 12px; font-size: 14px; font-family: inherit; } /* O texto manda no espaço; a data ocupa só o que precisa. */ .tarefa-form #tarefaInput { flex: 3 1 180px; } .tarefa-form #tarefaData { flex: 0 0 auto; } .tarefa-lista { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-direction: column; gap: 6px; } .tarefa-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); } .tarefa-item.feita { opacity: .5; } .tarefa-item.feita .ta-texto { text-decoration: line-through; } .tarefa-item .ta-texto { flex: 1; font-size: 14px; } .tarefa-item .ta-del { background: transparent; border: 0; color: var(--muted); cursor: pointer; font-size: 16px; padding: 2px 6px; } .tarefa-item .ta-del:hover { color: var(--red); } .ta-tag { font-size: 11px; padding: 2px 8px; border-radius: 999px; white-space: nowrap; border: 1px solid var(--line); color: var(--muted); } .ta-tag.hoje { border-color: var(--accent); color: var(--accent); } .ta-tag.atrasada { border-color: var(--red); color: var(--red); } .tarefa-grupo { list-style: none; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin-top: 10px; } /* Data em que a tarefa foi marcada — substitui a tag de prazo, que já não faz diferença. */ .ta-feita-em { font-size: 11px; color: var(--muted); white-space: nowrap; } /* Histórico do mês, escondido atrás do botão. Mesmo desenho da gaveta de estoque. */ .feitas-wrap { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 12px; } .feitas-wrap .tarefa-lista { margin-top: 10px; } .push-linha { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); } .push-linha .muted { font-size: 12px; } .danger-btn { border-color: var(--red); color: var(--red); } .danger-btn:hover { background: var(--red); color: #fff; } .footer { text-align: center; padding: 18px; } /* Responsivo: sidebar vira topo em telas estreitas */ @media (max-width: 720px) { .app { flex-direction: column; } /* O padding de cima respeita o notch/ilha dinâmica. Sem isso o título fica embaixo do relógio do iPhone, porque o app roda em tela cheia (black-translucent). */ .sidebar { width: 100%; height: auto; position: static; border-right: 0; border-bottom: 1px solid var(--line); padding: calc(env(safe-area-inset-top) + 12px) 14px 12px; gap: 12px; } .sidebar h1 { font-size: 14px; } .sidebar .logo { width: 32px; height: 32px; font-size: 13px; } /* Abas em fila única que rola de lado. Antes quebravam em várias linhas e empurravam o conteúdo pra baixo. Só o ícone aparece — o nome não cabe. */ .source-nav { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; gap: 8px; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .source-nav::-webkit-scrollbar { display: none; } .source-tab { width: auto; flex-shrink: 0; padding: 6px; } .src-name, .src-group, .soon { display: none; } .topbar { padding: 12px 16px; gap: 10px; } .topbar #sourceName { font-size: 16px; } .topbar-right { gap: 8px; } .topbar-right .muted { display: none; } /* "atualizado 16:26:47" come a linha inteira */ main { padding: 14px 14px calc(env(safe-area-inset-bottom) + 32px); } .panel { padding: 14px; } .home-dia { font-size: 22px; } .home-mes { font-size: 13px; } /* Título em cima, botões numa fila que rola. Antes o "+ Novo evento" saía da tela. */ .panel-head { flex-direction: column; align-items: stretch; gap: 10px; } .ph-right { gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; } .ph-right::-webkit-scrollbar { display: none; } .ph-right .ghost-btn { flex-shrink: 0; white-space: nowrap; } /* Tabelas largas rolam de lado dentro do painel, em vez de vazar pra fora dele. */ .ranking-table, .contas-table { display: block; overflow-x: auto; white-space: nowrap; } .cal-semana { grid-template-columns: repeat(2, 1fr); gap: 8px; } .servicos-dia { gap: 8px; } .sd-item { padding: 10px; } .sd-item .sd-num { font-size: 24px; } .result-block .big-result { font-size: 24px; } .today-block .big { font-size: 26px; } .rs-lines { flex-direction: column; } .alert .big { font-size: 18px; } /* Formulário de evento: um campo por linha, largura cheia. */ .cal-form { flex-direction: column; align-items: stretch; } .cal-form input, .cal-form .ghost-btn { width: 100%; } .cal-form input[type="text"] { min-width: 0; } /* Estoque: as 4 colunas fixas não cabem — rolam junto com a linha. */ .loja-editor { overflow-x: auto; } .prod-row { min-width: 460px; } .modal-box { width: calc(100% - 24px); max-height: 85vh; overflow-y: auto; } } /* Login */ .login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; } .login-box { display: flex; flex-direction: column; align-items: center; gap: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 36px 32px; width: 300px; } .login-box .logo { width: 44px; height: 44px; border-radius: 12px; background: var(--accent); color: var(--accent-ink); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; } .login-box h1 { font-size: 17px; text-align: center; } .login-box input { width: 100%; background: var(--panel-2); border: 1px solid var(--line); color: var(--ink); border-radius: 8px; padding: 10px 12px; font-size: 14px; font-family: inherit; } .login-box button { width: 100%; } .login-box .error-box { width: 100%; padding: 10px; font-size: 13px; }