/* Choose The Music — área do professor (F2.3). Só variáveis --ctm-*. */

.min-w-0 { min-width: 0; }

.ctm-video-card { display: flex; flex-direction: column; overflow: hidden; }
.ctm-video-card .ctm-yt { border-radius: 0; }
.ctm-video-card .ctm-card-body { display: flex; flex-direction: column; flex: 1 1 auto; }
.ctm-video-desc {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--ctm-text-muted);
}

/* f9.26: cabeçalho de folha/modal com o gradiente da marca, sem repetir style="" inline (regra 9). */
.ctm-modal-header-gradient { background: var(--ctm-gradient); }

.ctm-preview-card { max-width: 460px; margin: 0 auto; }
.ctm-preview-header {
  background: var(--ctm-gradient);
  border-radius: var(--ctm-radius) var(--ctm-radius) 0 0;
  height: 130px;
  text-align: center;
  position: relative;
}
.ctm-preview-avatar-wrap {
  position: absolute; left: 50%; bottom: -48px; transform: translateX(-50%);
  border-radius: 50%; border: 4px solid var(--ctm-surface); background: var(--ctm-surface);
  box-shadow: var(--ctm-shadow);
}
.ctm-preview-body { padding: 3.75rem 1.5rem 1.75rem; text-align: center; }

.social-icon-btn {
  width: 44px !important;
  height: 44px !important;
  flex-shrink: 0 !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* f10.10: no formulario "Editar Perfil" os campos de uma mesma linha ficam alinhados pela base
   (.row.align-items-end na view), entao um rotulo que quebra em duas linhas nao empurra so o seu campo. */


/* f10.10: cartao de indicacao — os 3 numeros (indicados/aguardando/descontos) tinham altura
   diferente porque o rotulo de um cabia em 1 linha e o dos outros em 2. As colunas .row ja esticam
   para a mesma altura; h-100 + flex com o numero no topo deixa os tres numeros na mesma linha e
   os rotulos logo abaixo, em qualquer idioma. */
.ctm-referral-stat {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 0.25rem;
}

.ctm-referral-stat-label {
  font-size: 0.75rem;
  letter-spacing: 0.05em;
}

/* f9.34: estado vazio da tela Leads (padrão e "sem resultado do filtro"). Cor só por token (regra 9):
   o par bg-suave/texto-forte que a tela já usava em style="" (rgba(5,150,105,.12) / #059669) tem
   equivalente pronto em --ctm-success-soft/--ctm-success -- só migrado para classe (sem repetir
   estilo/cor inline a cada estado; verificar_views.py conta por ocorrência, e a base só desce). */
.ctm-leads-empty-icon {
  width: 72px;
  height: 72px;
  min-width: 72px;
  min-height: 72px;
  flex-shrink: 0;
  background-color: var(--ctm-success-soft) !important;
  color: var(--ctm-success) !important;
}

.ctm-leads-empty-text {
  max-width: 500px;
}

/* f9.16: bloqueio de plano do CRM (Grátis/Pro) -- mesmo padrão de largura/ícone do kit
   ctm-41-leads--bloqueio (baseado em ctm-40-lancamentos--bloqueio), sem style="" inline (regra 9). */
.ctm-leads-locked-card {
  max-width: 560px;
}

.ctm-leads-locked-icon {
  width: 72px;
  height: 72px;
  min-width: 72px;
  min-height: 72px;
  flex-shrink: 0;
}

.ctm-leads-locked-text {
  max-width: 440px;
}