/* vistas.css — os PCs Sugeridos e o Kit Upgrades, para viverem DENTRO de
 * qualquer tema do /monte-seu-pc.
 *
 * Antes: PCs Sugeridos era uma página própria e Kit Upgrades era uma aba só do
 * clássico. Quem estava na Night City clicava em "PCs Sugeridos" e caía numa
 * página com outra cara — saía do tema que tinha escolhido.
 *
 * Agora as duas são VISTAS montadas dentro da página do tema. O comportamento
 * está em sugeridos.js e kits.js; a estrutura está aqui; e a cor sai dos tokens
 * que o /admin já define (--surface, --text, --brand…). Um tema com paleta
 * própria só mapeia a dele nesses nomes dentro do container:
 *
 *   #vistaSugeridos,#vistaKits{--surface:#0E0E11;--text:#EDEDF0;--brand:#FCEE0A;...}
 *
 * Quinze linhas por tema, em vez de 150 de CSS copiada em quatro lugares.
 *
 * O clássico e a página /monte-seu-pc/pcs-sugeridos/ já definem esses tokens e
 * não precisam mapear nada. As regras próprias de cada página continuam
 * vencendo: esta folha entra ANTES do <style> delas.
 */

/* ================= PCs Sugeridos ================= */
#rpGrid[hidden],#rpDetail[hidden],#rpEmpty[hidden],.rp-controls[hidden]{display:none!important}
button{font-family:inherit}
/* ===== header ===== */
/* ===== hero ===== */
.slabel{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-2);display:flex;align-items:center;gap:8px}
.slabel::before{content:'';width:18px;height:2px;background:var(--accent-2);border-radius:2px}
.rp-title{font-family:var(--font-display);font-size:clamp(24px,3.2vw,32px);font-weight:800;margin:6px 0 8px}
.rp-sub{color:var(--text-2);font-size:14.5px;max-width:760px;margin:0 auto;line-height:1.65}
.rp-head{text-align:center;margin-bottom:22px}
/* ===== toggle de modo ===== */
.modebar{display:flex;justify-content:center;margin:26px 0 8px}
.mode-tgl{display:inline-flex;background:var(--surface);border:1px solid var(--border-strong);border-radius:99px;padding:5px;gap:5px}
.mode-tgl button{border:0;background:transparent;color:var(--text-2);font-size:13.5px;font-weight:700;padding:10px 22px;border-radius:99px;cursor:pointer;transition:all .18s;white-space:nowrap}
.mode-tgl button.on{background:linear-gradient(120deg,var(--brand-bright),var(--brand));color:var(--on-brand);box-shadow:var(--shadow-brand)}
.mode-hint{text-align:center;font-size:12px;color:var(--text-3);margin-top:9px;min-height:18px}
.mode-hint b{color:var(--brand-bright)}
/* ===== filtros ===== */
.rp-controls{margin:22px 0 18px;display:flex;flex-direction:column;gap:10px}
.rp-frow{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center}
.rp-flabel{font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--text-3);margin-right:4px}
.rp-chip,.rp-obtn{border:1px solid var(--border-strong);background:var(--surface);color:var(--text-2);border-radius:99px;padding:7px 15px;font-size:12.5px;font-weight:600;cursor:pointer;transition:all .15s}
.rp-chip:hover,.rp-obtn:hover{border-color:var(--brand-border);color:var(--text)}
.rp-chip.on,.rp-obtn.on{background:var(--brand-tint);border-color:var(--brand-border);color:var(--brand-bright)}
.rp-count{text-align:center;font-size:12px;color:var(--text-3)}
/* Opcionais gerados pelo montador e pelos PCs sugeridos, em todos os temas. */
.p-extra,.x-extra{margin-top:20px;min-width:0;color:inherit}
.p-extra h4,.x-extra h4{margin:0 0 6px;font-size:15px;line-height:1.4}
.p-extra-txt,.x-extra .x-txt{margin:0 0 12px;font-size:13px;line-height:1.5;opacity:.8}
.p-extra .p-opts,.x-extra .x-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:10px;min-width:0}
.p-extra .p-opt,.x-extra .x-opt{display:grid;grid-template-columns:48px minmax(0,1fr);grid-template-rows:auto auto auto;align-content:center;align-items:center;gap:4px 12px;width:100%;min-width:0;min-height:106px;margin:0;padding:12px;text-align:left;font:inherit;color:inherit;background:color-mix(in srgb,currentColor 4%,transparent);border:1px solid color-mix(in srgb,currentColor 22%,transparent);border-radius:10px;cursor:pointer;box-sizing:border-box;overflow:hidden}
.p-extra .p-opt img,.x-extra .x-opt img{grid-column:1;grid-row:1/4;display:block;width:48px;height:48px;min-width:48px;max-width:48px;max-height:48px;object-fit:contain;border-radius:6px;background:#fff;padding:3px;box-sizing:border-box}
.p-extra .p-opt-n,.x-extra .x-opt-n{grid-column:2;grid-row:1;min-width:0;font-size:12.5px;line-height:1.4;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.p-extra .p-opt-p,.x-extra .x-opt-p{grid-column:2;grid-row:2;font-size:14px;line-height:1.4;font-weight:700}
.p-extra .p-opt-a,.x-extra .x-opt-a{grid-column:2;grid-row:3;font-size:12px;line-height:1.4;font-weight:600;opacity:.85}
.p-extra .p-opt:hover,.x-extra .x-opt:hover{background:color-mix(in srgb,currentColor 9%,transparent);border-color:currentColor}
.p-extra .p-opt:focus-visible,.x-extra .x-opt:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.p-extra .p-opt.posto,.x-extra .x-opt.posto{opacity:.65;cursor:default}
/* ===== grid de cards ===== */
.rp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px;margin-bottom:20px}
.rp-card{position:relative;border:1px solid var(--border-strong);border-radius:var(--radius-lg);background:var(--surface);padding:20px;display:flex;flex-direction:column;gap:9px;transition:transform .18s,border-color .18s,box-shadow .18s}
.rp-card:hover{transform:translateY(-3px);border-color:var(--brand-border);box-shadow:var(--shadow-brand)}
.rp-card.hide{display:none}
.rp-card.skel{min-height:380px;background:linear-gradient(110deg,var(--surface) 30%,var(--surface-2) 45%,var(--surface) 60%);background-size:220% 100%;animation:sk 1.3s linear infinite;border-color:var(--border)}
@keyframes sk{to{background-position:-120% 0}}
.rp-badge{position:absolute;top:14px;right:14px;background:var(--brand-tint);border:1px solid var(--brand-border);color:var(--brand-bright);font-size:10px;font-weight:800;letter-spacing:.07em;padding:4px 10px;border-radius:99px}
.rp-card.r-epic .rp-badge{background:#8b5cf622;border-color:#8b5cf666;color:#c4b5fd}
.rp-card.r-legendary .rp-badge{background:#ff6a1a1c;border-color:#ff6a1a66;color:#ffb27a}
.rp-card.r-mythic .rp-badge{background:#ff2d551c;border-color:#ff2d5566;color:#ff8fa3}
.rp-card.r-epic{border-color:#8b5cf655}.rp-card.r-legendary{border-color:#ff6a1a55}.rp-card.r-mythic{border-color:#ff2d5555}
.rp-name{font-family:var(--font-display);font-size:19px;font-weight:700;padding-right:86px}
.rp-res{font-size:12.5px;color:var(--text-3);margin-top:-6px}
.rp-thumb{border-radius:var(--radius);background:var(--surface-2);border:1px solid var(--border);overflow:hidden;aspect-ratio:16/10;display:flex;align-items:center;justify-content:center}
.rp-thumb img{width:100%;height:100%;object-fit:contain;padding:8px}
.rp-specs{display:flex;gap:8px;flex-wrap:wrap}
.rp-spec{font-size:11.5px;color:var(--text-2);background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:5px 9px}
.rp-spec b{color:var(--text)}
.rp-runs{display:flex;flex-direction:column;gap:4px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:9px 11px}
.rp-run{display:flex;justify-content:space-between;font-size:12px;color:var(--text-2)}
.rp-run b{color:var(--brand-bright);font-weight:700}
.rp-tagline{font-size:12px;color:var(--text-3);line-height:1.5}
.rp-price{margin-top:auto;padding-top:9px;border-top:1px solid var(--border)}
.pblk .ppix2{font-weight:800;font-size:16px;color:var(--brand-bright);white-space:nowrap}
.pblk .pinst{font-size:12.5px;font-weight:600;color:var(--text-2);white-space:nowrap}
.pblk .ppix2 b{color:var(--brand)}
.pfrom{font-size:10.5px;color:var(--text-3);text-transform:uppercase;letter-spacing:.08em;font-weight:700}
.rp-cta{display:flex;gap:9px;margin-top:10px}
.rp-view{flex:1;border:0;border-radius:10px;background:linear-gradient(120deg,var(--brand-bright),var(--brand));color:var(--on-brand);font-weight:800;font-size:13.5px;padding:11px;cursor:pointer;transition:filter .15s}
.rp-view:hover{filter:brightness(1.08)}
.rp-wa{flex:0 0 44px;display:flex;align-items:center;justify-content:center;border:1px solid #25d36655;border-radius:10px;background:#25d36614;text-decoration:none;font-size:17px}
.rp-empty{border:1px dashed var(--border-strong);border-radius:var(--radius);padding:34px;text-align:center;color:var(--text-3);font-size:14px;grid-column:1/-1}
/* ===== detalhe ===== */
.rp-back{background:none;border:0;color:var(--text-2);font-size:13.5px;font-weight:600;cursor:pointer;margin:0 0 16px;padding:0}
.rp-back:hover{color:var(--brand-bright)}
.compat-bar{border-radius:var(--radius);padding:12px 16px;margin:0 0 18px;border:1px solid}
.compat-bar.ok{background:#a6e22e10;border-color:#a6e22e44}
.compat-bar .ch{font-weight:800;font-size:14px;color:var(--brand-bright)}
.compat-bar .csub{font-size:12.5px;color:var(--text-2);margin-top:2px}
.dgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:13px;margin:14px 0 8px}
.dcomp{position:relative;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);padding:13px;display:flex;flex-direction:column;gap:7px}
.dcomp-rarity{position:absolute;top:0;right:0;z-index:3;padding:4px 9px;border-radius:0 var(--radius) 0 10px;font:800 10px/1.3 system-ui;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:#7534ba}
.dcomp-rarity.r-legendary{background:#9c4800}.dcomp-rarity.r-mythic{background:#bb1835}
.dcomp:has(.dcomp-rarity) .cat{padding-right:90px}
.dcomp .cat{font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--accent-2)}
.dcomp .imgbox{height:166px;display:flex;align-items:center;justify-content:center;background:#fff;border-radius:var(--radius-sm);overflow:hidden}
/* botão de trocar a peça do PC pronto (trocar.js) */
.dcomp .dtroca{display:flex;align-items:center;justify-content:center;text-align:center;text-decoration:none;line-height:1.3;box-sizing:border-box;margin-top:2px;min-height:38px;padding:0 12px;font:inherit;font-size:12px;font-weight:700;
  color:var(--text);background:var(--surface-2);border:1px solid var(--border-strong);border-radius:9px;
  cursor:pointer;transition:background .15s,transform .15s}
.dcomp .dtroca:hover{background:var(--surface-3,var(--surface-2));transform:translateY(-1px)}
@media(prefers-reduced-motion:reduce){.dcomp .dtroca:hover{transform:none}}
.dcomp .imgbox img{max-height:100%;object-fit:contain}
.dcomp .nm{font-size:12px;color:var(--text-2);line-height:1.4;min-height:34px}
.dcomp .pblk .ppix2{font-size:15px}
.dcomp .pblk .pinst{font-size:12px}
.cta-total{margin-top:20px;border:1px solid var(--brand-border);border-radius:var(--radius-lg);background:linear-gradient(140deg,var(--brand-tint-soft),var(--surface));padding:20px;display:flex;flex-direction:column;gap:13px}
.mont-note{display:flex;gap:11px;align-items:flex-start;background:var(--surface-2);border:1px solid var(--border-strong);border-radius:var(--radius);padding:12px 15px;font-size:13px;color:var(--text-2);line-height:1.55}
.mont-note .ic{font-size:18px;line-height:1.3}
.mont-note.asm{border-color:var(--brand-border);background:var(--brand-tint-soft)}
.tp{display:flex;flex-direction:column;align-items:center;gap:1px;font-size:12px;color:var(--text-3);text-transform:uppercase;letter-spacing:.09em;font-weight:700}
.tp b{font-size:26px;font-family:var(--font-display);color:var(--brand-bright);letter-spacing:0;text-transform:none}
.tp small{font-size:12.5px;color:var(--text-2);font-weight:600;letter-spacing:0;text-transform:none}
.cta-actions{display:flex;gap:11px;flex-wrap:wrap}
.cbtn{flex:1;min-width:170px;border-radius:11px;padding:13px;font-size:14px;font-weight:800;cursor:pointer;text-align:center;text-decoration:none;transition:filter .15s;border:0}
.cbtn.primary{background:linear-gradient(120deg,var(--brand-bright),var(--brand));color:var(--on-brand)}
.cbtn.primary:hover{filter:brightness(1.08)}
.cbtn.add{background:var(--surface-3);color:var(--text);border:1px solid var(--border-strong)}
.cbtn.add:hover{border-color:var(--brand-border)}
.cbtn.wa2{background:#25d36614;color:#4be07f;border:1px solid #25d36644}
.cbtn.wa2:hover{background:#25d36622}
/* ===== disclaimer FPS ===== */
.fpsdisc{display:flex;align-items:center;gap:7px;margin-top:10px;font-size:11.5px;color:var(--text-3);line-height:1.5}
.fpsinfo{position:relative;flex:0 0 auto;width:16px;height:16px;border-radius:50%;border:1px solid var(--text-3);display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-style:normal;cursor:pointer;user-select:none}
.fpsinfo:hover,.fpsinfo.open{border-color:var(--brand);color:var(--brand-bright)}
.fpstip{position:absolute;bottom:calc(100% + 9px);left:50%;transform:translateX(-50%) translateY(4px);width:min(330px,78vw);background:var(--surface-3);border:1px solid var(--border-strong);border-radius:var(--radius-sm);padding:11px 13px;font-size:11.5px;line-height:1.6;color:var(--text-2);box-shadow:0 14px 40px #000b;opacity:0;pointer-events:none;transition:.18s;z-index:60;text-align:left;font-weight:400}
.fpsinfo:hover .fpstip,.fpsinfo:focus .fpstip,.fpsinfo.open .fpstip{opacity:1;transform:translateX(-50%) translateY(0)}
/* ===== CTA configurador ===== */
@media(max-width:640px){.mode-tgl button{padding:9px 13px;font-size:12px}.cta-actions{flex-direction:column}}

/* ================= Kit Upgrades ================= */
/* ===== Kit Upgrades ===== */
.kit-banner{margin:0 0 18px;border:1px solid var(--brand-border);border-radius:var(--radius-lg);background:linear-gradient(120deg,var(--brand-tint),var(--surface));overflow:hidden}
.kit-banner .kb-txt{padding:15px 20px;display:flex;flex-direction:column;gap:4px}
.kit-banner .kb-txt b{font-family:var(--font-display);font-size:16.5px;color:var(--text)}
.kit-banner .kb-txt span{font-size:13px;color:var(--text-2);max-width:640px;line-height:1.6}
.kit-banner .kit-banner-img{display:block;width:100%;max-height:260px;object-fit:cover}
/* controles da aba: uma familia por vez + filtro de socket (68 combos de uma vez
   viravam 6.500px de rolagem) */
.kit-ctrls{display:flex;flex-direction:column;gap:11px;align-items:center;margin:0 0 20px}
.kit-fams{display:inline-flex;background:var(--surface);border:1px solid var(--border-strong);border-radius:99px;padding:5px;gap:5px}
.kit-fams button{border:0;background:transparent;color:var(--text-2);font-size:13px;font-weight:700;padding:9px 18px;border-radius:99px;cursor:pointer;transition:all .18s;white-space:nowrap}
.kit-fams button.on{background:linear-gradient(120deg,var(--brand-bright),var(--brand));color:var(--on-brand);box-shadow:var(--shadow-brand)}
.kit-socks{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center}
.kit-famnote{font-size:12.5px;color:var(--text-3);text-align:center;max-width:620px;margin:-3px auto 0}
.kit-count{font-size:12px;color:var(--text-3);text-align:center}
.kit-more{display:flex;justify-content:center;margin-top:22px}
.kit-more button{border:1px solid var(--brand-border);background:var(--brand-tint);color:var(--brand-bright);font-size:13px;font-weight:700;padding:11px 26px;border-radius:99px;cursor:pointer;transition:all .15s}
.kit-more button:hover{background:var(--brand);color:var(--on-brand)}
.kit-fam{margin-bottom:34px}
.kit-fam-h{font-family:var(--font-display);font-size:20px;font-weight:700;color:var(--text);margin:0 0 4px}
.kit-fam-s{font-size:13px;color:var(--text-3);margin:0 0 16px}
.kit-sock{margin-bottom:20px}
.kit-sock-h{font-size:11.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--accent-2);margin:0 0 10px}
.kitc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.kitc{position:relative;border:1px solid var(--border-strong);border-radius:var(--radius);background:var(--surface);padding:15px 16px;display:flex;flex-direction:column;gap:12px;transition:border-color .15s,transform .15s}
.kitc:hover{border-color:var(--brand-border);transform:translateY(-2px)}
.kitc-badge{position:absolute;top:-9px;right:12px;background:var(--brand);color:var(--on-brand);font-size:10px;font-weight:800;letter-spacing:.05em;padding:3px 10px;border-radius:99px}
.kitc-parts{display:flex;align-items:stretch;gap:7px}
.kitc-part{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:9px 6px}
.kitc-part img{width:100%;height:52px;object-fit:contain}
.kitc-cat{font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.kitc-nm{font-size:10.5px;color:var(--text-2);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.kitc-plus{align-self:center;font-weight:800;color:var(--brand-bright);font-size:15px;flex:0 0 auto}
.kitc-price{display:flex;justify-content:center}
.kitc-buy{width:100%}

/* ---- o modelo 3D dentro do card do PC sugerido ----
   A marcação é a completa do PC3D.html(): cabeçalho, controles e painel de luz
   vêm junto porque o mount() do pc3d lê esses nós sem checar nulo. No card eles
   não fazem sentido — o card é vitrine, quem explora abre a build. Some por
   CSS; a peça continua inteira no DOM, e a mesma marcação serve aos dois usos. */
.rp-thumb3d{margin:10px 0 12px}
.rp-thumb3d .pc3d-head,
.rp-thumb3d .pc3d-ctrls,
.rp-thumb3d .pc3d-lights,
.rp-thumb3d .pc3d-parts,
.rp-thumb3d .pc3d-selection,
.rp-thumb3d .pc3d-note,
.rp-thumb3d .pc3d-legend{display:none !important}
.rp-thumb3d .pc3d{margin:0;border:0;background:transparent;padding:0}
.rp-thumb3d .pc3d-stage{height:190px;min-height:0;border-radius:var(--radius-sm);
  background:var(--surface-2)}
/* no card ninguém arrasta: o clique é pra abrir a build, não pra girar */
.rp-thumb3d .pc3d-stage{pointer-events:none}