/* BRASLOL 2 - tela TRAINEE (academia). Reaproveita do career.css e do roster.css: .c-root .c-bg .c-shade .c-stage .c-nav .c-p .c-ph .c-toast .c-brand, .r-back .r-navt .r-nlogo .r-cnt .r-cash .r-gold .r-bar .r-fill .r-plus.
   Classes novas comecam com tr- . Sem style="" no HTML (CSP): so classes aqui e style.setProperty() no JS (CSSOM e permitido). Mesmo PALCO FIXO do painel (1620x941, escalado por JS): nada rola. */

body[data-screen="trainee"] #topbar{display:none}
body[data-screen="trainee"] #app{background:#121212;overflow:hidden;touch-action:none;padding-left:0;padding-right:0}

/* ---- botao Trainee do painel (fica entre a caixa de entrada e o Gerenciar; usa o mesmo estilo do .c-mng) ---- */
.c-trn+.c-mng{margin-left:-6px}

/* ---- paineis ---- */
.tr-main{position:absolute;inset:0;pointer-events:none}
.tr-grid{left:47px;top:130px;width:900px;height:743px;border-color:transparent}
.tr-pool{left:967px;top:130px;width:590px;height:743px;border-color:transparent}
.tr-root .c-toast{z-index:40}
.tr-note{margin:0;font-size:11.5px;line-height:17px;color:rgba(255,255,255,.75)}
.tr-pn{padding:12px 20px 0}

/* ---- vagas da academia: grade 2x2 ---- */
.tr-cards{position:absolute;left:18px;right:18px;top:62px;bottom:18px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:14px;margin:0;padding:0;list-style:none}
.tr-card{position:relative;display:flex;flex-direction:column;gap:9px;box-sizing:border-box;min-height:0;overflow:hidden;padding:12px;border-radius:8px;background:#1c2438}
.tr-card.grad{box-shadow:inset 0 0 0 1px rgba(255,205,120,.55)}
.tr-top{display:flex;align-items:center;gap:12px}
.tr-av{width:72px;height:72px;flex:none;display:block;border-radius:8px;object-fit:cover;background:rgba(255,255,255,.08)}
.tr-id{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.tr-id small{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.8)}
.tr-id b{font-size:19px;font-weight:700;letter-spacing:.05em;line-height:22px;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tr-id em{font-style:normal;font-size:11px;letter-spacing:.04em;color:rgba(255,255,255,.65);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tr-ovr{display:flex;flex-direction:column;align-items:flex-end;line-height:1;flex:none}
.tr-ovr b{font-size:30px;font-weight:700}
.tr-ovr small{margin-top:3px;font-size:10px;letter-spacing:.14em;color:rgba(255,255,255,.85)}
.tr-prog{display:flex;flex-direction:column;gap:5px}
.tr-pl{display:flex;justify-content:space-between;font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.85)}
.tr-prog small,.tr-hint{font-size:10.5px;line-height:15px;letter-spacing:.03em;color:rgba(255,255,255,.7)}
.tr-modes{display:flex;gap:6px}
.tr-m{flex:1 1 0;height:28px;border:0;border-radius:0;outline:0;background:rgba(255,255,255,.07);color:#fff;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;transition:background .15s,border-color .15s}
.tr-m:hover,.tr-m:focus-visible{background:rgba(255,255,255,.18);outline:0}   /* sem contorno branco (o .c-root :focus-visible do career.css poe um): o foco aparece pelo fundo */
.tr-m.on{background:#fff;color:#1a2234}
.tr-acts{display:flex;align-items:center;gap:6px;margin-top:auto}
.tr-b{display:inline-flex;align-items:center;justify-content:center;flex:1 1 0;min-width:0;height:34px;padding:0 12px;border:0;border-radius:0;background:rgba(255,255,255,.14);color:#fff;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .15s,transform .12s}
.tr-b:hover{background:rgba(255,255,255,.28)}.tr-b:active{transform:scale(.96)}
.tr-b.ghost{background:rgba(255,255,255,.07)}.tr-b.ghost:hover{background:rgba(255,255,255,.2)}
.tr-b:disabled{opacity:.45;cursor:default;transform:none;background:rgba(255,255,255,.1)}
.tr-card.empty{align-items:center;justify-content:center;gap:8px;background:rgba(255,255,255,.04);color:rgba(255,255,255,.6)}
.tr-card.empty b{font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.tr-card.empty small{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.45)}

/* ---- jogadores do elenco que podem ir para a academia (16 a 20 anos) ---- */
.tr-cands{position:absolute;left:18px;right:18px;top:122px;bottom:18px;display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none}
.tr-cand{display:flex;align-items:center;gap:12px;flex:1 1 0;min-height:0;max-height:84px;box-sizing:border-box;padding:0 12px;border-radius:8px;background:#1c2438}
.tr-cand.st{opacity:.8}
.tr-cav{width:56px;height:56px;flex:none;display:block;border-radius:8px;object-fit:cover;background:rgba(255,255,255,.08)}
.tr-cid{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.tr-cid small{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.8)}
.tr-cid b{font-size:17px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tr-cid em{font-style:normal;font-size:11px;letter-spacing:.06em;color:rgba(255,255,255,.7)}
.tr-cand .tr-b{flex:none;width:132px}
.tr-qb{display:flex;flex:none;gap:6px;width:132px}
.tr-qb .tr-b{flex:1 1 0;width:auto;padding:0}
.tr-qb .tr-b:focus-visible{outline:0;background:rgba(255,255,255,.28)}
.tr-q{font-style:normal;font-weight:600;color:#fff}
.tr-none{padding:18px 20px}

/* ---- entrada animada (nao reinicia quando so um painel e atualizado) ---- */
.tr-main>*{animation:hin .39s ease both}
.tr-main>:nth-child(1){animation-delay:0.13s}
.tr-main>:nth-child(2){animation-delay:0.2s}
.tr-card,.tr-cand{animation:hin .36s ease backwards}
.tr-card:nth-child(1),.tr-cand:nth-child(1){animation-delay:0.29s}
.tr-card:nth-child(2),.tr-cand:nth-child(2){animation-delay:0.34s}
.tr-card:nth-child(3),.tr-cand:nth-child(3){animation-delay:0.39s}
.tr-card:nth-child(4),.tr-cand:nth-child(4){animation-delay:0.44s}
.tr-cand:nth-child(5){animation-delay:0.49s}
.tr-main.re>*,.tr-main.re .tr-card,.tr-main.re .tr-cand{animation:none}
@media (prefers-reduced-motion:reduce){.tr-main>*,.tr-card,.tr-cand{animation:none}}