/* ==========================================================================
   CAREER-TRAINING.CSS — TELA DE ELENCO POR CATEGORIA + JANELA DE TREINO
   Estilo do sistema de treinamento do Modo Carreira (design/mockup do
   proprietário). Criado em 26/07/2026.
   ========================================================================== */

/* ---- Elenco por categoria ---- */
.ct-squad-header h2 { margin: 0 0 2px; font-size: 20px; }
.ct-squad-header p { margin: 0 0 16px; font-size: 12.5px; color: var(--text-2); }

.ct-cat-block { margin-bottom: 18px; }
.ct-cat-title {
  font-weight: 700; font-size: 13px; letter-spacing: 0.04em;
  padding: 6px 10px; border-radius: var(--radius);
  margin-bottom: 6px; color: #fff;
}
.ct-cat-title.cat-gol { background: linear-gradient(90deg, #16a34a, #0b5); }
.ct-cat-title.cat-def { background: linear-gradient(90deg, #1d4ed8, #2563eb); }
.ct-cat-title.cat-mid { background: linear-gradient(90deg, #d4a017, #eab308); }
.ct-cat-title.cat-atk { background: linear-gradient(90deg, #dc2626, #ef4444); }

.ct-squad-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ct-squad-table thead th {
  text-align: center; font-size: 10.5px; color: var(--text-2);
  padding: 4px 3px; border-bottom: 1px solid var(--line);
  font-weight: 700;
}
.ct-squad-table th.ct-name { text-align: left; }
.ct-squad-table td {
  padding: 6px 3px; text-align: center; border-bottom: 1px solid var(--line);
}
.ct-squad-table td.ct-name { text-align: left; font-weight: 600; }
.ct-squad-table td.ct-num, .ct-squad-table td.ct-pos { color: var(--text-2); }
.ct-squad-table td.ct-attr { font-variant-numeric: tabular-nums; }
.ct-squad-table td.ct-age { color: var(--text-1); font-weight: 700; font-variant-numeric: tabular-nums; }
.ct-squad-table th.ct-cards, .ct-squad-table td.ct-cards { white-space: nowrap; min-width: 64px; }
.ct-row-training { background: rgba(22,163,74,0.08); }
.ct-row-suspended { background: rgba(239,68,68,0.08); }
.ct-row-suspended td.ct-name { color: var(--danger); }
.ct-row-injured { background: rgba(230,126,34,0.08); }
.ct-row-injured td.ct-name { color: #c0392b; }

.ct-eye-btn {
  background: none; border: none; cursor: pointer; font-size: 15px;
  opacity: 0.75; padding: 2px 6px; border-radius: 6px;
}
.ct-eye-btn:hover { opacity: 1; background: var(--bg-3); }
.ct-squad-foot { font-size: 11px; color: var(--text-2); margin-top: 8px; }

/* ---- Janela de treinamento individual ---- */
.ct-panel { max-width: 460px; }

/* Setas anterior/próximo jogador: ancoradas no canto superior direito da
   janela modal (.quick-modal-box, position:fixed — ver menu.css), coladas
   à esquerda do botão fechar (.quick-modal-close, right:14px, 34px de
   largura). Ficam fixas ali mesmo com o conteúdo rolando por baixo, pra
   facilitar trocar de jogador sem precisar descer até o rodapé. Pedido do
   proprietário em 03/08/2026. */
.ct-nav-arrows {
  position: absolute;
  top: 14px; right: 56px; /* 14 (margem do X) + 34 (largura do X) + 8 (respiro) */
  display: flex; gap: 6px;
  z-index: 2;
}
.ct-nav-btn {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--text-1);
  font-size: 15px; font-weight: 700;
  cursor: pointer;
}
.ct-nav-btn:hover { border-color: var(--line-bright); background: var(--pitch); color: #fff; }
.ct-panel-head {
  display: flex; align-items: center; gap: 12px; margin-bottom: 12px;
}
.ct-panel-photo {
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--bg-3); display: flex; align-items: center;
  justify-content: center; font-size: 26px; flex-shrink: 0;
}
.ct-panel-id { flex: 1; }
.ct-panel-name { font-weight: 700; font-size: 16px; }
.ct-panel-sub { font-size: 12px; color: var(--text-2); }
.ct-panel-overall { text-align: center; }
.ct-ov-label { font-size: 10px; color: var(--text-2); letter-spacing: 0.08em; }
.ct-ov-num { font-size: 26px; font-weight: 800; color: var(--pitch); line-height: 1; }

.ct-panel-cat { margin-bottom: 14px; }
.ct-cat-badge {
  display: inline-block; padding: 5px 12px; border-radius: 999px;
  background: var(--bg-3); font-size: 12px; font-weight: 600;
}

.ct-attrs-title, .ct-current-title, .ct-howto-title {
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  color: var(--text-2); text-transform: uppercase; margin-bottom: 8px;
}
.ct-attr-row {
  display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
}
.ct-attr-label { flex: 0 0 130px; font-size: 12.5px; }
.ct-attr-val { flex: 0 0 26px; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.ct-attr-bar {
  flex: 1; height: 7px; background: var(--bg-3); border-radius: 4px; overflow: hidden;
}
.ct-attr-fill { display: block; height: 100%; background: var(--pitch); border-radius: 4px; }
.ct-train-btn {
  flex: 0 0 auto; font-size: 11px; padding: 5px 12px; border-radius: 6px;
  border: 1px solid var(--pitch); background: transparent; color: var(--pitch);
  cursor: pointer; font-weight: 600;
}
.ct-train-btn:hover:not(:disabled) { background: var(--pitch); color: #fff; }
.ct-train-btn:disabled { opacity: 0.4; cursor: default; border-color: var(--line); color: var(--text-2); }
.ct-train-badge {
  flex: 0 0 auto; font-size: 10.5px; padding: 5px 10px; border-radius: 6px;
  background: rgba(22,163,74,0.15); color: var(--pitch); font-weight: 700;
}

.ct-current { margin: 16px 0; padding: 12px; background: var(--bg-3); border-radius: var(--radius); }
.ct-current-none { color: var(--text-2); font-size: 12.5px; }
.ct-current-body { font-size: 13px; }
.ct-current-time { font-weight: 700; color: var(--pitch); }

.ct-howto { margin-top: 12px; }
.ct-howto ul { margin: 0; padding-left: 18px; }
.ct-howto li { font-size: 12px; color: var(--text-2); margin-bottom: 3px; }

/* ---- Centro de Treinamento (grade de slots por categoria) ---- */
.ct-cat-row { margin-bottom: 16px; }
.ct-cat-label {
  font-weight: 700; font-size: 13px; color: #fff; padding: 5px 10px;
  border-radius: var(--radius); margin-bottom: 8px; display: flex;
  align-items: center; justify-content: space-between;
}
.ct-cat-label.cat-gol { background: linear-gradient(90deg, #d4a017, #8a6a0e); }
.ct-cat-label.cat-def { background: linear-gradient(90deg, #1d4ed8, #12308a); }
.ct-cat-label.cat-mid { background: linear-gradient(90deg, #16a34a, #0d6b31); }
.ct-cat-label.cat-atk { background: linear-gradient(90deg, #dc2626, #911a1a); }
.ct-cat-count { font-size: 11.5px; opacity: 0.9; font-weight: 600; }

.ct-slot-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
}
@media (max-width: 900px) { .ct-slot-grid { grid-template-columns: repeat(2, 1fr); } }

.ct-slot {
  border-radius: var(--radius); min-height: 132px; overflow: hidden;
  position: relative; border: 2px solid var(--line);
  background-size: cover; background-position: center;
  display: flex; flex-direction: column;
}
/* borda colorida por categoria */
.ct-slot.cat-gol { border-color: #d4a017; }
.ct-slot.cat-def { border-color: #1d4ed8; }
.ct-slot.cat-mid { border-color: #16a34a; }
.ct-slot.cat-atk { border-color: #dc2626; }

/* Slot livre e travado: AGORA também têm a imagem da categoria de fundo, com
   uma máscara por cima para o texto/cadeado ficar legível. */
.ct-slot--empty, .ct-slot--locked {
  align-items: stretch; justify-content: center;
}
.ct-slot-lockmask, .ct-slot-emptymask {
  width: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  background: rgba(0,0,0,0.5);
}
.ct-slot--locked .ct-slot-lockmask { background: rgba(0,0,0,0.62); }
.ct-slot-lock { font-size: 26px; margin-bottom: 4px; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6)); }
.ct-slot-lock-txt, .ct-slot-empty-txt {
  font-size: 11px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.7);
  font-weight: 600;
}

/* Slot ocupado: imagem de fundo + overlay com os dados */
.ct-slot--busy { justify-content: flex-end; }
.ct-slot-overlay {
  background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.82) 60%);
  padding: 8px 10px; color: #fff; width: 100%; box-sizing: border-box;
}
.ct-slot-name { font-weight: 700; font-size: 13px; line-height: 1.1; text-shadow: 0 1px 2px rgba(0,0,0,0.6); }
.ct-slot-pos { font-size: 10.5px; opacity: 0.9; margin-bottom: 3px; }
.ct-slot-attr { font-size: 11px; margin-bottom: 5px; }
.ct-slot-attr b { color: #7CFFB0; }
.ct-slot-bonus {
  font-size: 10.5px; font-weight: 700; color: #FFD54A;
  margin-bottom: 5px; text-shadow: 0 1px 2px rgba(0,0,0,0.7);
}
.ct-slot-bar { height: 6px; background: rgba(255,255,255,0.25); border-radius: 3px; overflow: hidden; margin-bottom: 3px; }
.ct-slot-fill { display: block; height: 100%; background: #22c55e; }
.ct-slot-time { font-size: 10.5px; opacity: 0.95; }
.ct-slot-rem { font-weight: 700; }

/* Botão de acelerar treino (1 CashPass = 1 min) no card do Centro */
.ct-slot-speed {
  display: inline-block; margin-left: 6px; padding: 3px 8px;
  border: none; border-radius: 5px; cursor: pointer;
  background: #22c55e; color: #fff; font-size: 9.5px; font-weight: 800;
  letter-spacing: 0.02em; line-height: 1.1; vertical-align: middle;
  text-transform: uppercase; box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.ct-slot-speed:hover { background: #16a34a; transform: translateY(-1px); }