/** * Painel do lojista — mobile-first (ADR-012). * * A operação roda em tablet e celular dentro da loja, muitas vezes com uma mão * só: alvos de toque grandes, navegação fixa no rodapé e contraste alto. */ /* Mesma DM Sans do storefront, servida localmente (SIL OFL 1.1 — licença em `/assets/vendor/fonts/OFL.txt`). Redeclarada aqui porque o painel não carrega `pwa.css`; o navegador baixa o arquivo uma vez só. */ @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 100 1000; font-display: swap; src: url('/assets/vendor/fonts/dm-sans-latin.woff2') format('woff2'); } :root { --painel-bg: #f4f5f7; --painel-header: #1f2937; --painel-touch-min: 48px; --painel-card-radius: .75rem; --painel-card-shadow: 0 1px 2px rgba(16, 24, 40, .06); } .painel-body { font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; background: var(--painel-bg); margin: 0; } /* Shell do painel: sidebar + topbar, mesmo padrão do console `master` (`master.css`), com os tokens de cor/toque do painel. A sidebar vira offcanvas abaixo do breakpoint `md` — em campo (separador/entregador no celular) ela some atrás do botão hambúrguer da topbar. */ .painel-shell { display: flex; min-height: 100vh; } .painel-sidebar { --bs-offcanvas-width: 230px; width: 230px; background: var(--painel-header) !important; color: #fff; border: 0; } .painel-sidebar .painel-sidebar__body { display: flex; flex-direction: column; height: 100%; padding: 1rem .75rem; gap: .25rem; } .painel-sidebar__brand { display: flex; align-items: center; gap: .5rem; font-weight: 600; color: #fff; padding: 0 .5rem 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .painel-sidebar__nav { display: flex; flex-direction: column; gap: .15rem; } .painel-sidebar__grupo-titulo { padding: .5rem .6rem .15rem; font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: rgba(255, 255, 255, .45); } .painel-sidebar__grupo-titulo:first-child { padding-top: 0; } .painel-sidebar__item { display: flex; align-items: center; gap: .6rem; padding: .55rem .6rem; /* Alvo de toque grande mesmo dentro do shell novo (ADR-012): quem opera pelo celular continua tocando com o polegar, sem mirar. */ min-height: var(--painel-touch-min); border-radius: .5rem; color: rgba(255, 255, 255, .75); text-decoration: none; } .painel-sidebar__item:hover { background: rgba(255, 255, 255, .08); color: #fff; } /* Quantidade pendente (Pedido/Despacho/Retirada, ver `filaCounts` no `PainelBaseController`) — só aparece quando > 0, mesmo padrão de "some quando não há nada" da tarja de carrinho do storefront. */ .painel-sidebar__contador { margin-left: auto; min-width: 1.35rem; padding: .1rem .4rem; border-radius: 999px; background: rgba(255, 255, 255, .18); color: #fff; font-size: .75rem; font-weight: 700; text-align: center; line-height: 1.3; } .painel-sidebar__item.is-active .painel-sidebar__contador { background: rgba(255, 255, 255, .3); } /* Cor de marca da loja, não uma cor fixa: o painel é multi-tenant e `--tenant-theme-color` já é setada por request no `` do layout. */ .painel-sidebar__item.is-active { background: var(--tenant-theme-color); color: #fff; } .painel-sidebar__footer { margin-top: auto; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, .1); display: flex; flex-direction: column; gap: .5rem; } .painel-sidebar__papel { display: inline-flex; align-self: flex-start; align-items: center; padding: .15rem .6rem; border-radius: 999px; background: #fff; color: var(--painel-header); font-size: .75rem; font-weight: 600; } .painel-sidebar__usuario { display: inline-flex; align-items: center; gap: .35rem; font-size: .875rem; color: rgba(255, 255, 255, .75); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .painel-content { flex: 1; min-width: 0; } /* Breadcrumb da rota, agora dentro do conteúdo (antes ficava no topbar, que passou a exibir o nome fantasia da loja). Divisor e cor discretos — quem identifica a tela é o `

` de cada view logo abaixo, isto aqui é só contexto de "onde estou". */ .painel-breadcrumb { margin-top: .75rem; } .painel-breadcrumb .breadcrumb { --bs-breadcrumb-divider: '/'; font-size: .8125rem; } .painel-breadcrumb .breadcrumb-item, .painel-breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: #9ca3af; } .painel-breadcrumb .breadcrumb-item.active { color: var(--tenant-theme-color); font-weight: 600; } /* Topbar escura, não branca como no `master`: é a decisão de alto contraste do ADR-012 (operação de pé, no balcão) — abandonar isso junto com a barra fixa do rodapé não fazia sentido. */ .painel-topbar { display: flex; align-items: center; gap: .75rem; padding: .6rem .75rem; background: var(--painel-header); color: #fff; } .painel-topbar__titulo { font-size: 1.0625rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .painel-topbar .navbar-toggler { --bs-navbar-toggler-padding-y: .25rem; --bs-navbar-toggler-padding-x: .75rem; --bs-navbar-toggler-font-size: 1.25rem; --bs-navbar-toggler-border-color: rgba(255, 255, 255, .3); --bs-navbar-toggler-border-radius: .375rem; --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); } /* Alerta de permissão de notificação: ícone, texto e o botão que pede a permissão na mesma faixa, quebrando para baixo no celular. */ .painel-push-alerta { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .5rem; font-size: .9375rem; font-weight: 600; } .painel-push-alerta box-icon { flex-shrink: 0; } .painel-main { max-width: 720px; margin: 0 auto; } /* Visual de card do console `master` (raio + sombra sutil), propagado pra todo card/lista do painel — pedido (`.painel-card`), grupos de produto, indicadores de relatório etc. — sem editar view por view. */ .painel-content .card, .painel-content .list-group { border-radius: var(--painel-card-radius); box-shadow: var(--painel-card-shadow); border-color: #e5e7eb; overflow: hidden; } /* Card com um dropdown de busca (posicionado `absolute`) dentro: o `overflow: hidden` acima existe pra arredondar cantos, mas também corta o dropdown quando ele estoura a altura do card — some ou fica com o topo cortado. Esse card específico abre mão do corte. Especificidade igual à regra acima (duas classes) pra garantir que ela vença. */ .painel-content .card.painel-card--overflow-visible { overflow: visible; } .painel-stat-card { display: flex; align-items: center; gap: .75rem; background: #fff; border-radius: var(--painel-card-radius); box-shadow: var(--painel-card-shadow); padding: 1rem; color: var(--tenant-theme-color); } .painel-stat-card__label { font-size: .8125rem; color: #6b7280; } .painel-stat-card__value { font-size: 1.5rem; font-weight: 600; color: #111827; } /* Carrossel de páginas de configurações (topo de /painel/gerente/configuracoes), mesmo padrão visual do carrossel de categorias do storefront: arrasta com o dedo, sem setas, e a página aberta ganha borda destacada. */ .config-tabs { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 10px; scroll-snap-type: x proximity; } .config-tabs__item { flex: 0 0 auto; width: 84px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-decoration: none; scroll-snap-align: start; } .config-tabs__icon { width: 56px; height: 56px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); border: 2.5px solid transparent; } .config-tabs__item.is-active .config-tabs__icon { border-color: #0d6efd; } .config-tabs__label { max-width: 100%; font-size: .72rem; font-weight: 500; text-align: center; color: #212529; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Sub-navegação interna de 2 abas (ex.: Produtos > Quantidade Mínima/Imagens, `_produtos_tabs.php`): controle segmentado, não o carrossel de ícone-círculo acima — com só 2 opções, lado a lado dentro de uma trilha só deixa óbvio que são duas abas do mesmo grupo, e o segmento "aceso" (fundo branco + sombra + cor do tenant) deixa claro qual delas está ativa e é dona do conteúdo logo abaixo. */ .painel-subtabs { display: flex; gap: 4px; background: #f1f3f5; border-radius: .625rem; padding: 4px; } .painel-subtabs__item { flex: 1; display: flex; align-items: center; justify-content: center; gap: .375rem; min-height: var(--painel-touch-min); padding: .5rem .75rem; border-radius: .5rem; text-decoration: none; font-size: .8125rem; font-weight: 500; color: #6b7280; text-align: center; } .painel-subtabs__item.is-active { background: #fff; color: var(--tenant-theme-color); font-weight: 600; box-shadow: 0 1px 2px rgba(16, 24, 40, .08); } /* Prévia do último broadcast de marketing (tela "Marketing"), no visual de uma notificação push do Android: cartão escuro arredondado, ícone da loja + nome no topo, título em destaque, corpo e imagem grande opcional — o Gerente reconhece de cara o que os clientes vão ver no celular. */ .push-preview { background: #202124; color: #e8eaed; border-radius: 18px; padding: 12px 14px; max-width: 420px; } .push-preview__head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .push-preview__icon { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; background: #fff; } .push-preview__icon--placeholder { display: flex; align-items: center; justify-content: center; font-size: .85rem; background: #3c4043; } .push-preview__app { font-size: .75rem; color: #bdc1c6; } .push-preview__time { font-size: .75rem; color: #9aa0a6; } .push-preview__title { font-size: .95rem; font-weight: 600; line-height: 1.3; } .push-preview__body { font-size: .85rem; color: #bdc1c6; line-height: 1.35; margin-top: 2px; } .push-preview__image { display: block; width: 100%; max-height: 200px; object-fit: cover; border-radius: 10px; margin-top: 10px; } .painel-card { border-left: 4px solid #adb5bd; } .painel-card[data-status="em_separacao"] { border-left-color: #ffc107; } /* Do faturamento em diante o card não leva mais faixa lateral: a barra azul competia com o badge de status e com a ação em cor de marca, sem dizer nada que os dois já não dissessem. */ .painel-card[data-status="faturado"], .painel-card[data-status="despachado"], .painel-card[data-status="pronto_retirada"] { border-left: 0; } .painel-card__itens { font-size: .78rem; } .painel-card__itens summary { cursor: pointer; font-weight: 600; } .painel-card__itens-titulo { color: var(--tenant-theme-color); } .painel-card__itens-resumo { font-weight: 400; color: #6c757d; white-space: nowrap; } .painel-card__itens-qtd { color: var(--tenant-theme-color); font-weight: 600; } .painel-card__itens ul { padding-left: 1.1rem; margin-top: .35rem; color: #6c757d; } /* Item que não foi para a sacola: continua na lista (o cliente pediu), mas riscado, para a conferência do despacho não confundir com o que saiu. */ .painel-card__itens-falta { text-decoration: line-through; opacity: .7; } .painel-card__itens-tag { margin-left: .25rem; font-size: .72rem; font-weight: 600; text-decoration: none; color: #b02a37; } .painel-acao { min-height: var(--painel-touch-min); } /* Ação principal na cor da loja (`--tenant-theme-color`, vinda de `configuracoes.cor_primaria`), em vez do azul do Bootstrap. */ .painel-acao--marca { background: var(--tenant-theme-color, #0d6efd); border: 1px solid var(--tenant-theme-color, #0d6efd); color: #fff; font-weight: 600; } .painel-acao--marca:hover, .painel-acao--marca:focus, .painel-acao--marca:active { background: var(--tenant-theme-color, #0d6efd); border-color: var(--tenant-theme-color, #0d6efd); color: #fff; filter: brightness(.92); } .painel-acao--marca:disabled { background: var(--tenant-theme-color, #0d6efd); border-color: var(--tenant-theme-color, #0d6efd); color: #fff; opacity: .55; } /* Duas ações de peso igual na mesma linha (card do Entregador: relatar frustrada e confirmar). `flex: 1 1 0` e não `.flex-fill`: com base `auto` o botão de texto mais longo ficaria maior que o outro. */ .painel-card__acoes-duplas > .btn, .painel-card__atalhos > .btn { flex: 1 1 0; min-width: 0; } .painel-card__acoes-duplas > .btn { min-height: var(--painel-touch-min); font-size: .9375rem; line-height: 1.2; } /* Atalhos de contato (WhatsApp/Maps): ícone e rótulo centralizados. O rótulo do Maps é longo e quebra em duas linhas no celular — os dois botões crescem juntos porque a linha é `align-items: stretch` por padrão. */ .painel-card__atalhos > .btn { display: inline-flex; align-items: center; justify-content: center; gap: .25rem; line-height: 1.2; text-align: center; } .painel-vazio { color: #6c757d; } /* Login isolado: sem navegação nem cabeçalho da operação. */ .painel-login { position: relative; display: flex; justify-content: center; min-height: 100vh; /* Logo perto do topo, não no centro morto da tela — a ilustração é quem ocupa a metade de baixo (modelo-login.png). */ padding: 6vh 1rem 1rem; overflow-x: hidden; /* Sobrepõe o cinza padrão do painel (`--painel-bg`) só aqui — o modelo é em branco. */ background: #fff; } /* ------------------------------------------------------------------ Telas de login (painel + storefront) — modelo `docs/ilustracoes/ modelo-login.png`: logo no topo, campos sublinhados (sem caixa), botão em pílula na cor da loja, ilustração colada no rodapé. Classes `.auth-*` espelhadas em `pwa.css` com o mesmo nome — mesma linguagem visual, cada stylesheet com sua cópia porque as duas telas nunca carregam o mesmo arquivo CSS. ------------------------------------------------------------------ */ .auth-link-funcionario { position: fixed; top: 1rem; right: 1rem; z-index: 2; font-size: .75rem; color: #9aa0a8; text-decoration: underline; } .auth-conteudo { position: relative; /* Acima da ilustração de fundo — `z-index` sozinho não bastaria sem `position` num elemento fixed/absolute concorrente. */ z-index: 1; width: 100%; max-width: 380px; } .auth-logo { display: flex; justify-content: center; margin-bottom: .5rem; } /* A logo é o caminho de volta pro storefront — o link envolve a imagem sem mudar o desenho da tela. */ .auth-logo__link { display: inline-flex; text-decoration: none; color: inherit; } .auth-logo img { max-height: 128px; max-width: 440px; object-fit: contain; } .auth-logo__texto { font-size: 1.25rem; font-weight: 700; color: var(--painel-header); } .auth-legenda { text-align: center; font-size: .8rem; color: #9aa0a8; margin-bottom: 2rem; } .auth-field { position: relative; margin-bottom: 1.75rem; } .auth-field__label { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #9aa0a8; margin-bottom: .35rem; } .auth-field__input { display: block; width: 100%; border: none; border-bottom: 2px solid #e5e7eb; background: transparent; padding: .3rem 0 .55rem; font-size: 1.05rem; color: #1f2937; border-radius: 0; } .auth-field__input:focus { outline: none; border-bottom-color: var(--auth-accent, #1f2937); } /* Espaço reservado pro olho de mostrar/ocultar não empurrar o texto. */ .auth-field--senha .auth-field__input { padding-right: 2rem; } .auth-field__toggle { position: absolute; right: 0; bottom: .6rem; background: none; border: none; padding: 0; line-height: 1; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--auth-accent, #6b7280); cursor: pointer; } .auth-button { display: block; width: 100%; margin-top: .5rem; padding: .9rem 1rem; border: none; border-radius: 999px; background: var(--auth-accent, var(--auth-accent, #1f2937)); color: #fff; font-weight: 700; font-size: .95rem; letter-spacing: .02em; text-transform: uppercase; cursor: pointer; transition: opacity .15s ease, transform .05s ease; } .auth-button:hover { opacity: .92; } .auth-button:active { transform: scale(.99); } .auth-links { text-align: center; font-size: .85rem; color: #6b7280; margin-top: 1.5rem; } .auth-links a { color: var(--auth-accent, var(--auth-accent, #1f2937)); font-weight: 600; text-decoration: none; } /* Decorativa: colada no rodapé da tela, sem disputar clique/toque com o formulário. Em telas largas fica encostada à direita, do tamanho da própria imagem; em telas estreitas vira uma faixa ocupando a largura inteira, mais baixa para não engolir a área de toque do formulário. O `translateY(30%)` afunda 30% da altura da imagem para fora da tela; como o elemento é `fixed`, o transbordo não gera barra de rolagem. */ .painel-login__ilustracao { position: fixed; right: 0; bottom: 0; z-index: 0; max-width: 50%; max-height: 70vh; width: auto; height: auto; transform: translateY(30%); pointer-events: none; user-select: none; } @media (max-width: 700px) { .painel-login__ilustracao { left: 0; right: 0; width: 100%; max-width: 100%; max-height: 32vh; object-fit: cover; object-position: top; } } /* Prévia das cores da loja na tela de Configurações. As variáveis são escritas inline pela view e atualizadas ao vivo pelo JS da tela. */ .painel-cor-previa__topo { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .625rem .75rem; border-radius: .5rem; background: var(--previa-primaria, #0d6efd); color: #fff; font-size: .875rem; } .painel-cor-previa__acento { display: inline-flex; align-items: center; padding: .25rem .625rem; border-radius: 1rem; background: var(--previa-secundaria, #6c757d); } .painel-logo-previa { width: 56px; height: 56px; object-fit: contain; border-radius: .5rem; background: #f8f9fa; padding: 4px; } /* Resultados da busca de produto (edição de promoção) — flutua sobre o conteúdo abaixo em vez de empurrar o layout. */ .painel-busca-resultados { position: absolute; top: 100%; z-index: 5; left: 0; right: 0; margin-top: .25rem; max-height: 240px; overflow-y: auto; border-radius: .375rem; box-shadow: 0 4px 10px rgba(0, 0, 0, .12); } .painel-banner-previa { width: 72px; height: 44px; object-fit: cover; border-radius: .375rem; background: #f8f9fa; flex-shrink: 0; } .min-width-0 { min-width: 0; } /* Bolinha de status na lista "Pedidos do período" (relatórios do Gerente) — mesma cor do badge (`OrderStatusBadgeCell`), aplicada como `background` via classe `bg-*` do Bootstrap ou pela cor própria de "Itens separados". */ .painel-status-dot { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; margin-right: .4rem; } /* "Itens separados" (`faturado`): cor exclusiva desse estado. O Bootstrap já gastou verde no que terminou (entregue/retirado), azul no que está em rota, amarelo na separação em andamento e vermelho no cancelado — sobreporia dois momentos bem diferentes do pedido na mesma cor. Vale para o badge e para a bolinha, que compartilham a classe. */ .painel-badge-separado { background-color: #6f42c1; color: #fff; }