/* /upgrade/vestes/vestes.css -- tela das Vestes (mockup aprovado: docs/mockups/upgrade/vestes.html). Letra mínima 15px (regra 18);
   cenário de fio e agulha (regra 11) e feixe de luz em todo bloco (regra 20, via .vt-cena::after). */
#screen-vestes{
  --vt-card:#0f131c; --vt-card2:#141a25; --vt-card3:#1a2130; --vt-line:#29313d; --vt-line-hi:#3a4759;
  --vt-hi:#f0f3f7; --vt-mid:#a7b0bd; --vt-low:#7d8796;
  --vt-cyan:#20d3e0; --vt-cyan-300:#8ceff5; --vt-cyan-wash:rgba(32,211,224,.12); --vt-cyan-line:rgba(32,211,224,.38);
  --vt-fam:#ef7fb3; --vt-fam-wash:rgba(239,127,179,.12); --vt-fam-line:rgba(239,127,179,.42);
  --vt-live:#38d6a0; --vt-live-wash:rgba(56,214,160,.12); --vt-warn:#ff9b5a;
  gap:14px; font-size:15px; color:var(--vt-hi);
}
#screen-vestes.active{display:grid}
#screen-vestes h2,#screen-vestes h3{margin:0;font-family:'Rubik','Inter',system-ui,sans-serif;line-height:1.15;text-wrap:balance}
#screen-vestes p{margin:0}
.vt-ic{width:22px;height:22px;object-fit:contain;flex:none;vertical-align:-5px}
.vt-ic.g{width:30px;height:30px}

/* cenário (o feixe de luz vem do arquivo central: .vt-cena está na lista de public/artes/feixe-onda.css) */
.vt-cena{position:relative;overflow:hidden;isolation:isolate}
.vt-cena::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--vt-fam);z-index:2}
.vt-fundo{position:absolute;inset:0;z-index:-2;opacity:.55;pointer-events:none;color:var(--vt-fam)}
.vt-fundo svg{width:100%;height:100%;display:block}
.vt-cortes{position:absolute;inset:0;z-index:-1;pointer-events:none}
.vt-cortes i{position:absolute;height:2px;border-radius:2px;transform:rotate(-28deg);background:linear-gradient(90deg,transparent,var(--vt-fam) 40%,#fff 50%,var(--vt-fam) 60%,transparent);opacity:.35}
.vt-cortes i:nth-child(1){width:40%;right:2%;top:30%}.vt-cortes i:nth-child(2){width:24%;right:14%;top:66%;opacity:.22}
.vt-fio{stroke-dasharray:14 10;animation:vt-fio 9s linear infinite}@keyframes vt-fio{to{stroke-dashoffset:-240}}
.vt-agulha{animation:vt-agulha 7s ease-in-out infinite alternate;transform-box:fill-box}@keyframes vt-agulha{from{transform:translateX(-30px)}to{transform:translateX(40px)}}
@media (prefers-reduced-motion:reduce){.vt-fio,.vt-agulha{animation:none}}

.vt-topo{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:14px 16px;border:1px solid var(--vt-line);border-radius:14px;background:var(--vt-card)}
.vt-voltar{display:inline-flex;align-items:center;gap:6px;font:600 15px var(--font,Inter,sans-serif);color:#061418;background:var(--vt-cyan);border:0;border-radius:999px;padding:7px 14px;cursor:pointer;justify-self:start}
.vt-titulo{display:flex;align-items:center;gap:10px;margin-right:auto}
.vt-ico{width:42px;height:42px;border-radius:10px;background:var(--vt-fam-wash);border:1px solid var(--vt-fam-line);display:grid;place-items:center}
.vt-titulo h2{font-size:22px;font-weight:800}
.vt-fam{font:500 15px 'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--vt-fam)}
.vt-salvo{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:15px;color:var(--vt-live);background:var(--vt-live-wash);border-radius:999px;padding:4px 12px}
.vt-como-btn{font-weight:600;font-size:15px;color:var(--vt-cyan-300);background:transparent;border:1px solid var(--vt-cyan-line);border-radius:999px;padding:6px 12px;cursor:pointer}

.vt-abas{display:flex;gap:8px;flex-wrap:wrap}
.vt-abas button{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:15px;color:var(--vt-mid);background:var(--vt-card2);border:1px solid var(--vt-line);border-radius:10px;padding:8px 18px;cursor:pointer}
.vt-abas button[aria-selected="true"]{color:#1d0a13;background:var(--vt-fam);border-color:var(--vt-fam)}
#vt-corpo{display:grid;gap:14px}

.vt-entrada{background:var(--vt-card);border:1px solid var(--vt-line);border-radius:14px;padding:16px;display:grid;grid-template-columns:1fr auto;gap:16px;align-items:end}
.vt-campos{display:flex;flex-wrap:wrap;gap:14px 16px;align-items:end}
.vt-campo{display:grid;gap:6px}
.vt-campo label{font:500 15px 'IBM Plex Mono',ui-monospace,monospace;color:var(--vt-low);display:flex;align-items:center;gap:6px}
.vt-seg{display:inline-flex;background:var(--vt-card2);border:1px solid var(--vt-line);border-radius:10px;padding:3px}
.vt-seg button{font-weight:600;font-size:15px;color:var(--vt-mid);background:transparent;border:0;border-radius:7px;padding:7px 12px;cursor:pointer}
.vt-seg button[aria-pressed="true"]{background:var(--vt-fam);color:#1d0a13}
.vt-stepper{display:inline-grid;grid-template-columns:36px 64px 36px;align-items:center;height:40px;background:var(--vt-card2);border:1px solid var(--vt-line-hi);border-radius:9px}
.vt-stepper.largo{grid-template-columns:36px 96px 36px}
.vt-stepper button{height:100%;background:none;border:0;color:var(--vt-mid);font-size:18px;cursor:pointer}
.vt-stepper span{text-align:center;font-weight:700;font-size:15px;font-variant-numeric:tabular-nums}
.vt-tem{display:flex;flex-wrap:wrap;gap:10px 14px}
.vt-destaque{min-width:200px;text-align:center;border:1px solid var(--vt-fam-line);background:linear-gradient(160deg,var(--vt-fam-wash),transparent);border-radius:12px;padding:12px 16px}
.vt-destaque .k{font:500 15px 'IBM Plex Mono',ui-monospace,monospace;color:var(--vt-mid)}
.vt-destaque .v{font:800 32px/1.1 'Rubik',sans-serif;color:var(--vt-fam);display:flex;align-items:center;justify-content:center;gap:8px}
.vt-destaque .s{font-size:15px;color:var(--vt-mid)}
.vt-q{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;border:2px dashed var(--vt-warn);color:var(--vt-warn);font:800 18px 'Rubik',sans-serif}
@media (max-width:760px){.vt-entrada{grid-template-columns:1fr}.vt-destaque{justify-self:stretch}}
.vt-modos{font-size:15px;color:var(--vt-mid)}
.vt-modos b{color:var(--vt-hi)}

/* resultado em 2 colunas, mesma altura (regra 25) */
.vt-res{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:stretch}
@media (max-width:760px){.vt-res{grid-template-columns:1fr}}
.vt-cartao{background:var(--vt-card);border:1px solid var(--vt-line);border-radius:14px;padding:16px;display:grid;gap:10px;align-content:start}
.vt-cartao h3{font-size:17px;font-weight:700;display:flex;align-items:center;justify-content:space-between;gap:8px}
.vt-cartao p{font-size:15px;color:var(--vt-mid)}
.vt-cartao p b{color:var(--vt-hi)}
.vt-pill{font:600 15px 'IBM Plex Mono',ui-monospace,monospace;border-radius:999px;padding:2px 10px;background:var(--vt-cyan-wash);color:var(--vt-cyan);border:1px solid var(--vt-cyan-line);white-space:nowrap}
.vt-pill.warn{background:rgba(255,155,90,.12);color:var(--vt-warn);border-color:rgba(255,155,90,.45)}
.vt-linha{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:8px 0;border-top:1px solid var(--vt-line)}
#vt-custo .vt-linha:first-child{border-top:0}
.vt-linha span{color:var(--vt-mid);display:inline-flex;align-items:center;gap:8px}
.vt-linha b{font-variant-numeric:tabular-nums;font-size:16px;text-align:right}
.vt-linha b.falta{color:var(--vt-warn)}
.vt-linha b.ok{color:var(--vt-live)}
.vt-barra{height:6px;border-radius:3px;background:var(--vt-card3);overflow:hidden}
.vt-barra i{display:block;height:100%;background:var(--vt-fam)}
.vt-nota{font-size:15px;color:var(--vt-low)}
.vt-nota.warn{color:var(--vt-warn)}
.vt-link{font-weight:600;font-size:15px;color:var(--vt-cyan-300);background:none;border:0;padding:0;cursor:pointer;justify-self:start}

/* gavetas fechadas (regra 30) */
.vt-gaveta{background:var(--vt-card);border:1px solid var(--vt-line);border-radius:12px;padding:0 16px}
.vt-gaveta summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;padding:12px 0;color:var(--vt-mid);font-size:15px}
.vt-gaveta summary::-webkit-details-marker{display:none}
.vt-gaveta summary::after{content:"▾";color:var(--vt-cyan-300)}
.vt-gaveta[open] summary::after{content:"▴"}
.vt-tab-wrap{overflow-x:auto;padding-bottom:12px}
#vt-tabela{border-collapse:collapse;width:100%;font-size:15px;font-variant-numeric:tabular-nums;min-width:520px}
#vt-tabela th,#vt-tabela td{padding:7px 10px;border-top:1px solid var(--vt-line);text-align:right;white-space:nowrap}
#vt-tabela th{font:500 15px 'IBM Plex Mono',ui-monospace,monospace;color:var(--vt-low)}
#vt-tabela th:nth-child(2),#vt-tabela td.tipo,#vt-tabela th:first-child,#vt-tabela td:first-child{text-align:left}
#vt-tabela td.tipo span{display:inline-flex;align-items:center;gap:6px}
#vt-tabela tr.na-rota td{background:var(--vt-fam-wash)}
#vt-tabela td.conf{color:var(--vt-warn)}
.vt-passos{margin:0;padding:4px 0 14px 20px;color:var(--vt-mid);display:grid;gap:6px;font-size:15px}
.vt-passos b{color:var(--vt-hi)}

/* em breve (público) */
.vt-breve{border:1px solid var(--vt-line);border-radius:14px;background:var(--vt-card);padding:28px 20px;display:grid;gap:8px;text-align:center}
.vt-breve h2{font-size:24px}
.vt-breve p{color:var(--vt-mid)}

/* sub-abas Vestes | Roupas (mockup docs/mockups/upgrade/vestes-e-roupas.html) */
#screen-vestes [hidden]{display:none !important}
.vt-sub{display:flex;border-bottom:2px solid var(--vt-line)}
.vt-sub button{font:800 17px 'Rubik','Inter',sans-serif;color:var(--vt-mid);background:transparent;border:0;border-bottom:3px solid transparent;margin-bottom:-2px;padding:10px 22px;cursor:pointer}
.vt-sub button[aria-selected="true"]{color:var(--vt-hi);border-bottom-color:var(--vt-fam)}
.vt-sub button:focus-visible{outline:2px solid var(--vt-cyan);outline-offset:2px}
#vt-roupas{display:grid;gap:14px}
.vt-ic-falta{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:8px;border:2px dashed var(--vt-warn);color:var(--vt-warn);font:800 16px 'Rubik',sans-serif;font-style:normal;flex:none}
.vt-seg{flex-wrap:wrap}
.vt-gaveta.vt-solta{background:transparent;border:0;border-top:1px solid var(--vt-line);border-radius:0;padding:0}
.vt-rk-wrap{padding-bottom:10px;overflow-x:auto}
.vt-rk{display:grid;grid-template-columns:minmax(180px,1.6fr) minmax(180px,1.6fr) 90px 90px 90px;gap:10px;align-items:center;padding:9px 0;border-top:1px solid var(--vt-line);font-size:15px;min-width:640px}
.vt-rk.cab{border-top:0;font:500 15px 'IBM Plex Mono',ui-monospace,monospace;color:var(--vt-low)}
.vt-rk .n{text-align:right;font-variant-numeric:tabular-nums}
.vt-rk .nm{display:flex;align-items:center;gap:10px;min-width:0}
.vt-rk .ev{display:flex;flex-direction:column;min-width:0}
.vt-rk small,.vt-comp small{color:var(--vt-low);font-size:15px}
.vt-rk.melhor{background:var(--vt-fam-wash);margin:0 -10px;padding-left:10px;padding-right:10px;border-radius:8px}
.vt-comp{display:grid;grid-template-columns:minmax(150px,1.4fr) minmax(90px,2fr) 70px;gap:10px;align-items:center;font-size:15px;padding:6px 0}
.vt-comp .nm{display:flex;align-items:center;gap:10px;min-width:0}
.vt-comp .nm>span{display:flex;flex-direction:column}
.vt-comp .tr{height:10px;border-radius:6px;background:var(--vt-card3);overflow:hidden}
.vt-comp .tr i{display:block;height:100%;background:var(--vt-cyan);border-radius:6px}
.vt-comp.rou .tr i{background:var(--vt-fam)}
.vt-comp b{text-align:right;font-variant-numeric:tabular-nums}
.vt-total{font:800 30px/1.1 'Rubik',sans-serif;color:var(--vt-fam);font-variant-numeric:tabular-nums}
.vt-total small{font:600 15px 'Inter',sans-serif;color:var(--vt-mid)}
.vt-minhas{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px;padding-bottom:14px}
.vt-minhas label{display:flex;align-items:center;gap:10px;background:var(--vt-card2);border:1px solid var(--vt-line);border-radius:10px;padding:8px 12px;font-size:15px;cursor:pointer}
.vt-minhas label:has(input:checked){border-color:var(--vt-fam-line);background:var(--vt-fam-wash)}
.vt-minhas input{width:18px;height:18px;accent-color:#ef7fb3}
.vt-minhas .v{margin-left:auto;font-variant-numeric:tabular-nums}
#vt-rtabela{border-collapse:collapse;width:100%;font-size:15px;font-variant-numeric:tabular-nums;min-width:520px}
#vt-rtabela th,#vt-rtabela td{padding:7px 10px;border-top:1px solid var(--vt-line);text-align:right;white-space:nowrap}
#vt-rtabela th{font:500 15px 'IBM Plex Mono',ui-monospace,monospace;color:var(--vt-low)}
#vt-rtabela th:first-child,#vt-rtabela td:first-child{text-align:left}
#vt-rtabela td .tipo{display:inline-flex;align-items:center;gap:8px}
#vt-rtabela td.conf{color:var(--vt-warn)}
#vt-roupas .vt-campos{display:grid;gap:14px;min-width:0}
#vt-roupas .vt-seg{flex-wrap:wrap;gap:4px;max-width:100%}
#vt-roupas .vt-seg button{white-space:nowrap}
#vt-roupas .vt-entrada{grid-template-columns:1fr}
#vt-roupas .vt-destaque{justify-self:stretch}
#vt-roupas .vt-res{grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr))}
#vt-roupas .vt-cartao h3{flex-wrap:wrap}

/* Janela de detalhe da roupa (23/10/2026; mockup docs/mockups/upgrade/vestes-detalhe-e-ranking.html). Abre na janelinha do site (ajuda-janela.js),
   no corpo da página: por isso leva as próprias cores (as da tela das Vestes moram em #screen-vestes). */
.vt-nome-roupa{cursor:pointer;background:none;border:0;color:var(--vt-hi,#f0f3f7);font:700 15px 'Inter',system-ui,sans-serif;padding:2px 4px;border-radius:6px;text-align:left}
.vt-nome-roupa:hover,.vt-nome-roupa:focus-visible{background:rgba(255,255,255,.06);outline:1px solid #3a4759}
.vt-jan{--vt-card:#0f131c; --vt-card2:#141a25; --vt-card3:#1a2130; --vt-line:#29313d; --vt-line-hi:#3a4759; --vt-hi:#f0f3f7; --vt-mid:#a7b0bd; --vt-low:#7d8796;
  --vt-cyan:#20d3e0; --vt-cyan-300:#8ceff5; --vt-fam:#ef7fb3; --vt-fam-wash:rgba(239,127,179,.12); --vt-fam-line:rgba(239,127,179,.42); --vt-live:#38d6a0; --vt-live-wash:rgba(56,214,160,.12); --vt-warn:#ff9b5a;
  display:grid;gap:12px;color:var(--vt-mid);font-size:15px}
.vt-jan p{margin:0}
.vt-jan h4{margin:4px 0 0;font:700 15px 'IBM Plex Mono',monospace;color:var(--vt-cyan);text-transform:uppercase;letter-spacing:.05em}
.vt-jan h4 small{text-transform:none;letter-spacing:0;font-weight:400;color:var(--vt-low)}
.vt-jcab{display:flex;align-items:center;gap:14px}
.vt-jcab small{font:500 15px 'IBM Plex Mono',monospace;color:var(--vt-fam);letter-spacing:.06em;text-transform:uppercase}
.vt-jic{width:46px;height:46px;object-fit:contain}
.vt-tenho{display:flex;align-items:center;gap:10px;background:var(--vt-card2);border:1px solid var(--vt-line);border-radius:10px;padding:9px 12px;cursor:pointer;color:var(--vt-hi)}
.vt-tenho input{width:18px;height:18px;accent-color:#ef7fb3;flex:none}
.vt-tenho small{color:var(--vt-low);font-size:15px}
.vt-atrs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.vt-atr{background:var(--vt-card2);border:1px solid var(--vt-line);border-radius:10px;padding:10px 12px;display:grid;gap:2px}
.vt-atr span{color:var(--vt-mid);font-size:15px}
.vt-atr b{font:800 24px 'Rubik','Inter',sans-serif;color:var(--vt-hi);font-variant-numeric:tabular-nums}
.vt-atr.on{border-color:var(--vt-fam-line);background:var(--vt-fam-wash)}
.vt-atr.on b{color:var(--vt-fam)}
.vt-jl{display:grid;grid-template-columns:minmax(0,1.6fr) 80px 110px 64px;gap:8px;align-items:center;padding:8px 0;border-top:1px solid var(--vt-line);font-size:15px}
.vt-jl.cab{border-top:0;color:var(--vt-low);font-family:'IBM Plex Mono',monospace}
.vt-jl .n{text-align:right;font-variant-numeric:tabular-nums}
.vt-jl.m{background:var(--vt-fam-wash);margin:0 -8px;padding:8px;border-radius:8px}
.vt-melhor{font:700 15px 'IBM Plex Mono',monospace;color:var(--vt-live);background:var(--vt-live-wash);border-radius:999px;padding:1px 9px;white-space:nowrap}
.vt-jcomo{padding-bottom:12px}
.rk-nota{margin:10px 0 0;font-size:15px;color:var(--t-low,#7d8796)}
@media (max-width:560px){.vt-jl{grid-template-columns:minmax(0,1.4fr) 64px 84px 52px;gap:6px}}