/* /upgrade/sistema-compacto.css -- tela de cada sistema do Upgrade no formato do mockup aprovado pelo dono
   (2026-09-25, docs/mockups/upgrade/sistema-compacto.html, aba "Proposta"). A montagem está em sistema-compacto.js. */

/* "Planeje a evolução da sua conta" e o "← Jogos" ficam só no Hub */
#page-upgrade:has(#sub3-calc.active) > .hero,
#page-upgrade:has(#sub3-calc.active) > .platform-link,
body:has(.screen.active) #page-upgrade > .hero{display:none;}

/* a conta roda sozinha: os botões "Calcular" ficam escondidos (sistema-compacto.js clica neles) */
#sub3-calc #btn-calc,#sub3-calc #btn-range{display:none !important;}

/* ---- topo numa linha ---- */
.sc-cabeca{display:flex;align-items:center;gap:12px 14px;flex-wrap:wrap;margin:0 0 14px;}
.sc-cabeca .back-btn{margin:0 !important;}
.sc-ico-box{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:var(--calcfam-wash,rgba(255,255,255,.05));border:1px solid var(--calcfam-line,var(--border));flex:0 0 auto;}
.sc-ico{width:28px;height:28px;object-fit:contain;}
.sc-nomes{display:grid;gap:1px;margin-right:auto;min-width:0;}
.sc-nomes .calc-fam-eyebrow{margin:0 !important;}
.sc-nomes .calc-title{margin:0 !important;font-size:22px;}
.sc-salvo{font:600 12.5px var(--body,inherit);color:var(--live,#38d6a0);background:var(--live-wash,rgba(56,214,160,.12));border-radius:999px;padding:5px 12px;white-space:nowrap;}
#sub3-calc #calc-resource-note:empty{display:none;}
#sub3-calc #calc-resource-note{margin:0 0 10px !important;}

/* ---- faixa de entrada (igual ao "Quanto você vai gastar" dos Eventos) ---- */
.sc-entrada{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:end;background:var(--s-800,#141a25);border:1px solid var(--border,#29313d);border-radius:14px;padding:16px 18px;margin-bottom:10px;}
.sc-campos{display:flex;flex-wrap:wrap;gap:14px 16px;align-items:end;min-width:0;}
.sc-entrada[data-modo="lookup"] .sc-so-range,.sc-entrada[data-modo="rangeLevel"] .sc-so-lookup{display:none !important;}
.sc-campo{margin:0 !important;display:grid;gap:6px;flex:0 0 auto;justify-items:start;}
.sc-campo > label,.sc-campo .qty-label-row label,.sc-tem .resource-card-have-label{font:500 10.5px var(--mono,monospace) !important;letter-spacing:.1em;text-transform:uppercase;color:var(--t-low,#6b7686) !important;margin:0 !important;}
.sc-campo .qty-label-row{display:flex;align-items:center;gap:6px;margin:0;}
.sc-campo .qty-label-row .resource-icon{width:14px;height:14px;}
.sc-campo select{height:40px;min-width:140px;width:auto;border-radius:9px;font-weight:600;}
.sc-campo .field-with-preview{display:flex;align-items:center;gap:8px;}
/* Modo: as abas viram um seletor segmentado */
.sc-modo .subtabs{display:inline-flex;gap:0;margin:0;padding:3px;background:var(--s-900,#0c0f16);border:1px solid var(--border,#29313d);border-radius:10px;width:auto;}
.sc-modo .subtab{padding:7px 12px;font-size:12.5px;border-radius:7px;margin:0;}
/* +/- da quantidade */
.sc-stepper{display:inline-flex;align-items:center;height:40px;background:var(--s-900,#0c0f16);border:1px solid var(--line-hi,#3a4759);border-radius:9px;overflow:hidden;}
.sc-stepper button{width:32px;height:100%;background:none;border:0;color:var(--t-mid,#a7b0bd);font-size:17px;cursor:pointer;}
.sc-stepper button:hover{color:var(--t-hi,#f0f3f7);background:rgba(255,255,255,.04);}
.sc-stepper input{width:46px !important;min-width:0 !important;height:100%;border:0 !important;background:transparent !important;text-align:center;font-weight:700;padding:0 !important;-moz-appearance:textfield;}
.sc-stepper input::-webkit-inner-spin-button,.sc-stepper input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}
/* "quanto você já tem": vira campo da faixa */
.sc-tem{display:contents;}
.sc-tem .resource-card{display:grid;gap:6px;padding:0;margin:0;background:none;border:0;box-shadow:none;}
.sc-tem .resource-card-have-label{display:flex;align-items:center;gap:6px;}
.sc-tem .resource-card-have-label .resource-icon{width:14px;height:14px;}
.sc-tem .resource-card-have{height:40px;width:140px;padding:0 12px;border-radius:9px;font-weight:600;font-size:14px;}
/* destaque do 1º Ataque */
.sc-destaque{min-width:180px;text-align:center;border:1px solid var(--calcfam-line,rgba(240,169,59,.4));background:linear-gradient(160deg,var(--calcfam-wash,rgba(240,169,59,.12)),transparent);border-radius:12px;padding:10px 16px;}
.sc-destaque .k{font:500 10.5px var(--mono,monospace);letter-spacing:.1em;text-transform:uppercase;color:var(--t-mid,#a7b0bd);}
.sc-destaque .v{display:flex;align-items:center;justify-content:center;gap:6px;font:800 30px/1.15 var(--display,inherit);color:var(--calcfam,#f0a93b);}
.sc-destaque .s{font-size:12px;color:var(--t-mid,#a7b0bd);}
@media (max-width:760px){.sc-entrada{grid-template-columns:1fr;}.sc-destaque{justify-self:stretch;}}

/* explicação dos dois modos */
.sc-modos{margin:0 0 12px;font-size:12.5px;line-height:1.5;color:var(--t-mid,#a7b0bd);}
.sc-modos b{color:var(--t-hi,#f0f3f7);}

/* ---- painéis: só o resultado sobra dentro deles ---- */
#sub3-calc #panel-lookup,#sub3-calc #panel-rangeLevel{background:none;border:0;box-shadow:none;padding:0;}
#sub3-calc #panel-lookup > .card-title,#sub3-calc #panel-lookup > p,#sub3-calc #panel-lookup > .field-row,
#sub3-calc #panel-rangeLevel > .card-title,#sub3-calc #panel-rangeLevel > p:not(.upgrade-section-sub){display:none;}
#sub3-calc #panel-rangeLevel > .upgrade-section-sub{margin:0 0 10px !important;font-size:12px;}
#sub3-calc .results.show{margin-top:0;}
/* o que a conta preenche continua existindo, escondido; os cartões abaixo leem dele */
#sub3-calc .results > .stat-grid,#sub3-calc #lk-resource-cards,#sub3-calc #rl-resource-cards,#sub3-calc #lk-nivel-nota{display:none !important;}

/* ---- 2 cartões: Quanto custa / Vale a pena? ---- */
.sc-res{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:12px;}
.sc-res:empty{display:none;}
@media (max-width:760px){.sc-res{grid-template-columns:1fr;}}
.sc-cartao{background:var(--s-800,#141a25);border:1px solid var(--border,#29313d);border-radius:14px;padding:14px 18px;display:grid;gap:8px;align-content:start;}
.sc-cartao h3{margin:0 0 2px;font:700 15px var(--display,inherit);display:flex;align-items:center;justify-content:space-between;gap:10px;}
.sc-pill{font:600 12px var(--mono,monospace);border-radius:999px;padding:2px 10px;background:var(--or-wash);color:var(--or);border:1px solid var(--or-line);white-space:nowrap;}
.sc-linha{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--border,#29313d);}
.sc-cartao h3 + .sc-linha{border-top:0;}
.sc-linha span{display:inline-flex;align-items:center;gap:10px;color:var(--t-mid,#a7b0bd);font-size:14px;}
.sc-linha img{width:20px;height:20px;object-fit:contain;}
.sc-linha b{font-size:15px;font-variant-numeric:tabular-nums;text-align:right;}
.sc-linha b.ok{color:var(--live,#38d6a0);}
.sc-linha b.falta{color:#ff9b5a;}
.sc-barra{height:6px;border-radius:3px;background:var(--s-700,#1a2130);overflow:hidden;margin:2px 0 4px;}
.sc-barra i{display:block;height:100%;background:var(--calcfam,#f0a93b);}
.sc-conv:empty{display:none;}
.sc-conv .conv-linha{margin:0;font-size:11.5px;}
.sc-rank{display:flex;align-items:center;gap:14px;}
.sc-pos{font:800 36px/1 var(--display,inherit);color:var(--or);flex:0 0 auto;}
.sc-cartao p{margin:0;font-size:13.5px;line-height:1.5;color:var(--t-mid,#a7b0bd);}
.sc-cartao p b{color:var(--t-hi,#f0f3f7);}
.sc-cartao .sc-nota{font-size:12px;color:var(--t-low,#6b7686);}
.sc-link{justify-self:start;background:none;border:0;padding:0;font:600 13.5px var(--body,inherit);color:var(--or-300);cursor:pointer;}
.sc-link:hover{color:var(--or);}

/* "Mostrar detalhes" vira a barra recolhida do mockup */
#sub3-calc .results > .details-toggle{display:flex;justify-content:space-between;align-items:center;background:var(--s-800,#141a25);border:1px solid var(--border,#29313d);border-radius:12px;padding:11px 18px;margin:0;text-decoration:none;}

@media (max-width:600px){
  .sc-campo,.sc-campo select,.sc-tem .resource-card-have{width:100%;}
  .sc-campos > *{flex:1 1 100%;}
}