/* public/css/pele-apple.css ══════════════════════════════════════════════════════════════════════════════════════ A pele "app da Apple" do ADMIN (dono e equipe). Aprovada pelo revisor externo (ChatGPT) em 20/10/2026: visual 9,2/10 em 4 rodadas e microinterações 9,1/10 em 2 — histórico e prints em docs/superpowers/specs/2026-10-20-layout-organizacao-inspirado-martz-design.md e no userscript que serviu de protótipo (docs/layout/aecux-etapa1.user.js). Regras de casa: - Tudo mora sob :root[data-area="admin"]. O painel do CLIENTE final não muda aqui — ele só ganha pele nova com o Biel confirmando (PROJECT_STATE, 27/09/2026). - Cor só por token (tokens.css). Os tokens novos (--marca-*, --lateral-*, --fundo-ok…) têm valor nos dois temas, e é isso que deixa o ESCURO coerente sem uma linha a mais aqui. - Os cinzas de texto são os que passam 4,5:1 (texto-3/4/5). O revisor pediu #7C8088 e #8A8F98 para microtexto; os dois reprovam em contraste e ficaram de fora de propósito. ══════════════════════════════════════════════════════════════════════════════════════ */ /* ── tipografia ─────────────────────────────────────────────────────────────────────── */ :root[data-area="admin"] body{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Inter,sans-serif;letter-spacing:-.003em} :root[data-area="admin"] .kpi-val,:root[data-area="admin"] .g-seg-v, :root[data-area="admin"] .c2-tbl,:root[data-area="admin"] .vg-op .v{font-variant-numeric:tabular-nums} :root[data-area="admin"] ::selection{background:color-mix(in srgb,var(--acento) 18%,transparent)} /* ── menu lateral: barra do macOS (clara e translúcida no claro; a moldura no escuro) ── */ :root[data-area="admin"] .sidebar{background:var(--lateral);-webkit-backdrop-filter:saturate(180%) blur(24px);backdrop-filter:saturate(180%) blur(24px); border-right:1px solid var(--lateral-linha)} :root[data-area="admin"] .side-brand b,:root[data-area="admin"] .side-foot .who b{color:var(--lateral-texto)} :root[data-area="admin"] .side-brand span,:root[data-area="admin"] .side-foot .who span{color:var(--lateral-texto-2)} :root[data-area="admin"] .sidebar .nav-item{color:var(--lateral-texto);min-height:38px;border-radius:var(--raio-controle);font-size:14px;font-weight:500} :root[data-area="admin"] .sidebar .nav-item svg{color:var(--lateral-icone);width:18px;height:18px;stroke-width:1.75} :root[data-area="admin"] .sidebar .nav-item:hover{background:var(--lateral-hover);color:var(--lateral-texto)} :root[data-area="admin"] .sidebar .nav-item:active{background:color-mix(in srgb,var(--lateral-texto) 8%,transparent)} :root[data-area="admin"] .sidebar .nav-item.on{background:var(--lateral-ativo);color:var(--lateral-texto);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.06)} :root[data-area="admin"] .sidebar .nav-item.on svg{color:var(--lateral-icone)} :root[data-area="admin"] .sidebar .nav-pill{background:var(--fundo-erro);color:var(--erro-texto)} /* rótulo de grupo (Acompanhar · Agir · Conta): texto, então --lateral-texto-2, que passa 4,5:1 */ :root[data-area="admin"] .nav-grupo{display:block;font-size:11.5px;font-weight:600;color:var(--lateral-texto-2,var(--moldura-texto-2));margin:14px 12px 4px;pointer-events:none;user-select:none} :root[data-area="admin"] .nav-grupo:first-child{margin-top:2px} :root[data-area="admin"] .side-foot{border-top:1px solid var(--lateral-linha);gap:6px} :root[data-area="admin"] .side-foot .who{min-width:0;flex:1} :root[data-area="admin"] .avatar{background:color-mix(in srgb,var(--lateral-texto) 10%,transparent);color:var(--lateral-texto)} :root[data-area="admin"] .sidebar .icon-btn{color:var(--lateral-texto-2);width:28px;height:28px;flex:0 0 28px} :root[data-area="admin"] .sidebar .icon-btn:hover{background:var(--lateral-hover);color:var(--lateral-texto)} /* o tema do admin mora no rodapé do menu (index.html · .btn-tema-lateral); o do cabeçalho é do cliente */ :root[data-area="admin"] .header #btn-tema{display:none} /* ── cabeçalho: barra de ferramentas translúcida, título grande ──────────────────────── */ :root[data-area="admin"] .header{background:var(--vidro);border-bottom:1px solid var(--linha);min-height:76px;padding:14px 32px} :root[data-area="admin"] .h-title{font-size:28px;line-height:34px;font-weight:700;letter-spacing:-.022em;color:var(--texto)} :root[data-area="admin"] .h-sub{font-size:13px;line-height:19px;color:var(--texto-4)} :root[data-area="admin"] .btn-back,:root[data-area="admin"] .btn-menu, :root[data-area="admin"] .det-rel-b,:root[data-area="admin"] .hdr-sino{height:34px;border-radius:var(--raio-controle); background:var(--superficie);border:1px solid var(--controle-linha);color:var(--texto);font-weight:500;box-shadow:none} :root[data-area="admin"] .btn-back:hover,:root[data-area="admin"] .btn-menu:hover, :root[data-area="admin"] .det-rel-b:hover{background:var(--fundo)} /* ── página: margem 32, blocos 24, cartões 16 ───────────────────────────────────────── */ :root[data-area="admin"] .wrap{padding:24px 32px 64px} :root[data-area="admin"] main .scroll{scrollbar-gutter:stable} /* a barra de rolagem não empurra a página quando o conteúdo chega */ :root[data-area="admin"] .per-tira{font-size:13px;color:var(--texto-4)} /* ── abas de conteúdo (detalhe e Visão Geral): 42px, 14/500, ativa 600 com traço de 2px ── */ :root[data-area="admin"] .vg-abas,:root[data-area="admin"] .cli-abas{border-bottom:1px solid var(--linha); background:color-mix(in srgb,var(--fundo) 92%,transparent);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);margin:-4px 0 0} :root[data-area="admin"] .cli-aba{height:42px;padding:0 14px;font-size:14px;font-weight:500;color:var(--texto-4)} :root[data-area="admin"] .cli-aba.on{color:var(--texto);font-weight:600} :root[data-area="admin"] .cli-aba.on::after{background:var(--acento)!important;height:2px!important} :root[data-area="admin"] .cli-aba:hover{color:var(--texto)} /* sub-abas da Visão Geral (visao-geral.js · vgAbas) */ :root[data-area="admin"] .vg-abas{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;position:sticky;top:0;z-index:4} :root[data-area="admin"] .vg-abas::-webkit-scrollbar{display:none} :root[data-area="admin"] .vg-abas button{appearance:none;background:none;border:0;border-bottom:2px solid transparent;height:42px;padding:0 14px; font:inherit;font-size:14px;font-weight:500;color:var(--texto-4);cursor:pointer;white-space:nowrap;margin-bottom:-1px} :root[data-area="admin"] .vg-abas button:hover{color:var(--texto)} :root[data-area="admin"] .vg-abas button[aria-selected="true"]{color:var(--texto);font-weight:600;border-bottom-color:var(--acento)} :root[data-area="admin"] .vg-fora{display:none!important} :root[data-area="admin"] .vg-solo{grid-column:1/-1} /* ── gramática única de superfície ──────────────────────────────────────────────────── */ :root[data-area="admin"] .card,:root[data-area="admin"] .kpi{background:var(--superficie); border:1px solid var(--linha);border-radius:var(--raio-cartao);box-shadow:var(--sombra-cartao)} :root[data-area="admin"] .card{padding:24px} :root[data-area="admin"] .kpi{padding:20px;box-shadow:0 2px 8px rgba(28,31,38,.03);gap:0} :root[data-area="admin"] .card-t{font-size:16px;line-height:22px;font-weight:650;letter-spacing:-.01em;color:var(--texto)} :root[data-area="admin"] .g-cab,:root[data-area="admin"] .card-h{margin-bottom:16px} :root[data-area="admin"] .g-resp-s,:root[data-area="admin"] .kpi-sub,:root[data-area="admin"] .hj-ics, :root[data-area="admin"] .vg-saude-leg,:root[data-area="admin"] .card-h p,:root[data-area="admin"] .card-s{font-size:13px;line-height:19px;color:var(--texto-4)} :root[data-area="admin"] .vg-op{background:var(--superficie-2);border:0;border-radius:var(--raio-controle)} :root[data-area="admin"] .empty{color:var(--texto-4);font-size:13px;padding:32px 16px} /* ── KPI: o número domina, a variação contextualiza ──────────────────────────────────── */ :root[data-area="admin"] .kpi-top{font-size:13px;font-weight:600;color:var(--texto-3)} :root[data-area="admin"] .kpi-val{font-size:36px;line-height:40px;font-weight:700;letter-spacing:-.025em;color:var(--texto);margin-top:12px} :root[data-area="admin"] .kpi-cmp{font-size:13px;color:var(--texto-4);margin-top:12px} :root[data-area="admin"] .kpi-sub{font-size:12px;color:var(--texto-5);margin-top:4px} :root[data-area="admin"] .kpi .badge{background:color-mix(in srgb,currentColor 9%,var(--superficie))} :root[data-area="admin"] .kpi .hj-ics{order:6;margin-top:10px} /* ── status: uma cor sóbria por significado, sempre com palavra ──────────────────────── */ :root[data-area="admin"] .badge,:root[data-area="admin"] .g-pil{height:24px;display:inline-flex;align-items:center;border-radius:8px; padding:0 9px;font-size:12px;font-weight:600;border:0} :root[data-area="admin"] .g-pil-mal{background:var(--fundo-erro);color:var(--erro-texto)} :root[data-area="admin"] .g-pil-atencao{background:var(--fundo-atencao);color:var(--atencao-texto)} :root[data-area="admin"] .g-pil-bom{background:var(--fundo-ok);color:var(--ok-texto)} /* ── velocímetro: arco contínuo (graficos.js · gSegmentos) ───────────────────────────── */ :root[data-area="admin"] .g-seg .g-arco-trilha{stroke:var(--marca-trilha,var(--linha))} :root[data-area="admin"] .g-seg .g-antes{stroke:var(--marca-antes,var(--texto-3))} :root[data-area="admin"] svg.g-seg .g-seg-v{font-size:34px;font-weight:700;letter-spacing:-.03em;fill:var(--texto)} :root[data-area="admin"] svg.g-seg .g-seg-s{font-size:12px;fill:var(--texto-4)} :root[data-area="admin"] .vg-gg{background:var(--superficie);border:1px solid var(--linha-suave);border-radius:14px;box-shadow:none;padding:18px 22px 16px;cursor:pointer} :root[data-area="admin"] .vg-gg:hover{border-color:var(--controle-linha);box-shadow:0 4px 14px rgba(28,31,38,.06)} :root[data-area="admin"] .vg-gg .lk-ics{display:inline-flex;gap:6px} :root[data-area="admin"] .vg-gg .lk-ic{color:var(--texto-5)} :root[data-area="admin"] .vg-gg .lk-ic:hover{color:var(--texto-3)} :root[data-area="admin"] .vg-gg .lk-ic svg{width:11px;height:11px} :root[data-area="admin"] .vg-gg .g-pil{margin-top:2px} :root[data-area="admin"] .vg-gn{font-size:14px;font-weight:600;color:var(--texto);margin-top:6px} :root[data-area="admin"] .vg-ga{font-size:12px;color:var(--texto-5)} :root[data-area="admin"] .g-leg-antes{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:500;color:var(--texto-5);margin-left:10px;white-space:nowrap} :root[data-area="admin"] .g-leg-antes i{display:inline-block;width:3px;height:10px;border-radius:2px;background:var(--marca-antes,var(--texto-3))} /* ── "Precisam de atenção" (visao-geral.js · vgAtencao) ──────────────────────────────── */ :root[data-area="admin"] .vg-atencao{padding:16px 20px} :root[data-area="admin"] .vg-atencao .vg-at-cab{display:flex;align-items:center;gap:8px;margin-bottom:2px} :root[data-area="admin"] .vg-atencao .g-resp-s{margin:0 0 10px} :root[data-area="admin"] .vg-at-lista{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))} :root[data-area="admin"] .vg-at-loja{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;width:100%;text-align:left;padding:10px 12px; border:0;border-radius:12px;background:var(--superficie-2);font:inherit;color:var(--texto);cursor:pointer} :root[data-area="admin"] .vg-at-loja:hover{background:color-mix(in srgb,var(--texto) 5%,var(--superficie-2))} :root[data-area="admin"] .vg-at-loja b{font-size:14px;font-weight:600} :root[data-area="admin"] .vg-at-vazio{font-size:13px;color:var(--ok-texto)} /* ── seletor de loja do gráfico: controle segmentado que rola em vez de espremer ─────── */ :root[data-area="admin"] .vg-chips{display:inline-flex;flex-wrap:nowrap;gap:2px;max-width:100%;overflow-x:auto;scrollbar-width:none; height:36px;align-items:center;background:var(--controle-fundo);padding:3px;border-radius:var(--raio-controle);margin-top:-4px} :root[data-area="admin"] .vg-chips::-webkit-scrollbar{display:none} :root[data-area="admin"] .vg-chip{flex:0 0 auto;border:0!important;background:transparent;border-radius:8px;height:30px;padding:0 10px; font-size:12px;font-weight:500;color:var(--texto-2);white-space:nowrap} :root[data-area="admin"] .vg-chip span{font-size:11px} :root[data-area="admin"] .vg-chip.on{background:var(--superficie)!important;color:var(--texto)!important;box-shadow:0 1px 2px rgba(0,0,0,.08)} :root[data-area="admin"] .vg-chip:not(.on):hover{background:color-mix(in srgb,var(--superficie) 65%,transparent)} :root[data-area="admin"] .c2-chip.on,:root[data-area="admin"] .dsub-b.on{background:var(--acento);border-color:var(--acento);color:var(--sobre-preenchimento)} /* ── gráfico de venda: o dado é o protagonista (estilo Ações) ────────────────────────── */ :root[data-area="admin"] #vg-tend svg polyline[stroke="var(--serie-1)"],:root[data-area="admin"] #vg-tend svg path[stroke="var(--serie-1)"]{stroke-width:2.25} :root[data-area="admin"] #vg-tend svg [stroke="var(--serie-2)"]{stroke:var(--texto-5);stroke-width:1.5;stroke-dasharray:5 5;opacity:.7} :root[data-area="admin"] #vg-tend svg [fill^="url(#vg-area"]{opacity:.18} :root[data-area="admin"] #vg-tend svg rect[fill="var(--superficie-2)"]{fill:color-mix(in srgb,var(--superficie-2) 60%,var(--superficie))} :root[data-area="admin"] #vg-tend svg circle[r="4.5"]{r:5px;stroke:var(--superficie);stroke-width:2} :root[data-area="admin"] #vg-tend svg line[stroke="var(--texto)"],:root[data-area="admin"] #vg-tend svg line[stroke="var(--texto-3)"]{stroke:var(--controle-linha)} :root[data-area="admin"] svg line[stroke="var(--linha)"]{stroke:var(--linha-suave)} /* dica do gráfico: superfície do sistema; a anotação do pico some enquanto a dica está aberta */ :root[data-area="admin"] .g-tip{background:var(--superficie);color:var(--texto);border:1px solid var(--linha);border-radius:12px;padding:12px;box-shadow:0 6px 24px rgba(0,0,0,.07)} :root[data-area="admin"] .g-area text.g-rot{transition:opacity .12s} :root[data-area="admin"] .g-area:has(.g-tip[style*="opacity: 1"]) text.g-rot{opacity:0} /* ── "Como ler": atrás de um botão (graficos.js · gCard) ─────────────────────────────── */ :root[data-area="admin"] .g-comoler{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-size:13px;font-weight:500;color:var(--acento-texto); background:none;border:0;padding:0;cursor:pointer} :root[data-area="admin"] .g-comoler:hover{color:var(--acento-forte)} :root[data-area="admin"] .g-comoler[aria-expanded="true"]{color:var(--texto)} :root[data-area="admin"] .g-comoler svg{width:15px;height:15px} :root[data-area="admin"] .g-como.aberto{animation:peleFade .18s ease-out;margin-top:10px} /* ── Operações ─────────────────────────────────────────────────────────────────────── */ :root[data-area="admin"] .hero{background:var(--superficie);color:var(--texto);border:1px solid var(--linha);border-radius:var(--raio-cartao); box-shadow:var(--sombra-cartao);min-height:76px;padding:16px 20px} :root[data-area="admin"] .hero b{color:var(--texto)} :root[data-area="admin"] .hero span{color:var(--texto-4)} :root[data-area="admin"] .hero button{background:var(--superficie-2);color:var(--acento-texto);border:0;height:34px;border-radius:9px;box-shadow:none} :root[data-area="admin"] .hero button:hover{background:color-mix(in srgb,var(--texto) 6%,var(--superficie-2))} :root[data-area="admin"] .alert-card{background:var(--superficie);border:0;border-bottom:1px solid var(--linha-suave);border-radius:0;box-shadow:none;margin:0; min-height:72px;padding:16px 20px;display:flex;align-items:center;gap:16px} :root[data-area="admin"] .alert-card:last-child{border-bottom:0} :root[data-area="admin"] .alert-card .dot{display:none} /* o chip "Crítico/Atenção" já diz a gravidade */ :root[data-area="admin"] .alert-card .top b{font-size:14px;font-weight:600} :root[data-area="admin"] .alert-card .msg{font-size:13px;color:var(--texto-4);max-width:740px;display:block;margin-top:2px} :root[data-area="admin"] .alert-card .alert-time{flex:0 0 96px;text-align:right;font-size:12px;color:var(--texto-5)} :root[data-area="admin"] .btn-soft{height:34px;padding:0 14px;border-radius:9px;background:var(--superficie-2);font-weight:600;border:0} :root[data-area="admin"] .alert-card .btn-soft{margin-left:16px} :root[data-area="admin"] .btn-soft:hover{background:color-mix(in srgb,var(--texto) 6%,var(--superficie-2))} :root[data-area="admin"] .act{border-radius:var(--raio-controle);border:1px solid var(--controle-linha);background:var(--superficie);height:34px;font-weight:500} :root[data-area="admin"] .act:hover{background:var(--fundo)} :root[data-area="admin"] .act.blue{background:var(--acento);border-color:var(--acento);color:var(--sobre-preenchimento)} :root[data-area="admin"] .act.blue:hover{background:var(--acento-forte)} :root[data-area="admin"] .act:disabled{background:var(--superficie-2);color:var(--texto-5);border-color:var(--linha-suave);cursor:not-allowed;transform:none} :root[data-area="admin"] .act-sep{flex-basis:100%;font-size:12px;font-weight:600;color:var(--texto-5);margin:10px 0 2px} /* ── menus suspensos como menu do macOS ─────────────────────────────────────────────── */ :root[data-area="admin"] .det-rel-m,:root[data-area="admin"] .lj-pop{border:1px solid color-mix(in srgb,var(--texto) 8%,transparent); border-radius:12px;box-shadow:0 10px 32px rgba(28,31,38,.14);animation:peleMenu .14s var(--curva-sistema)} :root[data-area="admin"] .det-rel-m{padding:6px;background:color-mix(in srgb,var(--superficie) 96%,transparent);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)} :root[data-area="admin"] .det-rel-m button{border-radius:7px;font-size:13px;color:var(--texto)} :root[data-area="admin"] .det-rel-m button:hover{background:var(--acento);color:var(--sobre-preenchimento)} /* ── campos no mesmo padrão dos controles ───────────────────────────────────────────── */ :root[data-area="admin"] .wrap select,:root[data-area="admin"] .wrap input[type="text"],:root[data-area="admin"] .wrap input[type="number"], :root[data-area="admin"] .wrap input[type="email"],:root[data-area="admin"] .wrap input[type="date"],:root[data-area="admin"] .wrap input[type="search"], :root[data-area="admin"] .wrap input[type="tel"]{min-height:36px;border-radius:var(--raio-controle);border:1px solid var(--controle-linha); background-color:var(--superficie);font-size:14px;color:var(--texto)} :root[data-area="admin"] .wrap select:hover,:root[data-area="admin"] .wrap input:hover{border-color:color-mix(in srgb,var(--controle-linha) 70%,var(--texto-5))} :root[data-area="admin"] .wrap select:focus-visible,:root[data-area="admin"] .wrap input:focus-visible{outline:none;border-color:var(--acento); box-shadow:0 0 0 3px color-mix(in srgb,var(--acento) 22%,transparent)} /* ── carregando: esqueleto que ocupa o lugar exato do conteúdo (util.js · skeletonKpis) ─ */ :root[data-area="admin"] .grid-sk{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;width:100%} :root[data-area="admin"] #wrap > .grid-sk{margin-top:98px} /* o espaço da faixa de datas + abas, que chegam com o dado */ :root[data-area="admin"] .grid-sk .kpi-sk{min-height:150px;border-radius:var(--raio-cartao)} :root[data-area="admin"] .grid-sk .kpi-sk:nth-child(n+5){display:none} :root[data-area="admin"] .kpi-sk i{display:block;border-radius:6px;min-height:12px;background:linear-gradient(90deg,var(--linha-suave) 25%,var(--superficie-2) 50%,var(--linha-suave) 75%); background-size:200% 100%;animation:sk 1.6s ease-in-out infinite} :root[data-area="admin"] .kpi-sk i + i{margin-top:12px} :root[data-area="admin"] .loading-bar i{background:var(--acento)} /* ── movimento e foco: curto, com a curva do sistema; foco só por teclado ────────────── */ :root[data-area="admin"] .nav-item,:root[data-area="admin"] .vg-abas button,:root[data-area="admin"] .cli-aba, :root[data-area="admin"] .btn-back,:root[data-area="admin"] .btn-menu,:root[data-area="admin"] .det-rel-b,:root[data-area="admin"] .hdr-sino, :root[data-area="admin"] .vg-chip,:root[data-area="admin"] .act,:root[data-area="admin"] .btn-soft,:root[data-area="admin"] .vg-at-loja, :root[data-area="admin"] .g-comoler,:root[data-area="admin"] .c2-row,:root[data-area="admin"] .vg-gg, :root[data-area="admin"] .icon-btn,:root[data-area="admin"] .det-rel-m button, :root[data-area="admin"] .hero button,:root[data-area="admin"] .lk-ic{ transition:background-color .16s var(--curva-sistema),color .16s,border-color .16s,box-shadow .2s,transform .12s,opacity .16s} :root[data-area="admin"] button:focus-visible,:root[data-area="admin"] a:focus-visible,:root[data-area="admin"] [tabindex]:focus-visible{ outline:3px solid color-mix(in srgb,var(--acento) 45%,transparent);outline-offset:2px} :root[data-area="admin"] .nav-item:focus-visible,:root[data-area="admin"] .vg-abas button:focus-visible,:root[data-area="admin"] .cli-aba:focus-visible{outline-offset:-3px;border-radius:10px} :root[data-area="admin"] .btn-back:active,:root[data-area="admin"] .btn-menu:active,:root[data-area="admin"] .det-rel-b:active, :root[data-area="admin"] .hdr-sino:active,:root[data-area="admin"] .act:not(:disabled):active,:root[data-area="admin"] .btn-soft:active, :root[data-area="admin"] .hero button:active,:root[data-area="admin"] .vg-at-loja:active, :root[data-area="admin"] .vg-chip:active,:root[data-area="admin"] .icon-btn:active{transform:scale(.97)} :root[data-area="admin"] .c2-row{cursor:pointer} :root[data-area="admin"] .c2-row:hover{background:var(--superficie-2)} @keyframes peleMenu{from{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:none}} @keyframes peleFade{from{opacity:0;transform:translateY(-2px)}to{opacity:1;transform:none}} /* barra de rolagem fina e translúcida */ :root[data-area="admin"] ::-webkit-scrollbar{width:10px;height:10px} :root[data-area="admin"] ::-webkit-scrollbar-thumb{background-color:color-mix(in srgb,var(--texto) 16%,transparent);border:3px solid transparent;background-clip:padding-box;border-radius:10px} :root[data-area="admin"] ::-webkit-scrollbar-thumb:hover{background-color:color-mix(in srgb,var(--texto) 30%,transparent)} :root[data-area="admin"] ::-webkit-scrollbar-track{background:transparent} /* ── teste de estresse em 1280 ──────────────────────────────────────────────────────── */ @media (max-width:1320px){ :root[data-area="admin"] .card{padding:20px} :root[data-area="admin"] .card-t{line-height:1.15} :root[data-area="admin"] .vg-topo,:root[data-area="admin"] .vg-grade{gap:16px} :root[data-area="admin"] .vg-op{padding:12px 14px} :root[data-area="admin"] .vg-op .k{letter-spacing:.03em;font-size:10.5px;white-space:nowrap} } /* ── celular ───────────────────────────────────────────────────────────────────────── */ @media (max-width:767px){ :root[data-area="admin"] .header{padding:10px 16px;min-height:0;background:var(--vidro)} :root[data-area="admin"] .h-title{font-size:22px;line-height:28px;color:var(--texto)} :root[data-area="admin"] .h-sub{color:var(--texto-4)} :root[data-area="admin"] .header .btn-menu,:root[data-area="admin"] .header .btn-back{color:var(--texto)} :root[data-area="admin"] .wrap{padding:16px 16px calc(96px + env(safe-area-inset-bottom))} :root[data-area="admin"] .kpi-val{font-size:26px;line-height:30px} :root[data-area="admin"] .vg-abas{margin:0 -16px;padding:0 4px;-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)} :root[data-area="admin"] .vg-abas button{padding:0 12px} :root[data-area="admin"] .tabbar{background:var(--vidro);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-top:1px solid var(--linha)} :root[data-area="admin"] .tabbar .nav-item,:root[data-area="admin"] .tabbar .tab{color:var(--texto-4);min-height:44px;min-width:44px;font-size:11px} :root[data-area="admin"] .tabbar .on,:root[data-area="admin"] .tabbar .on svg{color:var(--acento-texto);opacity:1} :root[data-area="admin"] .tab-add{width:56px;height:56px;flex:0 0 56px;border-radius:50%;background:var(--acento);color:var(--sobre-preenchimento);border-color:transparent} :root[data-area="admin"] .det-rel-m{z-index:80;max-width:calc(100vw - 24px)} /* nome da loja no velocímetro: até 2 linhas em vez de cortar */ :root[data-area="admin"] .vg-gn{white-space:normal;overflow:visible;text-overflow:clip;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.2} } /* quem pede menos movimento no sistema, recebe */ @media (prefers-reduced-motion:reduce){ :root[data-area="admin"] *,:root[data-area="admin"] *::before,:root[data-area="admin"] *::after{animation-duration:.01ms!important;transition-duration:.01ms!important} }