/* ==========================================================================
Painel do Cliente — Shopfy
Estilos dedicados ao painel logado. Reaproveita os tokens de cor já
definidos em styles-CdoeVXDs.css (--primary, --pnl-*, --success, etc.)
========================================================================== */
/* IMPORTANTE: styles-CdoeVXDs.css (do site principal) já define
`@media (width>=768px){[data-pnl-root]{zoom:.9}}`. Como o painel reaproveita
o mesmo atributo para herdar as variáveis de tema --pnl-*, essa regra
encolhia o painel inteiro (~90%) em telas >=768px, sobrando espaço em
branco embaixo. A regra abaixo neutraliza isso — precisa vir depois do
do styles-CdoeVXDs.css no para vencer no cascade. */
[data-pnl-root] { zoom: 1; }
/* IMPORTANTE: overflow-x:hidden só no (raiz real do scroll).
Se também for aplicado no , o body vira um "scroll container"
próprio (overflow-y passa a computar "auto" implicitamente), mas quem
rola de fato continua sendo o — isso quebra `position: sticky`
de tudo dentro do body (era a causa da topbar/sidebar não fixarem). */
html { overflow-x: hidden; }
[data-pnl-root] {
--pnl-radius: 16px;
--pnl-radius-sm: 10px;
font-family: var(--font-sans, "Inter", ui-sans-serif, system-ui, sans-serif);
background: var(--pnl-bg);
color: var(--pnl-text);
min-height: 100vh;
min-height: 100dvh;
transition: background-color .2s ease, color .2s ease;
/* ---------- efeito vidro (glassmorphism) ---------- */
/* Fallback (tema claro / navegadores sem color-mix): superfícies sólidas,
sem imagem de fundo, exatamente como antes. */
--pnl-glass: var(--pnl-card);
--pnl-glass-2: var(--pnl-card2);
--pnl-glass-sidebar: var(--pnl-sidebar);
--pnl-glass-border: var(--pnl-border);
--pnl-glass-blur: none;
}
/* Tema escuro (padrão): fundo com o glow laranja fixo atrás de tudo, e as
superfícies (sidebar, cards, painéis) ficam translúcidas com blur —
o glow aparece por trás delas, como vidro fosco. */
[data-pnl-root][data-pnl-theme="dark"] {
background:
linear-gradient(180deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,.75) 100%),
url('../images/bg-orange-glow.png') center bottom / cover no-repeat fixed,
var(--pnl-bg);
--pnl-glass: color-mix(in oklab, var(--pnl-card) 68%, transparent);
--pnl-glass-2: color-mix(in oklab, var(--pnl-card2) 70%, transparent);
--pnl-glass-sidebar: color-mix(in oklab, var(--pnl-sidebar) 68%, transparent);
--pnl-glass-border: color-mix(in oklab, #fff 12%, var(--pnl-border));
--pnl-glass-blur: blur(18px) saturate(150%);
}
[data-pnl-root] * { box-sizing: border-box; }
[data-pnl-root] a { text-decoration: none; color: inherit; }
[data-pnl-root] button { font-family: inherit; cursor: pointer; }
/* ---------- layout shell ---------- */
.pnl-shell {
display: flex;
min-height: 100dvh;
}
.pnl-sidebar {
width: 260px;
flex-shrink: 0;
background: var(--pnl-glass-sidebar);
backdrop-filter: var(--pnl-glass-blur);
-webkit-backdrop-filter: var(--pnl-glass-blur);
border-right: 1px solid var(--pnl-glass-border);
padding: 20px 16px;
display: flex;
flex-direction: column;
gap: 18px;
/* FIXA de verdade: tirada do fluxo do documento, não acompanha o scroll
da página. O .pnl-main recebe margin-left equivalente à largura dela
(ver regra abaixo) para o conteúdo não ficar embaixo dela. */
position: fixed;
top: 0;
left: 0;
height: 100vh;
height: 100dvh;
overflow: hidden; /* só o miolo (.pnl-sidebar-scroll) rola — o rodapé fica sempre visível */
transition: width .22s ease, padding .22s ease, transform .28s cubic-bezier(.4,0,.2,1);
z-index: 40;
}
/* área principal: empurrada pela largura real da sidebar fixa */
.pnl-main { margin-left: 260px; transition: margin-left .22s ease; }
.pnl-shell.is-collapsed .pnl-main { margin-left: 84px; }
.pnl-shell.is-collapsed .pnl-sidebar { width: 84px; padding-left: 12px; padding-right: 12px; }
.pnl-shell.is-collapsed .pnl-hide-collapsed { display: none !important; }
.pnl-shell.is-collapsed .pnl-nav { align-items: center; }
.pnl-shell.is-collapsed .pnl-nav-link { justify-content: center; width: 44px; height: 44px; padding: 0; margin: 0 auto; }
.pnl-shell.is-collapsed .pnl-nav-link span.pnl-label { display: none; }
.pnl-shell.is-collapsed .pnl-sidebar-top { flex-direction: column; gap: 10px; }
.pnl-shell.is-collapsed .pnl-user-card { justify-content: center; padding: 9px; }
.pnl-sidebar-top {
display: flex;
align-items: center;
justify-content: space-between;
flex-shrink: 0;
transition: flex-direction .1s;
}
.pnl-logo img {
width: 40px;
height: 40px;
border-radius: 12px;
object-fit: contain;
display: block;
}
.pnl-collapse-btn {
width: 32px;
height: 32px;
border-radius: 10px;
border: 1px solid var(--pnl-border);
background: transparent;
color: var(--pnl-muted);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.pnl-collapse-btn:hover { color: var(--pnl-text); border-color: color-mix(in oklab, var(--primary) 40%, var(--pnl-border)); }
.pnl-collapse-btn svg { transition: transform .22s ease; }
.pnl-shell.is-collapsed .pnl-collapse-btn svg { transform: rotate(180deg); }
.pnl-section-label {
font-size: 11px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--pnl-muted);
padding: 0 10px;
margin-bottom: 4px;
}
.pnl-nav { display: flex; flex-direction: column; gap: 4px; }
.pnl-nav-link {
display: flex;
align-items: center;
gap: 12px;
padding: 11px 12px;
border-radius: 11px;
color: var(--pnl-muted);
font-size: 14.5px;
font-weight: 600;
border: 1px solid transparent;
background: transparent;
width: 100%;
text-align: left;
transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.pnl-nav-link svg { width: 18px; height: 18px; flex-shrink: 0; }
.pnl-nav-link:hover { color: var(--pnl-text); background: color-mix(in oklab, var(--pnl-text) 5%, transparent); }
.pnl-nav-link.active {
color: var(--primary);
background: color-mix(in oklab, var(--primary) 12%, transparent);
border-color: color-mix(in oklab, var(--primary) 30%, transparent);
}
.pnl-nav-badge {
margin-left: auto;
font-size: 11px;
font-weight: 700;
background: color-mix(in oklab, var(--pnl-text) 8%, transparent);
color: var(--pnl-muted);
border-radius: 999px;
padding: 1px 8px;
}
.pnl-nav-link.active .pnl-nav-badge { background: var(--primary); color: var(--primary-foreground, #fff); }
.pnl-sidebar-scroll {
display: flex; flex-direction: column; gap: 22px; flex: 1 1 auto; min-height: 0;
overflow-y: auto; overflow-x: hidden; margin: 0 -6px; padding: 0 6px;
scrollbar-width: thin;
}
/* destaque cards */
.pnl-highlight-card {
border: 1px solid var(--pnl-glass-border);
background: var(--pnl-glass);
backdrop-filter: var(--pnl-glass-blur);
-webkit-backdrop-filter: var(--pnl-glass-blur);
border-radius: var(--pnl-radius-sm);
padding: 12px;
}
.pnl-highlight-badge {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 10.5px;
font-weight: 700;
color: var(--primary);
background: color-mix(in oklab, var(--primary) 14%, transparent);
border-radius: 999px;
padding: 2px 8px;
margin-bottom: 8px;
}
.pnl-highlight-row { display: flex; gap: 10px; align-items: center; }
.pnl-highlight-thumb { width: 40px; height: 40px; border-radius: 9px; object-fit: cover; flex-shrink: 0; background: var(--pnl-card2); }
.pnl-highlight-title { font-size: 12.5px; font-weight: 600; line-height: 1.25; }
.pnl-highlight-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 9px; font-size: 11px; color: var(--pnl-muted); }
.pnl-highlight-meta strong { color: var(--primary); font-weight: 700; }
.pnl-goal-card { border: 1px solid var(--pnl-glass-border); background: var(--pnl-glass); backdrop-filter: var(--pnl-glass-blur); -webkit-backdrop-filter: var(--pnl-glass-blur); border-radius: var(--pnl-radius-sm); padding: 12px; }
.pnl-goal-top { display: flex; justify-content: space-between; font-size: 12.5px; font-weight: 600; margin-bottom: 8px; }
.pnl-goal-top span.pnl-pct { color: var(--primary); font-weight: 700; }
.pnl-progress { height: 6px; border-radius: 999px; background: var(--pnl-card2); overflow: hidden; }
.pnl-progress > i { display: block; height: 100%; background: linear-gradient(90deg, var(--primary), oklch(72.8% .209 51.3)); border-radius: 999px; transition: width .6s cubic-bezier(.4,0,.2,1); }
.pnl-goal-sub { font-size: 11px; color: var(--pnl-muted); margin-top: 8px; line-height: 1.4; }
.pnl-vip-card {
border: 1px solid color-mix(in oklab, #2ea6e6 35%, var(--pnl-glass-border));
background: color-mix(in oklab, #2ea6e6 8%, var(--pnl-glass));
backdrop-filter: var(--pnl-glass-blur);
-webkit-backdrop-filter: var(--pnl-glass-blur);
border-radius: var(--pnl-radius-sm);
padding: 12px;
}
.pnl-vip-top { display: flex; gap: 10px; align-items: flex-start; }
.pnl-vip-icon { width: 30px; height: 30px; border-radius: 9px; background: #2ea6e6; color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pnl-vip-icon svg { width: 15px; height: 15px; }
.pnl-vip-title { font-size: 11px; font-weight: 700; color: #2ea6e6; }
.pnl-vip-desc { font-size: 12px; font-weight: 700; margin-top: 1px; }
.pnl-vip-sub { font-size: 11px; color: var(--pnl-muted); margin-top: 6px; line-height: 1.4; }
.pnl-vip-btn {
display: block; text-align: center; margin-top: 10px; background: #2ea6e6; color: #fff;
font-size: 12.5px; font-weight: 700; padding: 9px; border-radius: 9px; border: none; width: 100%;
}
.pnl-sidebar-bottom { flex-shrink: 0; display: flex; flex-direction: column; gap: 6px; }
.pnl-user-card {
display: flex; align-items: center; gap: 10px; border: 1px solid var(--pnl-glass-border);
background: var(--pnl-glass); backdrop-filter: var(--pnl-glass-blur); -webkit-backdrop-filter: var(--pnl-glass-blur);
border-radius: var(--pnl-radius-sm); padding: 9px 10px;
}
.pnl-avatar {
width: 34px; height: 34px; border-radius: 10px; background: var(--primary); color: #fff;
display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; flex-shrink: 0;
}
.pnl-user-info { line-height: 1.25; overflow: hidden; }
.pnl-user-name { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pnl-plan-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; color: var(--primary); }
.pnl-plan-badge svg { width: 10px; height: 10px; }
.pnl-logout-btn { margin-left: auto; color: var(--pnl-muted); background: none; border: none; display: flex; flex-shrink: 0; }
.pnl-logout-btn:hover { color: var(--pnl-text); }
/* ---------- main area ---------- */
.pnl-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pnl-topbar {
height: 64px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 24px;
border-bottom: 1px solid var(--pnl-border);
position: sticky;
top: 0;
background: color-mix(in oklab, var(--pnl-bg) 88%, transparent);
backdrop-filter: blur(10px);
z-index: 30;
}
.pnl-topbar-title { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.pnl-mobile-menu-btn { display: none; width: 34px; height: 34px; align-items: center; justify-content: center; border-radius: 9px; border: 1px solid var(--pnl-border); background: transparent; color: var(--pnl-text); }
.pnl-signout-btn {
display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--pnl-text);
background: color-mix(in oklab, var(--pnl-text) 6%, transparent); border: 1px solid var(--pnl-border);
border-radius: 10px; padding: 7px 13px;
}
.pnl-signout-btn:hover { border-color: color-mix(in oklab, var(--primary) 40%, var(--pnl-border)); }
.pnl-signout-btn svg { width: 14px; height: 14px; }
.pnl-content { padding: 24px; max-width: 1180px; width: 100%; margin: 0 auto; }
.pnl-page { display: none; }
.pnl-page.active { display: block; animation: pnl-fade .25s ease; }
@keyframes pnl-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* ---------- shared bits ---------- */
.pnl-h1 { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; margin: 2px 0 4px; }
.pnl-sub { color: var(--pnl-muted); font-size: 14px; margin-bottom: 22px; }
.pnl-breadcrumb { font-size: 12.5px; color: var(--pnl-muted); margin-bottom: 12px; }
.pnl-breadcrumb strong { color: var(--pnl-text); font-weight: 600; }
.pnl-tabs { display: flex; gap: 4px; overflow-x: auto; padding: 4px; background: var(--pnl-glass); backdrop-filter: var(--pnl-glass-blur); -webkit-backdrop-filter: var(--pnl-glass-blur); border: 1px solid var(--pnl-glass-border); border-radius: 12px; width: fit-content; margin-bottom: 20px; -ms-overflow-style: none; scrollbar-width: none; }
.pnl-tabs::-webkit-scrollbar { display: none; }
.pnl-tab { flex-shrink: 0; padding: 8px 16px; border-radius: 9px; font-size: 13.5px; font-weight: 600; color: var(--pnl-muted); background: transparent; border: none; white-space: nowrap; transition: background-color .18s ease, color .18s ease; }
.pnl-tab.active { background: var(--primary); color: #fff; }
.pnl-tab:not(.active):hover { color: var(--pnl-text); background: color-mix(in oklab, var(--pnl-text) 6%, transparent); }
.pnl-stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 20px; }
.pnl-stat-card { background: var(--pnl-glass); backdrop-filter: var(--pnl-glass-blur); -webkit-backdrop-filter: var(--pnl-glass-blur); border: 1px solid var(--pnl-glass-border); border-radius: var(--pnl-radius); padding: 18px 20px; }
.pnl-stat-label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--pnl-muted); margin-bottom: 10px; }
.pnl-stat-value { font-size: 26px; font-weight: 800; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pnl-spark { display: flex; align-items: flex-end; gap: 2px; height: 16px; }
.pnl-spark i { width: 3px; border-radius: 2px; background: var(--primary); opacity: .55; }
.pnl-spark i:last-child { opacity: 1; }
.pnl-panel { background: var(--pnl-glass); backdrop-filter: var(--pnl-glass-blur); -webkit-backdrop-filter: var(--pnl-glass-blur); border: 1px solid var(--pnl-glass-border); border-radius: var(--pnl-radius); overflow: hidden; }
.pnl-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--pnl-border); }
.pnl-panel-head-title { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 700; }
.pnl-panel-head-title svg { width: 16px; height: 16px; color: var(--primary); }
.pnl-panel-head-tag { font-size: 11px; font-weight: 700; color: var(--pnl-muted); letter-spacing: .04em; text-transform: uppercase; }
.pnl-product-row { display: flex; align-items: center; gap: 14px; padding: 13px 20px; border-bottom: 1px solid var(--pnl-border); }
.pnl-product-row:last-child { border-bottom: none; }
.pnl-rank-badge { font-size: 11px; font-weight: 800; padding: 4px 9px; border-radius: 999px; background: color-mix(in oklab, var(--pnl-text) 8%, transparent); color: var(--pnl-muted); flex-shrink: 0; min-width: 46px; text-align: center; }
.pnl-rank-badge.top { background: var(--primary); color: #fff; }
.pnl-product-thumb { width: 38px; height: 38px; border-radius: 9px; object-fit: cover; flex-shrink: 0; background: var(--pnl-card2); }
.pnl-product-name { font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.pnl-product-store { font-size: 11px; color: var(--pnl-muted); letter-spacing: .04em; text-transform: uppercase; margin-top: 2px; }
/* ---------- onboarding / mission banner ---------- */
.pnl-banner { border-radius: var(--pnl-radius); padding: 20px 22px; margin-bottom: 20px; border: 1px solid var(--pnl-glass-border); background: var(--pnl-glass); backdrop-filter: var(--pnl-glass-blur); -webkit-backdrop-filter: var(--pnl-glass-blur); }
.pnl-banner.warm { background: linear-gradient(180deg, color-mix(in oklab, var(--primary) 14%, var(--pnl-glass)) 0%, var(--pnl-glass) 60%); border-color: color-mix(in oklab, var(--primary) 25%, var(--pnl-glass-border)); }
.pnl-eyebrow-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--primary); background: color-mix(in oklab, var(--primary) 14%, transparent); border-radius: 999px; padding: 3px 10px; margin-bottom: 12px; }
.pnl-banner-title { font-size: 18px; font-weight: 800; margin-bottom: 3px; }
.pnl-banner-desc { font-size: 13px; color: var(--pnl-muted); }
.pnl-banner-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.pnl-check-dots { display: flex; gap: 6px; flex-shrink: 0; }
.pnl-check-dot { width: 30px; height: 30px; border-radius: 999px; border: 1.5px solid var(--success); color: var(--success); display: flex; align-items: center; justify-content: center; }
.pnl-check-dot svg { width: 14px; height: 14px; }
.pnl-banner-link { display: inline-block; margin-top: 14px; font-size: 13px; font-weight: 700; color: var(--primary); }
/* ---------- catálogo ---------- */
/* container único que agrupa título, estatísticas, busca e grid de
produtos — como no painel de referência, em vez de ficarem soltos
diretamente sobre o fundo. */
.pnl-catalog-panel {
background: var(--pnl-glass);
backdrop-filter: var(--pnl-glass-blur);
-webkit-backdrop-filter: var(--pnl-glass-blur);
border: 1px solid var(--pnl-glass-border);
border-radius: var(--pnl-radius);
padding: 24px;
}
.pnl-catalog-panel .pnl-h1 { margin-top: 0; }
.pnl-catalog-panel .pnl-sub { margin-bottom: 20px; }
.pnl-catalog-panel .pnl-stat-grid.four { margin-bottom: 18px; }
.pnl-catalog-panel .pnl-search { margin-bottom: 16px; }
.pnl-catalog-breadcrumb { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--pnl-muted); margin-bottom: 16px; }
.pnl-catalog-breadcrumb a { color: var(--pnl-muted); transition: color .15s ease; }
.pnl-catalog-breadcrumb a:hover { color: var(--pnl-text); }
.pnl-catalog-breadcrumb .sep { opacity: .5; }
.pnl-catalog-breadcrumb .current { color: var(--pnl-text); font-weight: 600; }
.pnl-cat-filters { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.pnl-cat-filter-pills { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pnl-cat-filter-btn {
padding: 8px 16px;
border-radius: 999px;
font-size: 13px;
font-weight: 600;
border: 1px solid var(--pnl-glass-border);
background: var(--pnl-glass-2);
color: var(--pnl-muted);
white-space: nowrap;
transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.pnl-cat-filter-btn:hover { color: var(--pnl-text); border-color: color-mix(in oklab, var(--primary) 30%, var(--pnl-border)); }
.pnl-cat-filter-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.pnl-cat-filter-btn.active:hover { color: #fff; }
.pnl-cat-count { font-size: 12.5px; color: var(--pnl-muted); white-space: nowrap; }
.pnl-product-grid { margin-top: 20px; }
.pnl-search {
display: flex; align-items: center; gap: 10px; background: var(--pnl-glass); backdrop-filter: var(--pnl-glass-blur); -webkit-backdrop-filter: var(--pnl-glass-blur); border: 1px solid var(--pnl-glass-border);
border-radius: 12px; padding: 12px 16px; margin-bottom: 22px; color: var(--pnl-muted);
}
.pnl-search svg { width: 16px; height: 16px; flex-shrink: 0; }
.pnl-search input { background: none; border: none; outline: none; color: var(--pnl-text); font-size: 14px; width: 100%; font-family: inherit; }
.pnl-search input::placeholder { color: var(--pnl-muted); }
.pnl-stat-grid.four { grid-template-columns: repeat(4, 1fr); }
.pnl-stat-card .pnl-stat-value { font-size: 21px; }
.pnl-product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; }
.pnl-pcard {
border: 1.5px solid var(--pnl-glass-border);
border-radius: var(--pnl-radius);
overflow: hidden;
background: var(--pnl-glass);
backdrop-filter: var(--pnl-glass-blur);
-webkit-backdrop-filter: var(--pnl-glass-blur);
position: relative;
display: flex;
flex-direction: column;
transition: border-color .18s ease, transform .18s ease;
}
.pnl-pcard:hover { border-color: color-mix(in oklab, var(--primary) 40%, var(--pnl-border)); transform: translateY(-2px); }
.pnl-day-card, .pnl-stat-card, .pnl-highlight-card, .pnl-goal-card { transition: border-color .18s ease; }
.pnl-pcard.top1 { border-color: color-mix(in oklab, var(--primary) 55%, var(--pnl-border)); box-shadow: 0 0 0 1px color-mix(in oklab, var(--primary) 25%, transparent); }
.pnl-pcard-ribbon {
position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between;
padding: 7px 12px; font-size: 10.5px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; color: #fff;
background: linear-gradient(90deg, color-mix(in oklab, #000 35%, var(--primary)), color-mix(in oklab, #000 55%, var(--primary)));
flex-shrink: 0;
}
.pnl-pcard-ribbon .off { background: rgba(0,0,0,.35); border-radius: 999px; padding: 2px 8px; flex-shrink: 0; }
/* Container de imagem com proporção fixa (aspect-ratio) — escala junto
com a largura da coluna em qualquer tela, sem precisar de valores
fixos por breakpoint, mantendo overflow:hidden e a ![]()
sempre
preenchendo a área inteira (nunca deformada). Card mais alto que o
outro (por causa de título com 2 linhas etc.) não é problema. */
.pnl-pcard-media { position: relative; width: 100%; aspect-ratio: 1/1; overflow: hidden; background: var(--pnl-card2); flex-shrink: 0; }
.pnl-pcard-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.pnl-pcard-cat { position: absolute; top: 8px; left: 8px; font-size: 10px; font-weight: 700; background: rgba(0,0,0,.55); color: #fff; padding: 2px 8px; border-radius: 999px; }
.pnl-pcard-off { position: absolute; top: 8px; right: 8px; font-size: 10.5px; font-weight: 800; background: rgba(0,0,0,.55); color: #fff; padding: 3px 9px; border-radius: 999px; }
.pnl-pcard-num {
position: absolute; bottom: 10px; left: 10px; z-index: 3; width: 26px; height: 26px; border-radius: 999px;
background: var(--primary); color: #fff; font-size: 11.5px; font-weight: 800; display: flex; align-items: center; justify-content: center;
box-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.pnl-pcard-body { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1; }
.pnl-pcard-title { font-size: 14px; font-weight: 700; line-height: 1.3; margin-bottom: 8px; min-height: 36px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pnl-pcard-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.pnl-pcard-tag { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.pnl-pcard-tag.store { color: var(--primary); background: color-mix(in oklab, var(--primary) 12%, transparent); }
.pnl-pcard-tag.commission { color: var(--pnl-muted); background: color-mix(in oklab, var(--pnl-text) 7%, transparent); }
/* bloco interno de preço/comissão — agrupa visualmente as informações
financeiras do card, como na referência, em vez de deixá-las soltas */
.pnl-pcard-commission-block {
background: color-mix(in oklab, #000 22%, var(--pnl-card2));
border: 1px solid var(--pnl-glass-border);
border-radius: 10px;
padding: 10px 12px;
margin-bottom: 12px;
}
.pnl-pcard-price-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; gap: 8px; }
.pnl-pcard-price-left { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.pnl-pcard-old { font-size: 11.5px; color: var(--pnl-muted); text-decoration: line-through; }
.pnl-pcard-new { font-size: 17px; font-weight: 800; }
.pnl-pcard-sold { font-size: 11px; color: var(--pnl-muted); }
.pnl-pcard-fee { font-size: 11px; font-weight: 700; color: var(--success); background: color-mix(in oklab, var(--success) 15%, transparent); border-radius: 6px; padding: 2px 7px; flex-shrink: 0; }
.pnl-pcard-net { font-size: 12px; color: var(--pnl-muted); margin-top: 6px; }
.pnl-pcard-net strong { color: var(--success); font-weight: 700; }
.pnl-pcard-cta { display: block; width: 100%; text-align: center; background: var(--primary); color: #fff; font-weight: 700; font-size: 13.5px; padding: 11px; border-radius: 10px; border: none; margin-top: auto; }
.pnl-pcard-cta:hover { background: var(--primary-bright, var(--primary)); }
/* ---------- missões ---------- */
.pnl-mission-hero { text-align: left; padding: 26px 26px 24px; margin-bottom: 20px; }
.pnl-mission-hero-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.pnl-ring { width: 84px; height: 84px; border-radius: 999px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; }
.pnl-ring svg { position: absolute; }
.pnl-ring-wrap { position: relative; width: 84px; height: 84px; flex-shrink: 0; }
#pnl-mission-ring { transition: stroke-dashoffset .8s cubic-bezier(.4,0,.2,1); }
.pnl-ring-value { font-size: 19px; font-weight: 800; }
.pnl-ring-label { font-size: 9px; color: var(--pnl-muted); font-weight: 700; letter-spacing: .05em; }
.pnl-steps { display: flex; align-items: center; margin: 22px 0 16px; overflow-x: auto; padding-bottom: 4px; }
.pnl-step-dot { width: 26px; height: 26px; border-radius: 999px; background: var(--success); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pnl-step-dot svg { width: 13px; height: 13px; }
.pnl-step-dot.pending { background: var(--pnl-card2); color: var(--pnl-muted); border: 1.5px solid var(--pnl-border); }
.pnl-step-line { flex: 1; height: 2px; background: var(--success); min-width: 24px; }
.pnl-step-line.pending { background: var(--pnl-border); }
.pnl-pill-row { display: flex; gap: 8px; flex-wrap: wrap; }
.pnl-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; background: var(--pnl-card2); border: 1px solid var(--pnl-border); border-radius: 999px; padding: 5px 12px; }
.pnl-pill svg { width: 13px; height: 13px; color: var(--primary); }
.pnl-success-banner { display: flex; align-items: center; gap: 10px; background: color-mix(in oklab, var(--success) 12%, transparent); border: 1px solid color-mix(in oklab, var(--success) 30%, transparent); color: var(--success); border-radius: 12px; padding: 14px 18px; font-size: 13.5px; font-weight: 600; margin-bottom: 20px; }
.pnl-day-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.pnl-day-card { background: var(--pnl-glass); backdrop-filter: var(--pnl-glass-blur); -webkit-backdrop-filter: var(--pnl-glass-blur); border: 1px solid var(--pnl-glass-border); border-radius: var(--pnl-radius); padding: 18px 20px; }
.pnl-day-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.pnl-day-title { font-size: 15px; font-weight: 700; }
.pnl-day-sub { font-size: 12.5px; color: var(--pnl-muted); margin-bottom: 14px; }
.pnl-done-badge { font-size: 10.5px; font-weight: 700; color: var(--success); background: color-mix(in oklab, var(--success) 15%, transparent); border-radius: 999px; padding: 3px 10px; }
.pnl-mini-rings { display: flex; gap: 24px; }
.pnl-mini-ring-wrap { position: relative; width: 46px; height: 46px; flex-shrink: 0; }
.pnl-mini-ring-wrap circle { transition: stroke-dashoffset .8s cubic-bezier(.4,0,.2,1); }
.pnl-mini-ring-value { font-size: 11px; font-weight: 800; }
.pnl-mini-ring-label { font-size: 11px; color: var(--pnl-muted); font-weight: 600; }
.pnl-mini-ring-item { display: flex; align-items: center; gap: 10px; }
/* ---------- perfil ---------- */
.pnl-form-panel { background: var(--pnl-glass); backdrop-filter: var(--pnl-glass-blur); -webkit-backdrop-filter: var(--pnl-glass-blur); border: 1px solid var(--pnl-glass-border); border-radius: var(--pnl-radius); padding: 22px; margin-bottom: 18px; }
.pnl-form-head { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.pnl-form-icon { width: 34px; height: 34px; border-radius: 10px; background: color-mix(in oklab, var(--primary) 14%, transparent); color: var(--primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pnl-form-icon svg { width: 16px; height: 16px; }
.pnl-form-title { font-size: 15px; font-weight: 700; }
.pnl-field { margin-bottom: 14px; }
.pnl-field label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--pnl-muted); margin-bottom: 7px; }
.pnl-field input { width: 100%; background: var(--pnl-card2); border: 1px solid var(--pnl-border); border-radius: 10px; padding: 12px 14px; color: var(--pnl-text); font-size: 14px; font-family: inherit; outline: none; }
.pnl-field input:focus { border-color: color-mix(in oklab, var(--primary) 50%, var(--pnl-border)); }
.pnl-field input[disabled] { opacity: .65; cursor: not-allowed; }
.pnl-btn-primary { background: var(--primary); color: #fff; font-weight: 700; font-size: 13.5px; padding: 11px 22px; border-radius: 10px; border: none; }
.pnl-btn-primary:hover { background: var(--primary-bright, var(--primary)); }
.pnl-form-desc { font-size: 13px; color: var(--pnl-muted); margin: -12px 0 18px; }
.pnl-theme-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.pnl-theme-opt {
border: 1.5px solid var(--pnl-glass-border); border-radius: 12px; padding: 16px; background: var(--pnl-glass-2);
backdrop-filter: var(--pnl-glass-blur); -webkit-backdrop-filter: var(--pnl-glass-blur);
display: flex; align-items: center; gap: 12px; text-align: left; width: 100%;
}
.pnl-theme-opt svg { width: 18px; height: 18px; color: var(--pnl-muted); flex-shrink: 0; }
.pnl-theme-opt-title { font-size: 14px; font-weight: 700; }
.pnl-theme-opt-sub { font-size: 12px; color: var(--pnl-muted); }
.pnl-theme-opt { transition: border-color .15s ease, background-color .15s ease; }
.pnl-theme-opt.active { border-color: var(--primary); background: color-mix(in oklab, var(--primary) 10%, var(--pnl-glass-2)); }
.pnl-theme-opt.active svg { color: var(--primary); }
.pnl-theme-opt:not(.active):hover { border-color: color-mix(in oklab, var(--primary) 30%, var(--pnl-border)); }
.pnl-theme-note { font-size: 12px; color: var(--pnl-muted); margin-top: 14px; }
/* ---------- brilho laranja pulsante (glow) ---------- */
/* Efeito usado nos elementos de destaque das referências: item ativo do
menu, badges "TOP 1 DA SEMANA" / onboarding / curadoria IA, barra de
progresso e botões primários. Não altera tamanho/layout — só sombra. */
@keyframes pnl-glow-pulse {
0%, 100% {
box-shadow: 0 0 0 1px color-mix(in oklab, var(--primary) 45%, transparent),
0 0 10px 0 color-mix(in oklab, var(--primary) 35%, transparent);
}
50% {
box-shadow: 0 0 0 1px color-mix(in oklab, var(--primary) 70%, transparent),
0 0 22px 3px color-mix(in oklab, var(--primary) 55%, transparent);
}
}
@keyframes pnl-glow-pulse-soft {
0%, 100% { box-shadow: 0 0 8px 0 color-mix(in oklab, var(--primary) 30%, transparent); }
50% { box-shadow: 0 0 16px 2px color-mix(in oklab, var(--primary) 50%, transparent); }
}
.pnl-nav-link.active,
.pnl-highlight-badge,
.pnl-eyebrow-badge {
animation: pnl-glow-pulse 2.6s ease-in-out infinite;
}
.pnl-progress > i,
.pnl-btn-primary,
.pnl-pcard-cta,
.pnl-vip-btn {
animation: pnl-glow-pulse-soft 2.6s ease-in-out infinite;
}
.pnl-nav-link.active:hover,
.pnl-btn-primary:hover,
.pnl-pcard-cta:hover,
.pnl-vip-btn:hover {
animation-duration: 1.4s;
}
.pnl-btn-primary:active,
.pnl-pcard-cta:active,
.pnl-vip-btn:active { transform: scale(.98); }
/* indicadores/números com destaque laranja (ex: % da meta, comissão do
produto destaque) — brilho no texto, sem mudar tamanho/layout */
.pnl-goal-top span.pnl-pct,
.pnl-highlight-meta strong {
text-shadow: 0 0 10px color-mix(in oklab, var(--primary) 55%, transparent);
}
@media (prefers-reduced-motion: reduce) {
.pnl-nav-link.active, .pnl-highlight-badge, .pnl-eyebrow-badge,
.pnl-progress > i, .pnl-btn-primary, .pnl-pcard-cta, .pnl-vip-btn {
animation: none;
box-shadow: 0 0 0 1px color-mix(in oklab, var(--primary) 45%, transparent), 0 0 14px 2px color-mix(in oklab, var(--primary) 35%, transparent);
}
}
/* ---------- notificação global de nova venda ---------- */
.pnl-sale-notification {
position: fixed;
top: 14px;
right: 18px;
width: min(340px, calc(100vw - 36px));
min-height: 88px;
display: flex;
align-items: center;
gap: 11px;
padding: 12px 38px 12px 12px;
border: 1px solid rgba(255, 132, 28, .62);
border-radius: 17px;
background:
linear-gradient(135deg, rgba(31, 18, 8, .97), rgba(20, 13, 7, .96));
box-shadow:
0 14px 36px rgba(0, 0, 0, .48),
0 0 0 1px rgba(255, 132, 28, .08) inset,
0 0 24px rgba(255, 112, 20, .13);
backdrop-filter: blur(16px) saturate(135%);
-webkit-backdrop-filter: blur(16px) saturate(135%);
z-index: 1000;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translate3d(26px, -8px, 0) scale(.97);
transition:
opacity .28s ease,
transform .32s cubic-bezier(.22, 1, .36, 1),
visibility 0s linear .32s;
}
.pnl-sale-notification.show {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translate3d(0, 0, 0) scale(1);
transition:
opacity .28s ease,
transform .32s cubic-bezier(.22, 1, .36, 1),
visibility 0s;
}
.pnl-sale-notification.hide {
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translate3d(26px, -8px, 0) scale(.97);
}
.pnl-sale-notification-image-wrap {
width: 54px;
height: 54px;
flex: 0 0 54px;
overflow: hidden;
border-radius: 13px;
background: #1d1d1d;
border: 1px solid rgba(255, 255, 255, .10);
box-shadow: 0 5px 16px rgba(0, 0, 0, .28);
}
.pnl-sale-notification-image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.pnl-sale-notification-content {
min-width: 0;
flex: 1;
padding-top: 1px;
}
.pnl-sale-notification-title {
display: flex;
align-items: center;
gap: 6px;
color: #ff9a35;
font-size: 10px;
line-height: 1.2;
font-weight: 800;
letter-spacing: .07em;
white-space: nowrap;
}
.pnl-sale-notification-dot {
width: 7px;
height: 7px;
flex: 0 0 7px;
border-radius: 50%;
background: #ff8a20;
box-shadow: 0 0 10px rgba(255, 138, 32, .7);
}
.pnl-sale-notification-product {
margin-top: 5px;
color: rgba(255, 255, 255, .70);
font-size: 11.5px;
line-height: 1.3;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pnl-sale-notification-commission {
margin-top: 4px;
color: #35d77b;
font-size: 18px;
line-height: 1.05;
font-weight: 850;
letter-spacing: -.02em;
text-shadow: 0 0 14px rgba(53, 215, 123, .16);
}
.pnl-sale-notification-close {
position: absolute;
top: 9px;
right: 9px;
width: 22px;
height: 22px;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
border: 0;
border-radius: 7px;
background: transparent;
color: rgba(255, 255, 255, .48);
transition: color .15s ease, background-color .15s ease;
}
.pnl-sale-notification-close:hover {
color: #fff;
background: rgba(255, 255, 255, .07);
}
.pnl-sale-notification-close svg {
width: 13px;
height: 13px;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
}
/* ---------- toast ---------- */
.pnl-toast {
position: fixed; bottom: 22px; left: 50%; transform: translate(-50%, 20px); background: var(--pnl-text); color: var(--pnl-bg);
font-size: 13px; font-weight: 600; padding: 11px 20px; border-radius: 999px; opacity: 0; pointer-events: none;
transition: opacity .25s ease, transform .25s ease; z-index: 200; box-shadow: 0 12px 30px -10px rgba(0,0,0,.5);
}
.pnl-toast.show { opacity: 1; transform: translate(-50%, 0); }
/* ---------- mobile overlay ---------- */
.pnl-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 39; opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.pnl-overlay.show { opacity: 1; pointer-events: auto; }
/* ==========================================================================
Responsivo
========================================================================== */
/* Notebook/desktop grande: evita conteúdo esticado demais em monitores largos */
@media (min-width: 1440px) {
.pnl-content { max-width: 1280px; }
}
/* Tablet (768–1024px): adaptação intermediária — sidebar continua visível
(não vira menu escondido como no celular), só reduz um pouco a largura
e os grids passam para 2 colunas. */
@media (min-width: 768px) and (max-width: 1024px) {
.pnl-sidebar { width: 220px; }
.pnl-main { margin-left: 220px; }
.pnl-shell.is-collapsed .pnl-sidebar { width: 76px; }
.pnl-shell.is-collapsed .pnl-main { margin-left: 76px; }
.pnl-content { padding: 20px; }
.pnl-catalog-panel { padding: 20px; }
.pnl-product-grid { grid-template-columns: repeat(2, 1fr); }
.pnl-stat-grid.four { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1024px) {
.pnl-product-grid { grid-template-columns: repeat(2, 1fr); }
.pnl-stat-grid.four { grid-template-columns: repeat(2, 1fr); }
}
/* Celular (< 768px): sidebar vira gaveta deslizante */
@media (max-width: 767px) {
.pnl-sidebar {
height: 100dvh; height: 100svh; width: min(84vw, 280px);
transform: translateX(-100%); box-shadow: 0 0 40px rgba(0,0,0,.4);
padding-top: max(20px, env(safe-area-inset-top, 0px));
padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
}
/* no mobile a sidebar sobrepõe (overlay), o conteúdo ocupa a tela inteira */
.pnl-main, .pnl-shell.is-collapsed .pnl-main { margin-left: 0; }
.pnl-shell.is-collapsed .pnl-sidebar { width: min(84vw, 280px); }
.pnl-shell.is-collapsed .pnl-sidebar-top { flex-direction: row; }
.pnl-shell.is-collapsed .pnl-hide-collapsed { display: block !important; }
.pnl-shell.is-collapsed .pnl-nav-link { justify-content: flex-start; padding: 11px 12px; width: 100%; height: auto; margin: 0; }
.pnl-shell.is-collapsed .pnl-nav { align-items: stretch; }
.pnl-shell.is-collapsed .pnl-nav-link span.pnl-label { display: inline; }
.pnl-shell.mobile-open .pnl-sidebar { transform: translateX(0); }
.pnl-collapse-btn { display: none; }
.pnl-mobile-menu-btn { display: flex; }
.pnl-content { padding: 16px; }
.pnl-topbar { padding: 0 14px; }
.pnl-catalog-panel { padding: 16px; }
.pnl-stat-grid, .pnl-stat-grid.four { grid-template-columns: 1fr 1fr; gap: 10px; }
.pnl-product-grid { grid-template-columns: 1fr; }
.pnl-day-grid { grid-template-columns: 1fr; }
.pnl-theme-grid { grid-template-columns: 1fr; }
.pnl-h1 { font-size: 21px; }
.pnl-mission-hero-top { flex-direction: column; }
.pnl-banner-top { flex-direction: column; }
}
@media (max-width: 767px) {
.pnl-sale-notification {
top: 10px;
right: 10px;
width: min(330px, calc(100vw - 20px));
min-height: 82px;
padding: 10px 36px 10px 10px;
}
.pnl-sale-notification-image-wrap {
width: 50px;
height: 50px;
flex-basis: 50px;
}
.pnl-sale-notification-title { font-size: 9.5px; }
.pnl-sale-notification-product { font-size: 11px; }
.pnl-sale-notification-commission { font-size: 17px; }
}
@media (max-width: 520px) {
.pnl-stat-grid, .pnl-stat-grid.four { grid-template-columns: 1fr; }
.pnl-mini-rings { flex-direction: column; gap: 10px; }
.pnl-form-panel { padding: 16px; }
.pnl-mission-hero { padding: 18px; }
}
@media (max-width: 340px) {
.pnl-content { padding: 12px; }
.pnl-h1 { font-size: 19px; }
.pnl-topbar { padding: 0 10px; }
}
/* ==========================================================================
Login / recuperação de senha (dentro de painel.html)
Reaproveita as variáveis de tema e as classes .pnl-form-panel / .pnl-field
/ .pnl-btn-primary já existentes — visual fiel às telas de referência.
========================================================================== */
.pnl-auth-wrap {
min-height: 100vh;
min-height: 100dvh;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
}
.pnl-auth-card { width: 100%; max-width: 400px; }
.pnl-auth-logo { display: flex; justify-content: center; margin-bottom: 20px; }
.pnl-auth-logo img { height: 46px; width: auto; object-fit: contain; }
.pnl-auth-title {
text-align: center;
font-size: 26px;
font-weight: 800;
color: var(--pnl-text);
margin: 0 0 6px;
letter-spacing: -.01em;
}
.pnl-auth-title span { color: var(--primary); }
.pnl-auth-sub {
text-align: center;
font-size: 13.5px;
color: var(--pnl-muted);
margin: 0 0 22px;
}
.pnl-auth-field-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
margin-bottom: 7px;
}
.pnl-auth-field-head label { margin-bottom: 0; }
.pnl-auth-link {
background: none;
border: none;
padding: 0;
font-size: 12px;
font-weight: 600;
color: var(--primary);
cursor: pointer;
font-family: inherit;
}
.pnl-auth-link:hover { text-decoration: underline; }
.pnl-auth-password-wrap { position: relative; }
.pnl-auth-password-wrap input { padding-right: 42px; }
.pnl-auth-eye {
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
background: none;
border: none;
padding: 6px;
display: flex;
color: var(--pnl-muted);
cursor: pointer;
}
.pnl-auth-eye:hover { color: var(--pnl-text); }
.pnl-auth-eye svg { width: 17px; height: 17px; }
.pnl-auth-submit {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 6px;
}
.pnl-auth-submit svg { width: 16px; height: 16px; }
.pnl-auth-submit:disabled { opacity: .65; cursor: default; }
.pnl-auth-instructions {
font-size: 13px;
line-height: 1.55;
color: var(--pnl-muted);
margin: 0 0 16px;
}
.pnl-auth-alert {
font-size: 12.5px;
line-height: 1.5;
padding: 11px 13px;
border-radius: 10px;
margin-bottom: 14px;
border: 1px solid var(--pnl-border);
background: var(--pnl-card2);
color: var(--pnl-text);
}
.pnl-auth-alert-error {
color: var(--destructive, #e5484d);
background: color-mix(in oklab, var(--destructive, #e5484d) 14%, transparent);
border-color: color-mix(in oklab, var(--destructive, #e5484d) 38%, transparent);
font-weight: 600;
}
.pnl-auth-alert-info { color: var(--pnl-muted); }
.pnl-auth-back { text-align: center; margin-top: 16px; }
.pnl-auth-footer-link {
text-align: center;
margin-top: 18px;
font-size: 13px;
color: var(--pnl-muted);
}
.pnl-auth-footer-link a { color: var(--primary); font-weight: 600; }
.pnl-auth-legal {
text-align: center;
margin-top: 26px;
font-size: 11.5px;
color: var(--pnl-muted);
line-height: 1.7;
}
.pnl-auth-legal a { color: var(--pnl-muted); }
.pnl-auth-legal a:hover { color: var(--pnl-text); }
@media (max-width: 380px) {
.pnl-auth-title { font-size: 22px; }
}
/* ==========================================================================
MODAL "Afiliar-se a este Produto" — aberto pelo botão "Se afiliar agora"
dos cards do Catálogo. Visual fiel ao print de referência (fundo escuro,
acentos laranja, cards e contornos arredondados).
========================================================================== */
.pnl-aff-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, .65);
z-index: 59;
opacity: 0;
pointer-events: none;
transition: opacity .2s ease;
}
.pnl-aff-overlay.show { opacity: 1; pointer-events: auto; }
.pnl-aff-modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -48%);
width: min(440px, calc(100vw - 32px));
max-height: calc(100dvh - 32px);
overflow-y: auto;
background: #0c0c0c;
border: 1px solid #2a2a2a;
border-radius: 18px;
box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
z-index: 60;
opacity: 0;
pointer-events: none;
transition: opacity .2s ease, transform .2s ease;
font-family: var(--font-sans, "Inter", ui-sans-serif, system-ui, sans-serif);
}
.pnl-aff-modal.show {
opacity: 1;
pointer-events: auto;
transform: translate(-50%, -50%);
}
.pnl-aff-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 18px 18px 14px;
border-bottom: 1px solid #202020;
}
.pnl-aff-head-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pnl-aff-logo { width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0; }
.pnl-aff-head-left h2 {
margin: 0;
font-size: 15.5px;
font-weight: 700;
color: #fff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pnl-aff-close {
flex-shrink: 0;
width: 30px;
height: 30px;
border-radius: 50%;
border: none;
background: #1c1c1c;
color: #aaa;
display: flex;
align-items: center;
justify-content: center;
transition: background .15s ease, color .15s ease;
}
.pnl-aff-close:hover { background: #262626; color: #fff; }
.pnl-aff-body { padding: 18px; display: flex; flex-direction: column; gap: 18px; }
.pnl-aff-product {
display: flex;
align-items: center;
gap: 12px;
background: #131313;
border: 1px solid #232323;
border-radius: 12px;
padding: 10px;
}
.pnl-aff-product-img {
width: 52px;
height: 52px;
border-radius: 8px;
object-fit: cover;
flex-shrink: 0;
background: #222;
}
.pnl-aff-product-info { min-width: 0; }
.pnl-aff-product-name {
font-size: 13.5px;
font-weight: 600;
color: #fff;
line-height: 1.35;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.pnl-aff-product-price-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.pnl-aff-product-price { color: var(--primary); font-weight: 800; font-size: 14.5px; }
.pnl-aff-product-gain {
font-size: 11px;
font-weight: 700;
color: var(--success, #3ecf6e);
background: color-mix(in oklab, var(--success, #3ecf6e) 16%, transparent);
border-radius: 20px;
padding: 3px 9px;
}
.pnl-aff-step { display: flex; flex-direction: column; gap: 10px; }
.pnl-aff-step-row { display: flex; align-items: flex-start; gap: 10px; }
.pnl-aff-step-num {
flex-shrink: 0;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--primary);
color: #fff;
font-size: 11.5px;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
margin-top: 1px;
}
.pnl-aff-step-text { margin: 0; font-size: 13px; color: #d8d8d8; line-height: 1.5; }
.pnl-aff-btn-outline,
.pnl-aff-btn-ghost {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
padding: 12px 16px;
border-radius: 11px;
font-size: 13.5px;
font-weight: 700;
cursor: pointer;
transition: background .15s ease, border-color .15s ease;
}
.pnl-aff-btn-outline {
background: color-mix(in oklab, var(--primary) 10%, transparent);
border: 1px solid color-mix(in oklab, var(--primary) 55%, transparent);
color: var(--primary);
}
.pnl-aff-btn-outline:hover { background: color-mix(in oklab, var(--primary) 16%, transparent); }
.pnl-aff-btn-outline.pnl-aff-disabled,
.pnl-aff-btn-ghost:disabled {
opacity: .45;
cursor: not-allowed;
pointer-events: none;
}
.pnl-aff-btn-ghost {
background: #131313;
border: 1px solid #262626;
color: #d8d8d8;
margin-top: 8px;
}
.pnl-aff-btn-ghost:hover { background: #1a1a1a; }
.pnl-aff-btn-ghost.pnl-aff-copied { border-color: var(--success, #3ecf6e); color: var(--success, #3ecf6e); }
.pnl-aff-input {
width: 100%;
padding: 12px 14px;
border-radius: 11px;
border: 1px solid #262626;
background: #131313;
color: #fff;
font-size: 13px;
}
.pnl-aff-input::placeholder { color: #6b6b6b; }
.pnl-aff-input:focus { outline: none; border-color: color-mix(in oklab, var(--primary) 55%, transparent); }
.pnl-aff-btn-primary-wide {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
padding: 13px 16px;
border-radius: 12px;
border: none;
background: linear-gradient(135deg, var(--primary), color-mix(in oklab, var(--primary) 65%, #ff7d0b));
color: #fff;
font-size: 14px;
font-weight: 800;
cursor: pointer;
transition: opacity .15s ease, transform .1s ease;
}
.pnl-aff-btn-primary-wide:hover { opacity: .92; }
.pnl-aff-btn-primary-wide:active { transform: scale(.99); }
.pnl-aff-btn-primary-wide:disabled { opacity: .55; cursor: not-allowed; }
@media (max-width: 480px) {
.pnl-aff-modal { width: calc(100vw - 20px); border-radius: 16px; }
.pnl-aff-head { padding: 16px 14px 12px; }
.pnl-aff-body { padding: 14px; gap: 16px; }
}
/* ==========================================================================
Etapa 3 (resultado) do modal "Afiliar-se a este Produto" — post gerado
pela IA + botões de divulgação. Visual fiel ao 2º print de referência.
========================================================================== */
.pnl-aff-result { display: flex; flex-direction: column; gap: 14px; }
.pnl-aff-result-card {
border: 1.5px solid color-mix(in oklab, var(--primary) 55%, #2a2a2a);
background: color-mix(in oklab, var(--primary) 6%, #111);
border-radius: 12px;
padding: 12px;
display: flex;
flex-direction: column;
gap: 10px;
}
.pnl-aff-result-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.pnl-aff-result-label {
font-size: 11px;
font-weight: 800;
letter-spacing: .03em;
text-transform: uppercase;
color: var(--primary);
}
.pnl-aff-copy-text-btn {
display: flex;
align-items: center;
gap: 6px;
background: transparent;
border: none;
color: #b6b6b6;
font-size: 11.5px;
font-weight: 600;
padding: 4px 6px;
border-radius: 7px;
transition: color .15s ease, background .15s ease;
flex-shrink: 0;
}
.pnl-aff-copy-text-btn:hover { color: #fff; background: #1c1c1c; }
.pnl-aff-copy-text-btn.pnl-aff-copied { color: var(--success, #3ecf6e); }
.pnl-aff-result-body { display: flex; gap: 10px; align-items: stretch; }
.pnl-aff-result-img {
width: 88px;
height: 132px;
border-radius: 9px;
object-fit: cover;
object-position: center top;
flex-shrink: 0;
background: #222;
}
.pnl-aff-result-text {
margin: 0;
font-size: 12px;
line-height: 1.55;
color: #dcdcdc;
white-space: pre-line;
max-height: 132px;
overflow-y: auto;
flex: 1;
min-width: 0;
padding-right: 4px;
}
.pnl-aff-download-link {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11.5px;
font-weight: 700;
color: var(--primary);
align-self: flex-start;
}
.pnl-aff-download-link:hover { text-decoration: underline; }
.pnl-aff-groups-label { margin: 0; font-size: 12.5px; color: #9a9a9a; }
.pnl-aff-groups-row { display: flex; gap: 10px; }
.pnl-aff-group-btn {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
padding: 11px 10px;
border-radius: 11px;
font-size: 12.5px;
font-weight: 700;
cursor: pointer;
transition: opacity .15s ease, background .15s ease;
}
.pnl-aff-group-btn.primary {
background: #1877f2;
border: none;
color: #fff;
}
.pnl-aff-group-btn.primary:hover { opacity: .9; }
.pnl-aff-group-btn.outline {
background: transparent;
border: 1px solid #1877f2;
color: #4e9cff;
}
.pnl-aff-group-btn.outline:hover { background: color-mix(in oklab, #1877f2 12%, transparent); }
/* estado de carregamento do botão "Gerar Conteúdo com IA" */
.pnl-aff-btn-primary-wide.pnl-aff-loading { opacity: .8; cursor: wait; }
.pnl-aff-spinner {
width: 14px;
height: 14px;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, .35);
border-top-color: #fff;
animation: pnl-aff-spin .7s linear infinite;
flex-shrink: 0;
}
@keyframes pnl-aff-spin { to { transform: rotate(360deg); } }
@media (max-width: 380px) {
.pnl-aff-groups-row { flex-direction: column; }
}