/* ==========================================================================
   Choose The Music — identidade visual (F2)
   Cores, fontes, raios e sombras só por variável. O Bootstrap 5.3 continua como
   base: sobrescrevemos as variáveis dele e criamos componentes com prefixo .ctm-

   f10.6c: os tokens do :root saíram deste arquivo e foram para wwwroot/css/tokens.css (mesmo nome,
   mesmo valor) -- este arquivo agora DEPENDE de tokens.css carregar antes dele em toda página.
   ========================================================================== */

/* ---------- Base ---------- */
html { font-size: 15px; position: relative; min-height: 100%; }
@media (min-width: 768px) { html { font-size: 16px; } }

body {
  background: var(--ctm-bg);
  color: var(--ctm-text);
  font-family: var(--ctm-font);
  -webkit-font-smoothing: antialiased;
  padding-bottom: 76px; /* espaço da barra inferior no celular */
}
@media (min-width: 768px) { body { padding-bottom: 32px; } }

h1, h2, h3, h4, h5, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6, .ctm-display {
  font-family: var(--ctm-font-display);
  letter-spacing: -.02em;
  color: inherit;
}
/* f10.18 (#198): titulo que subiu de nivel semantico (heading-order) mas mantem a fonte do corpo que o
   h6 antigo tinha (h1..h5 e .ctm-display recebem a fonte de display acima, h6 nao). Fica logo apos essa
   regra para que classes de texto posteriores (.ctm-eyebrow) continuem vencendo. */
.ctm-heading-corpo { font-family: var(--ctm-font); letter-spacing: normal; }
.text-muted, .text-secondary { color: var(--ctm-text-muted) !important; }
.text-primary { color: var(--ctm-primary) !important; }
.text-info { color: var(--ctm-teal) !important; }

::selection { background: var(--ctm-primary-18); }

.btn:focus-visible, .form-control:focus, .form-select:focus, .form-check-input:focus {
  box-shadow: 0 0 0 .2rem var(--ctm-primary-25);
  border-color: var(--ctm-primary-60);
}

/* f10.8 (regra 9/12, acessibilidade): contorno de foco visível em TODO elemento focável, não só em
   .btn/.form-* -- link "nu" (sem classe de botão), .nav-link (abas), botão de fechar (.btn-close) e
   qualquer coisa com role="button" (ex.: estrela de nota) também precisam de indicador visível ao
   navegar por Tab. --ctm-focus-ring tem contraste >= 3:1 sobre --ctm-bg/--ctm-surface (claro);
   body.admin-body sobrescreve a variável para o escuro (admin.css). outline-offset separa o anel do
   próprio texto/ícone. Nenhum outline:none foi removido daqui -- este CSS nunca teve um (grep). */
a:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible,
[role="button"]:focus-visible,
button:focus-visible {
  outline: 2px solid var(--ctm-focus-ring);
  outline-offset: 2px;
}

/* f10.8: alvo de toque >= 44px no celular (--ctm-touch-min = 48px, igual ao kit, docs/mockups/html/

   tokens.css). Só dentro deste breakpoint -- no desktop os mesmos elementos continuam do tamanho

   atual (regra 9: nada de tela por tela, um lugar só). Link dentro de parágrafo de texto corrido

   fica de fora por desenho (exceção da WCAG para alvo inline) -- por isso aqui é por CLASSE de

   botão/controle, nunca por seletor genérico de texto/link. */

.btn,
.nav-link,
.form-control,
.form-select,
.navbar-brand,
.ctm-admin-brand,
.ctm-social-link,
.social-icon-btn,
.hover-warning,
.ctm-touch-link,
footer a {
  min-height: var(--ctm-touch-min);
}

/* f10.8 (rodada 2): .btn sozinho (sem .rounded-circle) também apertava por LARGURA quando é
   só ícone (ex.: botão do menu lateral, "mais ações") -- min-width geral no .btn, e nos
   .form-control/.form-select que encolhem demais dentro de um .input-group/flex estreito. */
.btn,
.form-control,
.form-select,
.input-group > .form-control,
.input-group > .form-select,
.icon-square,
.ctm-social-link,
.social-icon-btn,
.navbar-brand,
.ctm-admin-brand,
.ctm-touch-link {
  min-width: var(--ctm-touch-min);
}

.btn,
.navbar-brand,
.ctm-admin-brand,
.ctm-social-link,
.social-icon-btn,
.hover-warning,
.ctm-touch-link,
footer a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* f10.8: link dentro de texto ou de título truncado (nome do professor, "Já tem conta?") -- padding
   vertical em elemento inline aumenta a área de toque sem mexer na linha nem no corte com reticências. */
.ctm-touch-pad {
  padding-block: 1rem;
}

/* Celular primeiro (regra 22): as regras acima sao o celular. A partir de 576px cada propriedade volta ao
   valor que o elemento teria sem elas (Bootstrap ou o padrao do navegador), por isso os valores abaixo
   sao explicitos: min-height/min-width `auto` e o valor inicial; display e o do elemento (.btn e inline-block
   no Bootstrap; os demais sao links/spans, `inline`); .input-group > .form-control/.form-select vem de
   `min-width: 0` do Bootstrap; .form-control-sm/-lg trazem o min-height proprio do Bootstrap. */
@media (min-width: 576px) {
  .btn,
  .nav-link,
  .form-control,
  .form-select,
  .navbar-brand,
  .ctm-admin-brand,
  .ctm-social-link,
  .social-icon-btn,
  .hover-warning,
  .ctm-touch-link,
  footer a {
    min-height: auto;
  }

  .form-control-sm {
    min-height: calc(1.5em + 0.5rem + calc(var(--bs-border-width) * 2));
  }

  .form-control-lg {
    min-height: calc(1.5em + 1rem + calc(var(--bs-border-width) * 2));
  }

  .btn,
  .form-control,
  .form-select,
  .icon-square,
  .ctm-social-link,
  .social-icon-btn,
  .navbar-brand,
  .ctm-admin-brand,
  .ctm-touch-link {
    min-width: auto;
  }

  .input-group > .form-control,
  .input-group > .form-select {
    min-width: 0;
  }

  .btn {
    display: inline-block;
  }

  .btn.dropdown-item {
    display: block;
  }

  .navbar-brand,
  .ctm-admin-brand,
  .ctm-social-link,
  .hover-warning,
  .ctm-touch-link,
  footer a {
    display: inline;
  }

  .badge.ctm-touch-link {
    display: inline-block;
  }

  /* align-items/justify-content so valiam por causa do inline-flex do celular: voltam ao valor inicial. */
  .btn,
  .navbar-brand,
  .ctm-admin-brand,
  .ctm-social-link,
  .social-icon-btn,
  .hover-warning,
  .ctm-touch-link,
  footer a {
    align-items: normal;
    justify-content: normal;
  }

  .ctm-touch-pad {
    padding-block: 0;
  }
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}
.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* ---------- Botões ---------- */
.btn { font-weight: 600; border-radius: 999px; padding-inline: 1.1rem; }
.btn-sm { padding-inline: .8rem; }
.btn-primary {
  --bs-btn-bg: var(--ctm-primary);
  --bs-btn-border-color: var(--ctm-primary);
  --bs-btn-hover-bg: var(--ctm-primary-strong);
  --bs-btn-hover-border-color: var(--ctm-primary-strong);
  --bs-btn-active-bg: var(--ctm-primary-strong);
  --bs-btn-active-border-color: var(--ctm-primary-strong);
  --bs-btn-disabled-bg: var(--ctm-primary);
  --bs-btn-disabled-border-color: var(--ctm-primary);
}
.btn-outline-primary {
  --bs-btn-color: var(--ctm-primary);
  --bs-btn-border-color: var(--ctm-primary-45);
  --bs-btn-hover-bg: var(--ctm-primary);
  --bs-btn-hover-border-color: var(--ctm-primary);
  --bs-btn-active-bg: var(--ctm-primary-strong);
}
/* f10.8 (rodada 2, regra 9): o Bootstrap grava #6c757d como LITERAL em --bs-btn-color/
   --bs-btn-border-color/--bs-btn-disabled-* deste componente (não lê --bs-secondary) -- media
   4,35:1 sobre --ctm-bg, abaixo de 4,5:1. --ctm-outline-secondary-color (tokens.css) troca de tom
   dentro do backoffice (body.admin-body). */
.btn-outline-secondary {
  --bs-btn-color: var(--ctm-outline-secondary-color);
  --bs-btn-border-color: var(--ctm-outline-secondary-color);
  --bs-btn-hover-color: var(--ctm-outline-secondary-on);
  --bs-btn-hover-bg: var(--ctm-outline-secondary-color);
  --bs-btn-hover-border-color: var(--ctm-outline-secondary-color);
  --bs-btn-active-color: var(--ctm-outline-secondary-on);
  --bs-btn-active-bg: var(--ctm-outline-secondary-color);
  --bs-btn-active-border-color: var(--ctm-outline-secondary-color);
  --bs-btn-disabled-color: var(--ctm-outline-secondary-color);
  --bs-btn-disabled-border-color: var(--ctm-outline-secondary-color);
}
.btn-info {
  --bs-btn-color: var(--ctm-surface);
  --bs-btn-bg: var(--ctm-teal);
  --bs-btn-border-color: var(--ctm-teal);
  --bs-btn-hover-color: var(--ctm-surface);
  --bs-btn-hover-bg: var(--ctm-teal-strong);
  --bs-btn-hover-border-color: var(--ctm-teal-strong);
}
.btn-accent {
  --bs-btn-color: var(--ctm-accent-ink);
  --bs-btn-bg: var(--ctm-accent);
  --bs-btn-border-color: var(--ctm-accent);
  --bs-btn-hover-color: var(--ctm-accent-ink);
  --bs-btn-hover-bg: var(--ctm-accent-strong);
  --bs-btn-hover-border-color: var(--ctm-accent-strong);
}
.btn-light-on-dark {
  --bs-btn-color: var(--ctm-surface);
  --bs-btn-bg: var(--ctm-white-14);
  --bs-btn-border-color: var(--ctm-white-28);
  --bs-btn-hover-color: var(--ctm-primary-strong);
  --bs-btn-hover-bg: var(--ctm-surface);
  --bs-btn-hover-border-color: var(--ctm-surface);
}

/* ---------- Faixa de personificação (admin "ver como professor/aluno") ---------- */

/* ---------- Navbar ---------- */
.ctm-navbar {
  background: var(--ctm-gradient);
  box-shadow: 0 4px 18px var(--ctm-primary-25);
}
.ctm-navbar .navbar-brand { font-family: var(--ctm-font-display); font-weight: 800; letter-spacing: -.02em; }
.ctm-navbar .navbar-brand .ctm-logo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 10px;
  background: var(--ctm-white-18); margin-right: .5rem;
}
.ctm-navbar .form-select {
  background-color: var(--ctm-white-14);
  border-color: var(--ctm-white-30);
  color: var(--ctm-surface);
  border-radius: 999px;
  --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
.ctm-navbar .form-select option { color: var(--ctm-text); }
.ctm-navbar .ctm-hello { opacity: .9; }

/* ---------- Barra inferior (celular) ---------- */
.mobile-bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 1030;
  background: var(--ctm-surface);
  border-top: 1px solid var(--ctm-border);
  box-shadow: var(--ctm-shadow-bottom-nav);
  padding-bottom: env(safe-area-inset-bottom);
}
.mobile-bottom-nav a { color: var(--ctm-text-muted); font-size: .75rem; font-weight: 600; padding: .35rem .75rem; border-radius: 12px; }
.mobile-bottom-nav a.active, .mobile-bottom-nav a:hover { color: var(--ctm-primary); background: var(--ctm-primary-soft); }

/* ---------- Cartões ---------- */
.card { border-color: var(--ctm-border); border-radius: var(--ctm-radius); }
.card-custom, .ctm-card {
  background: var(--ctm-surface);
  border-radius: var(--ctm-radius) !important;
  border: 1px solid var(--ctm-border) !important;
  box-shadow: var(--ctm-shadow);
}
.ctm-card-body { padding: 1.1rem; }
@media (min-width: 576px) { .ctm-card-body { padding: 1.5rem; } }

/* f9.33 (revisão): título do cartão de vídeo (aula/treino) quebra em até 2 linhas em vez de truncar com
   reticências (kit) -- o selo ao lado (Tipo, visibilidade etc.) nunca encolhe, .flex-shrink-0 na view. */
.ctm-card-title-clamp2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* f9.33 (revisão): a pílula de nota (0,0 (0)) fica no rodapé do cartão, na mesma linha da data, em vez
   de numa linha própria -- alturas diferentes de cartão para cartão viravam desalinhamento entre eles. */
.ctm-card-footer-meta { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

.ctm-section-title {
  font-family: var(--ctm-font-display);
  font-weight: 700; font-size: 1.15rem;
  display: flex; align-items: center; gap: .5rem;
  margin-bottom: 1rem;
}
.ctm-section-title .bi { color: var(--ctm-primary); }
.ctm-eyebrow {
  font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ctm-text-muted);
}

/* Cabeçalho de página com gradiente (painéis) */
.ctm-hero-panel {
  background: var(--ctm-gradient);
  color: var(--ctm-surface);
  border-radius: var(--ctm-radius-lg);
  box-shadow: var(--ctm-shadow-lg);
  padding: 1.75rem;
  position: relative; overflow: hidden;
}
.ctm-hero-panel::after {
  content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px;
  border-radius: 50%; background: var(--ctm-white-08);
}
.ctm-hero-panel h1, .ctm-hero-panel h2, .ctm-hero-panel h3 { color: var(--ctm-surface); }
.ctm-hero-panel .ctm-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--ctm-surface); color: var(--ctm-primary-strong);
  border-radius: 10px; padding: .2rem .7rem; font-weight: 800; letter-spacing: .08em;
}

/* Números-resumo */
.ctm-stat {
  background: var(--ctm-surface);
  border: 1px solid var(--ctm-border);
  border-radius: var(--ctm-radius);
  box-shadow: var(--ctm-shadow-sm);
  padding: 1rem 1.1rem;
  display: flex; align-items: center; gap: .9rem;
  height: 100%;
}
.ctm-stat-icon {
  width: 44px; height: 44px; border-radius: 12px; flex: 0 0 44px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem;
  background: var(--ctm-primary-soft); color: var(--ctm-primary);
}
.ctm-stat-icon.is-heart { background: var(--ctm-heart-soft); color: var(--ctm-heart); }
.ctm-stat-icon.is-accent { background: var(--ctm-accent-soft); color: var(--ctm-accent-emphasis); }
.ctm-stat-icon.is-teal { background: var(--ctm-teal-soft); color: var(--ctm-teal); }
.ctm-stat-value { font-family: var(--ctm-font-display); font-size: 1.5rem; font-weight: 800; line-height: 1.1; }
.ctm-stat-label { font-size: .8rem; color: var(--ctm-text-muted); font-weight: 600; }

/* Ranking com barra proporcional */
.ctm-rank { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.ctm-rank-item {
  position: relative;
  display: flex; align-items: center; gap: .85rem;
  padding: .75rem .9rem;
  background: var(--ctm-surface);
  border: 1px solid var(--ctm-border);
  border-radius: var(--ctm-radius-sm);
  overflow: hidden;
}
.ctm-rank-item.is-mine { border-color: var(--ctm-primary-55); box-shadow: 0 0 0 3px var(--ctm-primary-12); }
.ctm-rank-pos {
  flex: 0 0 34px; height: 34px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .9rem;
  background: var(--ctm-surface-2); color: var(--ctm-text-muted);
}
.ctm-rank-item:nth-child(1) .ctm-rank-pos { background: var(--ctm-accent-soft); color: var(--ctm-accent-emphasis); }
.ctm-rank-body { flex: 1 1 auto; min-width: 0; }
.ctm-rank-title { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctm-rank-sub { font-size: .82rem; color: var(--ctm-text-muted); }
.ctm-bar { height: 6px; border-radius: 99px; background: var(--ctm-surface-2); margin-top: .45rem; overflow: hidden; }
.ctm-bar > span { display: block; height: 100%; border-radius: 99px; background: var(--ctm-gradient); min-width: 4px; }
.ctm-bar.is-teal > span { background: var(--ctm-gradient-teal); }
.ctm-votes {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: .3rem;
  font-weight: 800; font-size: .9rem;
  color: var(--ctm-heart); background: var(--ctm-heart-soft);
  border-radius: 999px; padding: .25rem .65rem;
}
.ctm-votes.is-teal { color: var(--ctm-teal); background: var(--ctm-teal-soft); }

/* Selos e pílulas */
.ctm-pill {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .78rem; font-weight: 700;
  border-radius: 999px; padding: .25rem .7rem;
  background: var(--ctm-primary-soft); color: var(--ctm-primary-strong);
}
.ctm-pill.is-teal { background: var(--ctm-teal-soft); color: var(--ctm-teal-ink); }
.ctm-pill.is-accent { background: var(--ctm-accent-soft); color: var(--ctm-pill-accent-ink); }
.ctm-pill.is-success { background: var(--ctm-success-soft); color: var(--ctm-pill-success-ink); }
.ctm-pill.is-muted { background: var(--ctm-surface-2); color: var(--ctm-text-muted); }

/* Estado vazio */
.ctm-empty {
  text-align: center; padding: 2.25rem 1rem;
  border: 2px dashed var(--ctm-border); border-radius: var(--ctm-radius);
  color: var(--ctm-text-muted);
}
.ctm-empty > .bi, .ctm-empty > i { font-size: 2rem; color: var(--ctm-primary-50); display: block; margin-bottom: .5rem; }
.ctm-empty .btn .bi { display: inline-block; font-size: inherit; color: inherit; margin-bottom: 0; }

/* Abas */
.ctm-tabs { gap: .4rem; border: 0; background: var(--ctm-surface-2); padding: .3rem; border-radius: 999px; display: inline-flex; flex-wrap: nowrap; }
.ctm-tabs .nav-link { border: 0 !important; border-radius: 999px !important; color: var(--ctm-text-muted); font-weight: 700; padding: .45rem 1rem; white-space: nowrap; }
.ctm-tabs .nav-link.active { background: var(--ctm-surface) !important; color: var(--ctm-primary) !important; box-shadow: var(--ctm-shadow-sm); }

/* ---------- Vídeo do YouTube (miniatura; player só ao clicar) ---------- */
.ctm-yt {
  position: relative; display: block; width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--ctm-yt-bg) center / cover no-repeat;
  border: 0; padding: 0; cursor: pointer; overflow: hidden;
}
.ctm-yt::before { content: ""; position: absolute; inset: 0; background: var(--ctm-gradient-yt-overlay); }
.ctm-yt-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 64px; height: 64px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ctm-white-92); color: var(--ctm-primary); font-size: 1.9rem;
  box-shadow: var(--ctm-shadow-yt-play);
  transition: transform .15s ease;
}
.ctm-yt:hover .ctm-yt-play, .ctm-yt:focus-visible .ctm-yt-play { transform: translate(-50%, -50%) scale(1.08); }
.ctm-yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- Landing ---------- */
.ctm-landing-hero {
  background: var(--ctm-gradient);
  color: var(--ctm-surface);
  border-radius: 0 0 var(--ctm-radius-lg) var(--ctm-radius-lg);
  position: relative; overflow: hidden;
}
.ctm-landing-hero h1 { color: var(--ctm-surface); font-weight: 800; }
.ctm-landing-hero .lead { color: var(--ctm-white-85); }
.ctm-step-num {
  width: 40px; height: 40px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; background: var(--ctm-primary-soft); color: var(--ctm-primary);
}

/* ---------- Auth ---------- */
.ctm-auth-card { max-width: 440px; margin: 2.5rem auto; }
.ctm-auth-icon {
  width: 56px; height: 56px; border-radius: 16px; font-size: 1.6rem;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ctm-primary-soft); color: var(--ctm-primary);
}
.ctm-auth-icon.is-teal { background: var(--ctm-teal-soft); color: var(--ctm-teal); }
/* f10.6c: variante violeta já usada (com style="" inline) em Account/Login.cshtml -- só faltava a
   regra. O font-size (1.5rem) é diferente do padrão de .ctm-auth-icon (1.6rem): preservado igual ao
   style="" original para não mudar o tamanho do ícone. */
.ctm-auth-icon.is-violet { background: var(--ctm-violet-15); color: var(--ctm-violet-500); font-size: 1.5rem; }

/* ---------- Offcanvas (menus laterais) ---------- */
.offcanvas { border-radius: 0 var(--ctm-radius-lg) var(--ctm-radius-lg) 0; }
.offcanvas .list-group-item { border-radius: var(--ctm-radius-sm) !important; border: 0; margin-bottom: .25rem; font-weight: 600; }
.offcanvas .list-group-item.active { background: var(--ctm-primary-soft); color: var(--ctm-primary-strong); }
/* f10.6c: cabeçalho em gradiente do offcanvas do professor (Views/Shared/Components/TeacherSidebar). */
.ctm-offcanvas-header-brand { background: var(--ctm-gradient); color: var(--ctm-surface); }

/* ---------- Alertas ---------- */
.alert { border-radius: var(--ctm-radius-sm); border: 0; }

/* ---------- Circular Social Action Buttons ---------- */
.social-icon-btn {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  max-width: 44px !important;
  max-height: 44px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

/* f11.13 (UX-002): a pergunta de faixa etária (cadastro do aluno e tela 57) é de aluno -- radio marcado no
   teal do aluno (kit), não no azul/primário do Bootstrap. Escopo pelo grupo, não muda os outros formulários. */
[data-age-range-group] .form-check-input:checked {
  background-color: var(--ctm-teal);
  border-color: var(--ctm-teal);
}
[data-age-range-group] .form-check-input:focus-visible {
  box-shadow: 0 0 0 .25rem var(--ctm-teal-35);
}