/* TESTE (19/09/2026) — modo escuro "vidro líquido" no estilo Apple iOS 27, a partir da referência de widgets (CarPlay) que o usuário mandou. Na Apple o vidro é quase transparente: a cor vem do papel de parede por trás, filtrada por desfoque forte + saturação, e o volume vem do brilho na borda (luz de cima/esquerda) e da sombra funda. Por isso aqui o FUNDO é que é lilás/azul, e os blocos são vidro claro por cima. Padrão do painel desde 19/09/2026 (ver do index.html); ?tema=classico mostra o visual antigo. */ html.tema-vidro{ --bg:#1B1D20; --bg-2:#15171A; /* --panel/--panel-2 ficam as de sempre (19/09/2026: "deixe os cards com a mesma cor de antes em todos que ficaram mais claros") — o vidro é só nos blocos grandes, aplicado direto neles mais abaixo. */ --panel:#1A1F26; --panel-2:#212832; --line:rgba(255,255,255,0.20); --line-soft:rgba(255,255,255,0.10); --text:#FFFFFF; --text-dim:rgba(255,255,255,0.72); --text-faint:rgba(255,255,255,0.50); --radius:16px; /* o de sempre; os blocos de vidro têm 28px próprio */ } /* "papel de parede": manchas de cor grandes, fixas, pra o vidro ter o que desfocar — sem isso o vidro vira cinza liso */ html.tema-vidro body{ /* 19/09/2026: "ficou muito lilás, mantenha a linha preto mas clara" — grafite neutro, mais claro que o #12151A de sempre; as manchas são de cinza claro (sem cor) só pra o vidro ter o que desfocar. */ /* + as linhas de sempre (19/09: "mantenha as linhas do fundo"): as diagonais douradas do topo e as horizontais finas do corpo, por cima. */ background: repeating-linear-gradient(100deg, transparent 0 38px, rgba(242,183,5,0.035) 38px 40px), repeating-linear-gradient(180deg, rgba(255,255,255,0.012) 0px, rgba(255,255,255,0.012) 1px, transparent 1px, transparent 7px), radial-gradient(900px 700px at 8% 0%, rgba(150,154,164,0.225) 0%, transparent 60%), radial-gradient(800px 640px at 96% 8%, rgba(120,126,138,0.195) 0%, transparent 58%), radial-gradient(1000px 760px at 70% 72%, rgba(140,144,152,0.15) 0%, transparent 62%), radial-gradient(900px 700px at 0% 100%, rgba(110,116,128,0.165) 0%, transparent 60%), linear-gradient(160deg, #212328 0%, #191A1E 100%); /* 25% mais escuro (19/09) */ background-attachment:fixed; } /* topo: sem a faixa escura; as listras vêm do fundo da página (acima), que segue pelo corpo todo */ html.tema-vidro header.top{ background:transparent; border-bottom:0; } html.tema-vidro header.top::before{ display:none; } /* vidro líquido: transparente, desfoque + saturação fortes, borda com brilho especular (claro em cima/esquerda, fraco embaixo/direita) */ /* .card (os blocos de cada aba) ficou de fora de propósito (19/09/2026): os cards de dentro das abas são semitransparentes e clareavam junto com o vidro claro de trás — voltaram à cor de antes. */ html.tema-vidro .kpi, html.tema-vidro .rhythm, html.tema-vidro .user-identity-card{ background: linear-gradient(135deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.06) 30%, rgba(255,255,255,0.03) 60%, rgba(255,255,255,0.08) 100%), linear-gradient(rgba(0,0,0,0.10), rgba(0,0,0,0.10)), /* 10% mais escuro (19/09) */ rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.26); border-radius:28px; box-shadow: inset 1.5px 1.5px 0 rgba(255,255,255,0.50), inset -1px -1px 0 rgba(255,255,255,0.12), inset 0 0 24px rgba(255,255,255,0.05), 0 24px 48px -26px rgba(0,0,0,0.80); backdrop-filter: blur(32px) saturate(185%) brightness(1.06); -webkit-backdrop-filter: blur(32px) saturate(185%) brightness(1.06); } /* faixa de KPIs: widgets separados em vez de régua com divisórias */ html.tema-vidro .kpi-strip{ gap:6px; /* 14 -> 6px (19/09: "entre os cards aproxima mais") */ background:transparent; border:0; border-radius:0; overflow:visible; } html.tema-vidro .kpi{ overflow:hidden; } html.tema-vidro .kpi .label, html.tema-vidro .rlabel, html.tema-vidro .card-sub{ color:var(--text-dim); } /* controles em cápsula de vidro, como os botões do iOS */ html.tema-vidro .tab-btn, html.tema-vidro .excel-btn:not(.gpd-access-card){ border-radius:999px; background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.26); box-shadow:inset 1px 1px 0 rgba(255,255,255,0.45); color:#fff; } /* Aba marcada e hover continuam no amarelo de sempre (19/09/2026: "mantenha o amarelo quando flegado"); a pílula de vidro ganha a borda dourada. */ html.tema-vidro .tab-btn:hover{ color:var(--accent); background:rgba(242,183,5,0.10); } html.tema-vidro .tab-btn.active{ color:var(--accent); background:rgba(242,183,5,0.14); border-color:rgba(242,183,5,0.55); } /* Letras e números com mais destaque (19/09/2026: "deixe mais chamativo, mais claro, pra se destacar mais as letras e números claros"): títulos em branco (eram cinza), números brancos com brilho suave e sombra que os descola do vidro, e o "Meta R$" num vermelho mais vivo. */ html.tema-vidro .kpi .label, html.tema-vidro .gauge-title, html.tema-vidro .rlabel{ color:rgba(255,255,255,0.96); font-weight:700; text-shadow:0 1px 3px rgba(0,0,0,0.45); } html.tema-vidro .kpi .val:not(.good):not(.bad), html.tema-vidro .gauge-txt .val, html.tema-vidro .gauge-value, html.tema-vidro .rpct, html.tema-vidro .rname{ color:#FFFFFF; font-weight:700; text-shadow: 0 0 18px rgba(255,255,255,0.30), 0 2px 6px rgba(0,0,0,0.55); } html.tema-vidro .kpi .foot.bad{ color:#FF7B7C; font-weight:600; text-shadow:0 1px 3px rgba(0,0,0,0.5); } /* Projeção Mês (e todo .val com tom): mantém a regra de sempre — verde acima da meta, vermelho abaixo — só com o mesmo peso e sombra dos outros números. */ html.tema-vidro .kpi .val.good, html.tema-vidro .kpi .val.bad{ font-weight:700; text-shadow:0 2px 6px rgba(0,0,0,0.55); } /* Pílulas verdes um pouco maiores (19/09/2026: "nos cards verdes deixe um pouco maior"): 12,5-13px -> 14px, com mais respiro. Dourada e vermelha ficam como estão. */ html.tema-vidro .part-badge, html.tema-vidro .info-chip-3d:not(.gold):not(.bad){ font-size:14px; padding:6px 14px; } /* Blocos das abas (.card) 10% mais escuros (19/09/2026: "escureça 10% nos cards cinzas") — mesma receita do painel, só o fundo mais fechado. */ html.tema-vidro .card{ background: radial-gradient(130% 75% at 14% -12%, rgba(255,255,255,0.14), rgba(255,255,255,0) 52%), linear-gradient(165deg, rgba(255,255,255,0.045) 0%, rgba(255,255,255,0.013) 45%, rgba(255,255,255,0.018) 100%), rgba(16,19,24,0.70); } /* ---------- Painel individual do vendedor com os cartões novos ---------- 22/09/2026, "atualize para versão nova dos cards": .seller-kpi e .seller-detail-item eram os cartões antigos (cantos de --radius, vidro mais fechado). Passam ao mesmo vidro líquido dos KPIs do topo — cantos de 28px, borda especular clara em cima/esquerda e a sombra funda. O par claro está no fim de css/tema-aiko.css. */ html.tema-vidro .seller-panel, html.tema-vidro .seller-kpi, html.tema-vidro .seller-detail-item, html.tema-vidro .seller-inline-card{ background: linear-gradient(135deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.06) 30%, rgba(255,255,255,0.03) 60%, rgba(255,255,255,0.08) 100%), linear-gradient(rgba(0,0,0,0.10), rgba(0,0,0,0.10)), rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.26); box-shadow: inset 1.5px 1.5px 0 rgba(255,255,255,0.50), inset -1px -1px 0 rgba(255,255,255,0.12), inset 0 0 24px rgba(255,255,255,0.05), 0 24px 48px -26px rgba(0,0,0,0.80); backdrop-filter: blur(32px) saturate(185%) brightness(1.06); -webkit-backdrop-filter: blur(32px) saturate(185%) brightness(1.06); } html.tema-vidro .seller-panel{ border-radius:28px; padding:22px; } html.tema-vidro .seller-kpi{ border-radius:24px; padding:18px 18px 16px; } html.tema-vidro .seller-detail-item, html.tema-vidro .seller-inline-card{ border-radius:24px; padding:14px 16px; } html.tema-vidro .seller-kpi .label, html.tema-vidro .seller-detail-item .dl{ font-size:13.5px; letter-spacing:0.04em; } html.tema-vidro .seller-kpi-track{ height:10px; }