/* Alunos e perfil do aluno - visual Elite AS */
.students-workspace,
.student-page {
  gap: 1rem;
}

.students-hero,
.student-profile-topbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 1rem;
  padding: 0.35rem 0 0.15rem;
}

.students-hero h3,
.student-profile-topbar h3 {
  margin-top: 0.15rem;
  color: var(--ink);
  font-size: var(--t-h1);
  font-weight: var(--t-h1-w);
  line-height: 1;
}

.students-hero p,
.student-profile-topbar p {
  margin-top: 0.42rem;
  color: var(--muted);
  font-size: var(--t-sub);
  line-height: var(--t-sub-lh);
}

.students-hero .primary-action,
.student-profile-top-actions .primary-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.58rem;
  width: auto;
  min-width: 10.7rem;
  min-height: 3.15rem;
  border-radius: 0.85rem;
  background: var(--brand);
  color: var(--brand-ink);
  box-shadow: none;
}

.students-hero .primary-action svg,
.student-profile-top-actions .primary-action svg {
  width: 1.2rem;
  height: 1.2rem;
  stroke: currentColor;
}

.student-search-panel {
  display: grid;
  gap: 0.75rem;
}

.student-search-field {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.72rem;
  min-height: 3.65rem;
  padding: 0 0.95rem;
  border: 1px solid var(--line);
  border-radius: 0.95rem;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025)),
    rgba(10, 10, 10, 0.88);
}

.student-search-field svg {
  width: 1.35rem;
  height: 1.35rem;
  color: var(--muted);
  stroke: currentColor;
}

.student-search-field:focus-within {
  border-color: rgb(from var(--brand-soft) r g b / 0.62);
  box-shadow: none;
}

.student-search-field input {
  width: 100%;
  min-height: 3rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 0.98rem;
  box-shadow: none;
}

.student-search-field input::placeholder {
  color: rgba(247, 244, 235, 0.65);
}

.student-filter-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
}

.student-filter {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.25rem 0.62rem;
  min-height: 3.8rem;
  padding: 0.72rem 0.78rem;
  border: 1px solid var(--line);
  border-radius: 0.9rem;
  background: rgba(255, 255, 255, 0.04);
}

.student-filter-icon {
  grid-row: span 2;
  display: inline-grid;
  width: 1.45rem;
  height: 1.45rem;
  place-items: center;
  color: var(--brand-strong);
}

.student-filter-icon svg {
  width: 1.35rem;
  height: 1.35rem;
  stroke: currentColor;
}

.student-filter-label {
  color: rgba(247, 244, 235, 0.74);
  font-size: 0.72rem;
  font-weight: 850;
}

.student-filter select {
  width: 100%;
  min-height: 1.7rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  /* RODADA 2R7 (F2): >= 16px — o zoom de foco do Android olha a fonte do
     select focado mesmo quando ele e o overlay invisivel do chip. */
  font-size: 1rem;
  font-weight: 800;
  box-shadow: none;
}

.student-filter select option {
  background: #0b0b0b;
  color: var(--ink);
}

.students-list-panel {
  padding: 1rem;
}

.student-card-list {
  display: grid;
  gap: 0.85rem;
}

.student-card {
  display: grid;
  gap: 0.8rem;
  padding: 1rem;
  border: 1px solid var(--borda);
  border-radius: 1rem;
  background: var(--card);
}

.student-card-top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.85rem;
}

.student-card .entity-avatar,
.student-profile-hero .entity-avatar {
  width: 4.35rem;
  height: 4.35rem;
  flex-basis: 4.35rem;
  font-size: 1.25rem;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
    rgba(20, 20, 20, 0.95);
}

.student-card-main {
  display: grid;
  min-width: 0;
  gap: 0.25rem;
}

.student-card-main > strong {
  color: var(--ink);
  font-size: clamp(1.14rem, 4.2vw, 1.45rem);
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.student-goal {
  display: flex;
  min-width: 0;
  max-width: 100%;
  align-items: center;
  gap: 0.4rem;
  color: var(--muted);
  font-size: 0.92rem;
  overflow: hidden;
}

.student-goal > svg {
  width: 1.05rem;
  height: 1.05rem;
  flex: 0 0 auto;
  color: var(--brand-strong);
  stroke: currentColor;
}

.student-goal > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.student-card-info {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
  padding-top: 0.2rem;
}

.student-info-block {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.15rem 0.45rem;
  min-width: 0;
  padding: 0.7rem 0.72rem;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.student-info-block:first-child {
  border-left: 0;
}

.student-info-icon {
  grid-row: span 2;
  display: inline-grid;
  width: 1.15rem;
  height: 1.15rem;
  place-items: center;
  color: var(--brand-strong);
}

.student-info-icon svg {
  width: 1.05rem;
  height: 1.05rem;
  stroke: currentColor;
}

.student-info-block span:not(.student-info-icon) {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.2;
}

.student-info-block strong {
  min-width: 0;
  color: var(--ink);
  font-size: 0.9rem;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.student-card-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.65rem;
}

.student-card-actions .secondary-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.85rem;
  border-radius: 0.72rem;
  border-color: rgb(from var(--brand-soft) r g b / 0.38);
  background: rgb(from var(--brand-soft) r g b / 0.045);
  color: var(--ink);
}

.student-card-actions .secondary-action svg {
  width: 1.1rem;
  height: 1.1rem;
  color: var(--brand-strong);
  stroke: currentColor;
}

.student-card-actions .student-primary-link {
  color: var(--brand-strong);
}

.student-card-menu summary {
  width: 2.85rem;
  min-height: 2.85rem;
  padding: 0;
  border-radius: 0.72rem;
}

.student-card-menu summary svg,
.student-hero-menu summary svg {
  width: 1.4rem;
  height: 1.4rem;
  stroke: currentColor;
}

.student-profile-topbar {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
}

.student-profile-topbar .back-button {
  color: var(--brand-strong);
}

.student-profile-top-actions {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.student-profile-top-actions .secondary-action {
  width: auto;
  min-height: 2.75rem;
  border-radius: 0.8rem;
  border-color: rgb(from var(--brand-soft) r g b / 0.35);
  background: rgba(255, 255, 255, 0.045);
  color: var(--ink);
}

.student-profile-hero {
  display: grid;
  gap: 0.9rem;
  padding: 1rem;
  border-radius: 1rem;
}

.student-profile-hero .student-hero-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.9rem;
}

.student-hero-identity {
  display: grid;
  min-width: 0;
  gap: 0.34rem;
}

.student-hero-identity h3 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.55rem, 6vw, 2.35rem);
  line-height: 1.05;
}

.student-hero-identity p {
  margin: 0;
  color: var(--muted);
  font-size: 0.96rem;
}

.student-hero-menu summary {
  width: 2.65rem;
  min-height: 2.65rem;
  padding: 0;
  border-radius: 0.75rem;
}

.student-profile-hero .student-hero-details {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.55rem;
}

.student-profile-hero .student-hero-details article {
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.16rem 0.45rem;
  min-height: 4.1rem;
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.035);
}

.student-profile-hero .student-hero-details article svg {
  grid-row: span 2;
  width: 1.1rem;
  height: 1.1rem;
  color: var(--brand-strong);
  stroke: currentColor;
}

.student-profile-hero .student-hero-details span {
  color: var(--muted);
}

.student-profile-hero .student-hero-details strong {
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.student-summary-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.student-summary-card {
  min-height: 7.2rem;
  align-content: start;
  border-radius: 1rem;
  background: var(--card);
}

.profile-card-icon {
  display: inline-grid;
  width: 1.55rem;
  height: 1.55rem;
  place-items: center;
  color: var(--brand-strong);
}

.profile-card-icon svg {
  width: 1.45rem;
  height: 1.45rem;
  stroke: currentColor;
}

.student-summary-card strong {
  font-size: clamp(1.05rem, 3.8vw, 1.55rem);
  font-weight: var(--t-num-w);
  line-height: 1.08;
  overflow-wrap: anywhere;
}

.student-summary-card.is-success .profile-card-icon,
.student-summary-card.is-success small {
  color: var(--success);
}

.student-summary-card.is-warning .profile-card-icon,
.student-summary-card.is-warning small {
  color: var(--brand-strong);
}

.student-summary-card.is-danger .profile-card-icon,
.student-summary-card.is-danger small {
  color: var(--danger);
}

/* T6 — ações manager-only do portão (junto do badge "Acesso"): botões de
   liberar/marcar pago e o aviso discreto de liberação manual com "Desfazer". */
.student-access-actions {
  margin-top: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.student-access-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.student-access-note {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted, #888);
}

.student-access-note .link-button {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  color: var(--brand-strong);
  text-decoration: underline;
}

.student-profile-tabs {
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0.25rem;
  border-radius: 0.9rem;
}

.student-profile-tabs::-webkit-scrollbar {
  display: none;
}

.student-profile-tabs button {
  flex: 0 0 auto;
  white-space: nowrap;
}

.profile-tab-panel {
  border-radius: 1rem;
}

.student-profile-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 64rem) {
  .student-profile-hero .student-hero-details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .student-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 57.99rem) {
  .students-hero,
  .student-profile-topbar {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .students-hero .primary-action,
  .student-profile-top-actions,
  .student-profile-top-actions .primary-action,
  .student-profile-top-actions .secondary-action {
    width: 100%;
  }

  .student-profile-topbar .back-button {
    width: 2.65rem;
  }

  .student-profile-top-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .student-filter-grid {
    grid-template-columns: 1fr;
  }

  .student-card-top {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .student-card-top > .badge {
    grid-column: 2;
    justify-self: start;
  }

  .student-card-info {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .student-info-block {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  .student-info-block:first-child {
    border-top: 0;
  }

  .student-card-actions {
    grid-template-columns: 1fr 1fr auto;
  }

  .student-profile-hero .student-hero-main {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .student-hero-menu {
    grid-column: 2;
    justify-self: start;
  }
}

@media (max-width: 24.5rem) {
  .student-card-actions,
  .student-profile-top-actions,
  .student-profile-actions {
    grid-template-columns: 1fr;
  }

  .student-card-menu {
    justify-self: stretch;
  }

  .student-card-menu summary {
    width: 100%;
  }

  .student-profile-hero .student-hero-details,
  .student-summary-grid {
    grid-template-columns: 1fr;
  }
}

/* Alunos premium refactor v46 */
.students-workspace {
  max-width: 54.5rem !important;
  margin-inline: auto !important;
  gap: 0.78rem !important;
  padding-bottom: calc(var(--bottom-nav-height) + 2.25rem + var(--safe-bottom)) !important;
  overflow-x: hidden !important;
}

.students-hero {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: end !important;
  gap: clamp(0.72rem, 3.2vw, 1.35rem) !important;
  padding-block: 0.22rem 0.18rem !important;
}

.students-hero .eyebrow {
  color: var(--brand-strong) !important;
  font-size: 0.66rem !important;
  letter-spacing: 0.11em !important;
  text-transform: uppercase !important;
}

.students-hero h3 {
  margin: 0.16rem 0 0 !important;
  color: var(--ink) !important;
  font-size: var(--t-h1) !important;
  font-weight: var(--t-h1-w) !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

.students-hero p {
  margin: 0.42rem 0 0 !important;
  color: rgba(247, 244, 235, 0.7) !important;
  font-size: var(--t-sub) !important;
  line-height: var(--t-sub-lh) !important;
}

.students-hero .primary-action {
  width: auto !important;
  min-width: 9.5rem !important;
  min-height: 2.78rem !important;
  padding: 0.64rem 1.05rem !important;
  border-radius: 0.9rem !important;
  font-size: 0.86rem !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}

.students-hero .primary-action svg {
  width: 1.2rem !important;
  height: 1.2rem !important;
}

.student-search-panel {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  gap: 0.62rem !important;
}

.student-search-field {
  min-height: 3.1rem !important;
  padding-inline: 0.9rem !important;
  border-radius: 0.9rem !important;
  border-color: rgba(255, 255, 255, 0.11) !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045), 0 0.9rem 2rem rgba(0, 0, 0, 0.18) !important;
}

.student-search-field:focus-within {
  border-color: rgba(var(--brand-rgb), 0.54) !important;
  box-shadow: none !important;
}

.student-search-field svg {
  width: 1.12rem !important;
  height: 1.12rem !important;
}

.student-search-field input {
  /* RODADA 2R7 (F2): >= 16px — abaixo disso o Chrome/Android da zoom
     automatico ao focar (o zoom agora e permitido, F1). */
  font-size: 1rem !important;
}

.student-filter-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0.5rem !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: visible !important;
}

.student-filter {
  position: relative !important;
  min-width: 0 !important;
  min-height: 3rem !important;
  padding: 0.58rem 0.54rem !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 0.42rem !important;
  border-radius: 0.86rem !important;
  border-color: rgba(255, 255, 255, 0.11) !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
}

.student-filter::after {
  content: "";
  width: 0.42rem;
  height: 0.42rem;
  border-right: 2px solid var(--brand-strong);
  border-bottom: 2px solid var(--brand-strong);
  transform: rotate(45deg) translateY(-0.1rem);
  opacity: 0.95;
}

.student-filter-icon {
  width: 1.14rem !important;
  height: 1.14rem !important;
  color: var(--brand-strong) !important;
}

.student-filter-icon svg {
  width: 1.14rem !important;
  height: 1.14rem !important;
}

.student-filter-label {
  min-width: 0 !important;
  color: rgba(247, 244, 235, 0.88) !important;
  font-size: clamp(0.66rem, 2.55vw, 0.84rem) !important;
  font-weight: 650 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.student-filter select {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  opacity: 0 !important;
  cursor: pointer !important;
}

.students-list-panel {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.students-list-panel .section-title {
  margin-bottom: 0.8rem !important;
  align-items: start !important;
}

.students-list-panel .section-title > div {
  display: grid !important;
  gap: 0.18rem !important;
}

.students-list-panel .section-title h3 {
  font-size: clamp(1.45rem, 6vw, 1.85rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.08 !important;
}

.students-list-panel .small-text {
  color: rgba(247, 244, 235, 0.72) !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
}

.student-card-list {
  gap: 0.68rem !important;
}

/* [F1.1] Quantos a busca/filtro achou. Só aparece quando há recorte — sem
   recorte, quem conta é o cabeçalho da tela. */
.students-achados {
  margin: 0 0 0.5rem !important;
  color: var(--txt2) !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
}

/* ── [F1.1e] Alunos com dados incompletos para contrato — UMA LINHA ────────
   Era um painel com título, subtítulo e um card por aluno no topo da lista:
   meia tela para um aviso que não é de hoje. Agora é uma linha discreta que
   ABRE a lista quando tocada. Tom âmbar (atenção, não erro). */
.contract-gaps-linha {
  display: grid !important;
  gap: 0.55rem !important;
}

.contract-gaps-resumo {
  display: flex !important;
  align-items: center !important;
  gap: 0.55rem !important;
  width: 100% !important;
  padding: 0.5rem 0.7rem !important;
  border: 1px solid rgb(from var(--brand) r g b / 0.28) !important;
  border-radius: 0.8rem !important;
  background: rgb(from var(--brand) r g b / 0.06) !important;
  color: var(--ink) !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  text-align: left !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent;
}

.contract-gaps-texto {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.contract-gaps-seta {
  margin-left: auto !important;
  display: inline-flex !important;
  flex: 0 0 auto !important;
  color: var(--txt2) !important;
  transition: transform 140ms ease !important;
}

.contract-gaps-seta svg {
  width: 1rem !important;
  height: 1rem !important;
}

.contract-gaps-seta.is-open {
  transform: rotate(180deg) !important;
}

.contract-gaps-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 1.5rem !important;
  height: 1.5rem !important;
  border-radius: 0.5rem !important;
  background: rgb(from var(--brand) r g b / 0.16) !important;
  color: var(--accent) !important;
  flex: 0 0 auto !important;
}

.contract-gaps-icon svg {
  width: 0.95rem !important;
  height: 0.95rem !important;
}

.contract-gaps-list {
  display: grid !important;
  gap: 0.55rem !important;
}

.contract-gap-row {
  width: 100% !important;
  text-align: left !important;
  cursor: pointer !important;
  border: 1px solid var(--borda) !important;
  background: var(--card) !important;
  border-radius: 0.85rem !important;
}

.contract-gap-row:hover,
.contract-gap-row:focus-visible {
  border-color: rgb(from var(--brand) r g b / 0.5) !important;
  background: rgb(from var(--brand) r g b / 0.05) !important;
}

.contract-gap-chips {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0.3rem !important;
  margin-top: 0.15rem !important;
}

.contract-gap-label {
  color: rgb(from var(--ink) r g b / 0.6) !important;
  font-size: 0.74rem !important;
  font-weight: 500 !important;
}

.contract-gap-chip {
  display: inline-flex !important;
  align-items: center !important;
  padding: 0.1rem 0.5rem !important;
  border-radius: 999px !important;
  border: 1px solid rgb(from var(--brand) r g b / 0.4) !important;
  background: rgb(from var(--brand) r g b / 0.12) !important;
  color: var(--accent) !important;
  font-size: 0.72rem !important;
  font-weight: 650 !important;
  white-space: nowrap !important;
}

.contract-gap-cta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.32rem !important;
  flex: 0 0 auto !important;
  color: var(--accent) !important;
  font-size: 0.8rem !important;
  font-weight: 650 !important;
}

.contract-gap-cta svg {
  width: 1.05rem !important;
  height: 1.05rem !important;
}

@media (max-width: 26rem) {
  .contract-gap-cta span {
    display: none !important;
  }
}

/* Aviso de bloqueio da emissão de contrato (modal) */
.contract-gate {
  display: grid !important;
  gap: 0.85rem !important;
}

.contract-gate-group {
  border: 1px solid rgb(from var(--brand) r g b / 0.32) !important;
  background: rgb(from var(--brand) r g b / 0.06) !important;
  border-radius: 0.9rem !important;
  padding: 0.85rem 0.9rem !important;
  display: grid !important;
  gap: 0.55rem !important;
}

.contract-gate-group-title {
  margin: 0 !important;
  font-size: 0.84rem !important;
  font-weight: 700 !important;
  color: var(--texto) !important;
}

.contract-gate-list {
  margin: 0 !important;
  padding-left: 1.1rem !important;
  display: grid !important;
  gap: 0.2rem !important;
}

.contract-gate-list li {
  color: var(--accent) !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
}

.contract-gate-action {
  width: 100% !important;
  justify-content: center !important;
}

.student-card {
  position: relative !important;
  gap: 0.6rem !important;
  padding: clamp(0.75rem, 2.7vw, 0.92rem) !important;
  border-radius: 1rem !important;
  border: 1px solid var(--borda) !important;
  background: var(--card) !important;
  overflow: visible !important;
}

.student-card-top {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 0.68rem !important;
}

.student-card .entity-avatar {
  width: clamp(3.25rem, 14vw, 4.15rem) !important;
  height: clamp(3.25rem, 14vw, 4.15rem) !important;
  min-width: clamp(3.25rem, 14vw, 4.15rem) !important;
  border: 1px solid rgba(255, 255, 255, 0.13) !important;
  box-shadow: none !important;
}

.student-card-main {
  min-width: 0 !important;
  gap: 0.18rem !important;
}

.student-card-main > strong {
  color: var(--ink) !important;
  font-size: clamp(1.02rem, 4.45vw, 1.24rem) !important;
  line-height: 1.08 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.student-goal {
  color: rgba(247, 244, 235, 0.74) !important;
  font-size: clamp(0.76rem, 3.15vw, 0.9rem) !important;
  line-height: 1.15 !important;
  display: flex !important;
  overflow: hidden !important;
}

.student-goal > span {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  min-width: 0 !important;
}

.student-goal svg {
  width: 0.96rem !important;
  height: 0.96rem !important;
  color: var(--brand-strong) !important;
}

.student-card-side {
  display: grid !important;
  grid-template-columns: auto auto !important;
  justify-content: end !important;
  align-items: center !important;
  gap: 0.32rem !important;
}

.student-card-side .badge {
  min-height: 1.58rem !important;
  padding: 0.22rem 0.58rem !important;
  border-radius: 999px !important;
  font-size: clamp(0.58rem, 2.25vw, 0.72rem) !important;
  white-space: nowrap !important;
}

.student-card-menu {
  position: relative !important;
  justify-self: end !important;
}

.student-card-menu summary {
  width: 2.75rem !important;
  height: 2.75rem !important;
  min-height: 2.75rem !important;
  padding: 0 !important;
  border-radius: 0.62rem !important;
  color: var(--brand-strong) !important;
  background: rgba(255, 255, 255, 0.035) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.student-card-menu summary svg {
  width: 1rem !important;
  height: 1rem !important;
}

.student-card-menu > div {
  right: 0 !important;
  left: auto !important;
  min-width: 11.5rem !important;
}

.student-card-info {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0 !important;
  padding-top: 0.54rem !important;
  border-top: 1px solid rgba(255, 255, 255, 0.075) !important;
}

.student-info-block {
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  grid-template-areas:
    "icon label"
    "icon value" !important;
  align-items: center !important;
  column-gap: 0.3rem !important;
  row-gap: 0.03rem !important;
  padding: 0.08rem 0.38rem !important;
  border-left: 1px solid rgba(255, 255, 255, 0.075) !important;
  background: transparent !important;
}

.student-info-block:first-child {
  border-left: 0 !important;
  padding-left: 0 !important;
}

.student-info-icon {
  grid-area: icon !important;
  width: 0.92rem !important;
  height: 0.92rem !important;
  color: var(--brand-strong) !important;
}

.student-info-icon svg {
  width: 0.92rem !important;
  height: 0.92rem !important;
}

.student-info-block > span:not(.student-info-icon) {
  grid-area: label !important;
  min-width: 0 !important;
  color: rgba(247, 244, 235, 0.72) !important;
  font-size: clamp(0.52rem, 2.05vw, 0.66rem) !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.student-info-block > strong {
  grid-area: value !important;
  min-width: 0 !important;
  color: rgba(247, 244, 235, 0.9) !important;
  font-size: clamp(0.66rem, 2.65vw, 0.82rem) !important;
  font-weight: 650 !important;
  line-height: 1.12 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.student-card-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.5rem !important;
  align-items: center !important;
}

.student-card-actions .secondary-action {
  min-height: 2.75rem !important;
  padding: 0.5rem 0.62rem !important;
  border-radius: 0.68rem !important;
  font-size: clamp(0.72rem, 2.75vw, 0.84rem) !important;
  font-weight: 650 !important;
  line-height: 1 !important;
  color: rgba(247, 244, 235, 0.88) !important;
  border-color: rgba(var(--brand-rgb), 0.54) !important;
  background: rgba(5, 5, 5, 0.2) !important;
}

.student-card-actions .secondary-action svg {
  width: 0.94rem !important;
  height: 0.94rem !important;
  color: var(--brand-strong) !important;
}

.student-card-actions .student-primary-link {
  color: rgba(247, 244, 235, 0.92) !important;
}

@media (max-width: 32.5rem) {
  .students-workspace {
    gap: 0.64rem !important;
    padding-bottom: calc(var(--bottom-nav-height) + 2.4rem + var(--safe-bottom)) !important;
  }

  .students-hero .primary-action {
    min-width: 8.75rem !important;
    min-height: 2.75rem !important;
    padding-inline: 0.76rem !important;
    font-size: 0.78rem !important;
  }

  .student-search-field {
    min-height: 2.92rem !important;
  }

  .student-filter-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0.42rem !important;
  }

  .student-filter {
    min-height: 2.78rem !important;
    padding: 0.48rem 0.44rem !important;
    gap: 0.32rem !important;
  }

  .student-filter-icon,
  .student-filter-icon svg {
    width: 1rem !important;
    height: 1rem !important;
  }

  .student-card {
    gap: 0.54rem !important;
    padding: 0.68rem !important;
  }

  .student-card-top {
    gap: 0.55rem !important;
  }

  .student-card-side {
    gap: 0.22rem !important;
  }

  .student-card-menu summary {
    width: 2.75rem !important;
    height: 2.75rem !important;
    min-height: 2.75rem !important;
  }

  .student-card-info {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .student-info-block {
    padding-inline: 0.25rem !important;
    column-gap: 0.22rem !important;
  }

  .student-card-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.42rem !important;
  }

  .student-card-actions .secondary-action {
    min-height: 2.75rem !important;
    padding-inline: 0.44rem !important;
  }
}

/* A-03: a 390px o badge desce para linha própria, sem concorrer com "Enviar link" */
@media (max-width: 24.5rem) {
  .student-card-top {
    grid-template-columns: auto minmax(0, 1fr) !important;
  }

  .student-card-side {
    grid-column: 1 / -1 !important;
    justify-self: start !important;
    grid-template-columns: auto !important;
    justify-content: start !important;
  }
}

@media (max-width: 23rem) {
  .students-hero {
    grid-template-columns: 1fr !important;
  }

  .students-hero .primary-action {
    width: 100% !important;
  }
}

/* Perfil do aluno premium refactor v48 */
.student-page {
  max-width: 55rem !important;
  margin-inline: auto !important;
  gap: 0.72rem !important;
  padding-bottom: calc(var(--bottom-nav-height) + 2.75rem + var(--safe-bottom)) !important;
  overflow-x: hidden !important;
}

.student-profile-topbar {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 0.62rem !important;
  padding: 0.06rem 0 0.12rem !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.student-profile-topbar .eyebrow,
.student-profile-topbar p,
.student-profile-top-actions {
  display: none !important;
}

.student-profile-topbar h3 {
  margin: 0 !important;
  color: var(--ink) !important;
  font-size: var(--t-h1) !important;
  font-weight: var(--t-h1-w) !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
}

.student-profile-topbar .back-button {
  width: 2.75rem !important;
  height: 2.75rem !important;
  min-height: 2.75rem !important;
  color: var(--brand-strong) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.student-profile-topbar .back-button svg {
  width: 1.35rem !important;
  height: 1.35rem !important;
}

/* ═══════════════════════════════════════════════
   ALUNOS v54 — flat/chapado, sem liquid glass
   ═══════════════════════════════════════════════ */

/* Search field: flat */
.student-search-field {
  background: var(--card) !important;
  box-shadow: none !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.student-search-field:focus-within {
  border-color: rgba(var(--brand-rgb), 0.5) !important;
  box-shadow: none !important;
}

/* Filter pills: flat */
.student-filter {
  background: var(--card) !important;
  box-shadow: none !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Student card: flat, no glow, no radial orb */
.student-card {
  background: var(--card) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
  border: 1px solid var(--borda) !important;
  border-radius: 16px !important;
  padding: 14px !important;
  gap: 10px !important;
}

/* Avatar: no glow ring */
.student-card .entity-avatar {
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: none !important;
}

/* Card side: badge only (no menu alongside) */
.student-card-side {
  grid-template-columns: auto !important;
  justify-content: end !important;
  align-items: start !important;
}

.student-card-side .badge {
  font-size: 0.7rem !important;
  padding: 3px 8px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

/* Goal icon: target circle */
.student-goal svg {
  width: 14px !important;
  height: 14px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.5 !important;
  color: var(--dourado) !important;
}

/* Info blocks: compact */
.student-card-info {
  padding-top: 10px !important;
  border-top: 1px solid var(--borda) !important;
}

.student-info-block {
  padding-inline: 0 !important;
  border-left: 0 !important;
  gap: 0.15rem !important;
}

.student-info-block:not(:first-child) {
  border-left: 1px solid var(--borda) !important;
  padding-left: 0.5rem !important;
}

/* Action buttons: gold outline */
.student-card-actions .secondary-action {
  background: transparent !important;
  border: 1px solid rgba(var(--brand-rgb), 0.4) !important;
  color: var(--dourado) !important;
  font-size: 0.8rem !important;
  min-height: 40px !important;
}

.student-card-actions .secondary-action:hover {
  background: rgba(var(--brand-rgb), 0.08) !important;
}

.student-card-actions .secondary-action svg {
  color: var(--dourado) !important;
}

/* Flat hero button */
.students-hero .primary-action {
  box-shadow: none !important;
}

/* List gap */
.student-card-list {
  gap: 10px !important;
}

/* Hero eyebrow gone (hidden globally via base.css .eyebrow rule) */

/* Students list panel: no extra padding */
.students-list-panel {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.student-profile-hero {
  position: relative !important;
  padding: clamp(0.82rem, 3.2vw, 1.1rem) !important;
  border-radius: 1.02rem !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025)) !important;
  border: 1px solid rgba(255, 255, 255, 0.11) !important;
  box-shadow: 0 1rem 2.4rem rgba(0, 0, 0, 0.28), inset 0 1px 0 var(--borda) !important;
  overflow: visible !important;
}

.student-profile-hero .student-hero-main {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: clamp(0.78rem, 4vw, 1.6rem) !important;
  min-width: 0 !important;
}

.student-profile-hero .entity-avatar {
  width: clamp(4.55rem, 19vw, 6.6rem) !important;
  height: clamp(4.55rem, 19vw, 6.6rem) !important;
  min-width: clamp(4.55rem, 19vw, 6.6rem) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow: none !important;
}

.student-profile-hero .student-hero-identity {
  min-width: 0 !important;
  gap: 0.36rem !important;
}

.student-profile-hero .student-hero-identity h3 {
  margin: 0 !important;
  color: var(--ink) !important;
  font-size: clamp(1.38rem, 5.75vw, 2rem) !important;
  font-weight: 600 !important;
  line-height: 1.06 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.student-profile-hero .student-hero-identity p {
  margin: 0 !important;
  color: rgba(247, 244, 235, 0.72) !important;
  font-size: clamp(0.8rem, 3.2vw, 0.95rem) !important;
  line-height: 1.2 !important;
}

.student-profile-hero .badge-row {
  display: flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  margin-top: 0.08rem !important;
}

.student-profile-hero .badge-row .badge:not(:first-child),
.student-profile-hero .student-hero-details {
  display: none !important;
}

.student-profile-hero .badge {
  min-height: 1.62rem !important;
  padding: 0.22rem 0.62rem !important;
  border-radius: 999px !important;
  font-size: 0.72rem !important;
  font-weight: 650 !important;
}

.student-hero-menu {
  position: relative !important;
  align-self: start !important;
}

.student-hero-menu summary {
  width: 2rem !important;
  height: 2rem !important;
  min-height: 2rem !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: var(--brand-strong) !important;
  background: transparent !important;
  box-shadow: none !important;
}

.student-hero-menu summary svg {
  width: 1.12rem !important;
  height: 1.12rem !important;
}

.student-hero-menu > div {
  right: 0 !important;
  left: auto !important;
  min-width: 12.5rem !important;
}

.student-summary-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.62rem !important;
}

.student-summary-grid .student-summary-card:nth-child(2) {
  display: none !important;
}

.student-summary-card {
  min-height: 6rem !important;
  padding: 0.72rem !important;
  border-radius: 1rem !important;
  background: var(--card) !important;
  border: 1px solid var(--borda) !important;
}

.student-summary-card svg {
  width: 1.28rem !important;
  height: 1.28rem !important;
  color: var(--brand-strong) !important;
}

.student-summary-card span {
  color: rgba(247, 244, 235, 0.64) !important;
  font-size: clamp(0.7rem, 2.75vw, 0.82rem) !important;
  line-height: 1.12 !important;
}

.student-summary-card strong {
  color: var(--ink) !important;
  font-size: clamp(1.08rem, 4.8vw, 1.58rem) !important;
  font-weight: var(--t-num-w) !important;
  line-height: 1.08 !important;
  letter-spacing: 0 !important;
}

.student-summary-card small {
  color: rgba(247, 244, 235, 0.72) !important;
  font-size: clamp(0.68rem, 2.7vw, 0.78rem) !important;
  line-height: 1.12 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   [41.23] A TIRA SAI DE DENTRO DO CARTÃO.

   O [41.1] achou uma causa REAL do corte — centralizar a pastilha ativa deixa,
   por construção, as duas vizinhas pela metade — e a consertou. Mas sobrou
   outra, e é esta: A TIRA ERA ELA MESMA UM CARTÃO COM BORDA. Tinha
   `background`, `border: 1px` e `border-radius`, e vivia dentro da goteira de
   1rem do `.sp-sticky-head`.

   Daí os dois sintomas juntos:
     · a última aba termina numa LINHA DURA — a borda do próprio cartão;
     · e não aparece esmaecido nenhum, porque não cabe um esmaecido dentro de
       uma borda: o fade é desenhado na moldura, que tem exatamente a largura
       da caixa com borda, e some sob a borda e o canto arredondado.

   AGORA a tira é uma FAIXA DA LARGURA DA TELA: sem fundo, sem borda, sem
   canto. A goteira de 16px passa para DENTRO do elemento que rola, e o
   esmaecido acontece nas pontas de verdade.

   `aba-nao-corta.test.js` é a guarda: ela mede, para CADA aba ativa e nos dois
   aparelhos, que nenhuma pastilha é cortada por um ancestral com borda.
   ═══════════════════════════════════════════════════════════════════════ */
.student-profile-tabs {
  width: 100% !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  min-height: 2.84rem !important;
  /* A GOTEIRA POR DENTRO: é ela que faz a primeira e a última pastilha
     nascerem inteiras, e é ela que o snapport tem de respeitar. */
  padding: 0 16px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x proximity !important;
  scroll-padding-inline: 16px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
}

.student-profile-tabs::-webkit-scrollbar {
  display: none !important;
}

/* Indicador de rolagem: fades sobrepostos nas bordas da tira de abas. As classes
   has-overflow-* são alternadas via JS conforme a posição do scroll — sem
   overflow, ambos ficam invisíveis (opacity 0). Acompanham os cantos arredondados
   da tira e fundem as abas no fundo (var(--bg)) para sinalizar "tem mais abas". */
.tabs-scroller {
  position: relative !important;
  /* [41.23] A FAIXA VAI DE BORDA A BORDA. O `.sp-sticky-head` já faz o sangramento
     dele (`margin-inline: -1rem; padding: 0 1rem`) para cobrir a goteira do
     workspace; aqui a moldura DESFAZ essa goteira, porque a tira não é conteúdo
     da coluna — é uma faixa da tela. A goteira volta por dentro do elemento que
     rola, onde ela não corta nada. */
  margin-inline: -1rem !important;
}

/* A tira de sub-abas mora DENTRO de um cartão de conteúdo, não no cabeçalho
   sangrado: ali o sangramento de 1rem arrancaria a faixa para fora do cartão.
   Ela cancela só a goteira do próprio painel. */
.ev-panel .tabs-scroller {
  margin-inline: calc(clamp(0.78rem, 3vw, 1rem) * -1) !important;
}

/* [41.1] A tira de sub-abas de Evolução era ela mesma `position: sticky`. Com a
   moldura nova em volta, quem gruda é a moldura — senão o sticky prenderia
   dentro de um pai da mesma altura e não grudaria em nada. */
.tabs-scroller.is-sticky {
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
}

.tabs-scroller::before,
.tabs-scroller::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 2rem !important;
  pointer-events: none !important;
  opacity: 0 !important;
  transition: opacity 0.18s ease !important;
  z-index: 3 !important;
}

/* [41.1] O fundo do esmaecido é declarado pela moldura (`--fade-do-rolador`),
   não chumbado: a tira da ficha mora sobre o fundo da tela e a tira de sub-abas
   mora sobre o fundo do cartão. Um gradiente fixo em --bg deixaria um borrão
   claro sobre o cartão. */
.tabs-scroller {
  --fade-do-rolador: var(--bg, #0D0D0D);
}

.tabs-scroller::before {
  left: 0 !important;
  border-radius: 0.78rem 0 0 0.78rem !important;
  background: linear-gradient(to right, var(--fade-do-rolador), transparent) !important;
}

.tabs-scroller::after {
  right: 0 !important;
  border-radius: 0 0.78rem 0.78rem 0 !important;
  background: linear-gradient(to left, var(--fade-do-rolador), transparent) !important;
}

.ev-panel .tabs-scroller {
  --fade-do-rolador: var(--card, #141414);
}

.tabs-scroller.has-overflow-left::before {
  opacity: 1 !important;
}

.tabs-scroller.has-overflow-right::after {
  opacity: 1 !important;
}

.student-profile-tabs button {
  flex: 0 0 auto !important;
  min-height: 2.75rem !important;
  padding: 0 0.78rem !important;
  border: 0 !important;
  border-radius: 0.64rem !important;
  color: rgba(247, 244, 235, 0.68) !important;
  background: transparent !important;
  font-size: clamp(0.74rem, 2.65vw, 0.86rem) !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  scroll-snap-align: start !important;
}

.student-profile-tabs button.is-active {
  color: var(--brand-strong) !important;
  background: linear-gradient(180deg, rgba(var(--brand-rgb), 0.11), rgba(var(--brand-rgb), 0.02)) !important;
  box-shadow: inset 0 -2px 0 var(--brand-strong) !important;
}

.student-page .panel,
.profile-activity-card,
.profile-pending-panel,
.profile-evolution-panel {
  border-radius: 1rem !important;
  background: var(--card) !important;
  border: 1px solid var(--borda) !important;
}

.student-page .panel {
  padding: clamp(0.78rem, 3vw, 1rem) !important;
}

.student-page .section-title {
  align-items: center !important;
  gap: 0.6rem !important;
  margin-bottom: 0.62rem !important;
}

.student-page .section-title h3 {
  color: var(--ink) !important;
  font-size: clamp(1rem, 4vw, 1.32rem) !important;
  font-weight: 600 !important;
  line-height: 1.12 !important;
  letter-spacing: 0 !important;
}

.student-page .section-title .small-text {
  font-size: 0.76rem !important;
}

.profile-card-icon,
.profile-card-icon svg {
  width: 1.26rem !important;
  height: 1.26rem !important;
  color: var(--brand-strong) !important;
}

.student-page .mini-button {
  min-height: 2.75rem !important;
  padding: 0.46rem 0.78rem !important;
  border-radius: 999px !important;
  border: 1px solid rgba(var(--brand-rgb), 0.58) !important;
  color: var(--brand-strong) !important;
  background: rgba(5, 5, 5, 0.22) !important;
  font-size: 0.78rem !important;
  font-weight: 650 !important;
  line-height: 1 !important;
}

.profile-evolution-panel {
  overflow: hidden !important;
}

.profile-evolution-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0.8rem !important;
  align-items: stretch !important;
}

.profile-chart-wrap {
  min-width: 0 !important;
  position: relative !important;
}

.profile-volume-chart {
  width: 100% !important;
  height: auto !important;
  min-height: 9.5rem !important;
  overflow: visible !important;
}

.profile-volume-chart line {
  stroke: rgba(255, 255, 255, 0.07) !important;
  stroke-width: 1 !important;
}

.profile-volume-chart polygon {
  fill: rgba(var(--brand-rgb), 0.12) !important;
}

.profile-volume-chart polyline,
.profile-volume-chart path {
  fill: none !important;
  stroke: var(--brand-strong) !important;
  stroke-width: 3 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  filter: drop-shadow(0 0.28rem 0.55rem rgba(var(--brand-rgb), 0.18)) !important;
}

.profile-volume-chart circle {
  fill: var(--brand-strong) !important;
  stroke: rgba(8, 8, 8, 0.95) !important;
  stroke-width: 3 !important;
}

.profile-chart-labels {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 0.2rem !important;
  margin-top: -0.28rem !important;
  color: rgba(247, 244, 235, 0.72) !important;
  font-size: 0.68rem !important;
  font-weight: 650 !important;
  text-align: center !important;
}

.profile-chart-summary {
  display: grid !important;
  align-content: center !important;
  justify-items: start !important;
  gap: 0.24rem !important;
  min-width: 8rem !important;
  padding: 0.72rem !important;
  border-radius: 0.78rem !important;
  background: rgba(255, 255, 255, 0.035) !important;
  border: 1px solid rgba(255, 255, 255, 0.075) !important;
}

.profile-chart-summary strong {
  color: var(--ink) !important;
  font-size: clamp(1.26rem, 5vw, 1.72rem) !important;
  font-weight: 600 !important;
  line-height: 1 !important;
}

.profile-chart-summary strong small {
  font-size: 0.82rem !important;
  color: rgba(247, 244, 235, 0.74) !important;
}

.profile-chart-summary > span,
.profile-chart-summary > small {
  color: rgba(247, 244, 235, 0.72) !important;
  font-size: 0.78rem !important;
  font-style: normal !important;
}

.profile-chart-summary em {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 1.36rem !important;
  padding: 0.18rem 0.48rem !important;
  border-radius: 999px !important;
  font-size: 0.76rem !important;
  font-style: normal !important;
  font-weight: 700 !important;
}

.profile-chart-summary em.is-positive {
  color: var(--success) !important;
  background: rgba(69, 214, 107, 0.13) !important;
}

.profile-chart-summary em.is-negative {
  color: var(--danger) !important;
  background: rgba(255, 77, 61, 0.13) !important;
}

.profile-tab-panel .quick-grid.student-profile-actions {
  display: none !important;
}

.student-page .workout-list,
.student-page .entity-list,
.student-page .diet-plan-list {
  display: grid !important;
  gap: 0.5rem !important;
}

.student-page .entity-row,
.student-page .workout-card,
.student-page .diet-plan-card,
.student-page .contract-row {
  border-radius: 0.78rem !important;
  background: rgba(255, 255, 255, 0.035) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

@media (min-width: 48rem) {
  .student-summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .profile-evolution-layout {
    grid-template-columns: minmax(0, 1fr) 10.5rem !important;
  }
}

@media (max-width: 32.5rem) {
  .student-page {
    gap: 0.58rem !important;
  }

  .student-profile-hero {
    padding: 0.72rem !important;
  }

  .student-profile-hero .student-hero-main {
    gap: 0.62rem !important;
  }

  .student-profile-hero .student-hero-identity h3 {
    font-size: clamp(1.22rem, 5.35vw, 1.46rem) !important;
  }

  .student-summary-grid {
    gap: 0.48rem !important;
  }

  .student-summary-card {
    min-height: 5.55rem !important;
    padding: 0.62rem !important;
  }

  .student-profile-tabs {
    min-height: 2.64rem !important;
  }

  .student-profile-tabs button {
    min-height: 2.75rem !important;
    padding-inline: 0.62rem !important;
  }

  .profile-volume-chart {
    min-height: 7.8rem !important;
  }
}

/* ═══════════════════════════════════════════════════════
   PERFIL DO ALUNO v54 — flat/chapado, sem liquid glass
   ═══════════════════════════════════════════════════════ */

/* Hero card: flat, compact. Bloco simples — contém só .student-hero-main, que
   cuida do grid interno (avatar | identidade | status). O display:grid antigo
   herdava um template de 2 colunas e impedia o main de ocupar a largura toda. */
.student-profile-hero {
  display: block !important;
  background: var(--card) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
  border: 1px solid var(--borda) !important;
  border-radius: 16px !important;
  padding: 14px !important;
}

/* Cabeçalho premium: 3 colunas — avatar | identidade (expande) | status como
   pill compacto ancorado no canto superior direito (nunca largura inteira). */
.student-profile-hero .student-hero-main {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: flex-start !important;
  gap: 14px !important;
  /* Ocupa a largura toda do card para a coluna 1fr empurrar o pill ao canto. */
  width: 100% !important;
}

.student-profile-hero .entity-avatar {
  width: 60px !important;
  height: 60px !important;
  min-width: 60px !important;
  box-shadow: none !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.student-hero-identity {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}

.student-hero-identity h3 {
  font-size: clamp(1.1rem, 4.5vw, 1.4rem) !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  /* Nome longo trunca em 2 linhas em vez de empurrar o status. */
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.student-hero-identity p {
  color: var(--txt2) !important;
  font-size: 0.82rem !important;
  margin: 0 !important;
}

/* Objetivo: ícone + texto numa linha só; texto longo trunca sem quebra solta. */
.student-hero-goal {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
}

.student-hero-goal .shg-icon {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  color: var(--brand) !important;
}

.student-hero-goal .shg-icon svg {
  width: 15px !important;
  height: 15px !important;
}

.student-hero-goal .shg-text {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Linha "Aluno há X meses": tempo de casa, discreta sob o objetivo */
.student-hero-identity .student-hero-tenure {
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  color: var(--txt2) !important;
  opacity: 0.85 !important;
}

/* Pill de status: compacto, ancorado no topo, sem encolher nem quebrar. */
.student-hero-status {
  align-self: flex-start !important;
  margin-top: 2px !important;
  white-space: nowrap !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  border: 1px solid transparent !important;
}

/* Badge de status do hero com CORES SEMÂNTICAS fixas — nunca herda o tema
   (dourado). Ativo = verde, Inativo = cinza, Atrasado = vermelho. */
.student-hero-status.is-success {
  background: var(--success-soft) !important;
  color: var(--success) !important;
  border-color: rgb(from var(--success) r g b / 0.34) !important;
}

.student-hero-status.is-muted {
  background: rgba(154, 160, 166, 0.14) !important;
  color: var(--txt2) !important;
  border-color: rgba(154, 160, 166, 0.3) !important;
}

.student-hero-status.is-danger {
  background: var(--danger-soft) !important;
  color: var(--danger) !important;
  border-color: rgb(from var(--danger) r g b / 0.34) !important;
}

/* Summary grid: 3 columns × 2 rows */
.student-summary-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

/* Summary card: flat, icon-left layout */
.student-summary-card {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px !important;
  border-radius: 12px !important;
  background: var(--card) !important;
  border: 1px solid var(--borda) !important;
  box-shadow: none !important;
  min-height: 0 !important;
}

.student-summary-card .profile-card-icon {
  grid-row: 1 !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 8px !important;
  background: rgba(var(--brand-rgb), 0.1) !important;
  color: var(--dourado) !important;
  display: grid !important;
  place-items: center !important;
  flex: 0 0 auto !important;
}

.student-summary-card .profile-card-icon svg {
  width: 16px !important;
  height: 16px !important;
}

.profile-card-body {
  display: grid !important;
  gap: 1px !important;
  min-width: 0 !important;
}

.profile-card-body > span {
  color: var(--txt2) !important;
  font-size: 10px !important;
  line-height: 1.3 !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
  white-space: normal !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  text-overflow: unset !important;
}

.profile-card-body > strong {
  color: #fff !important;
  font-size: clamp(0.8rem, 3.2vw, 1rem) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  white-space: normal !important;
  overflow: hidden !important;
  text-overflow: unset !important;
  word-break: break-word !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}

.profile-card-body > small {
  color: var(--txt2) !important;
  font-size: 10px !important;
  line-height: 1.2 !important;
  white-space: normal !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  text-overflow: unset !important;
}

/* Tone colors for summary cards */
.student-summary-card.is-success .profile-card-icon { background: rgba(72, 215, 100, 0.12) !important; color: #48d764 !important; }
.student-summary-card.is-warning .profile-card-icon { background: rgba(var(--brand-rgb), 0.12) !important; color: var(--dourado) !important; }
.student-summary-card.is-danger  .profile-card-icon { background: rgba(255, 90, 79, 0.12) !important; color: #ff5a4f !important; }

/* All panels: flat */
.student-page .panel,
.profile-activity-card,
.profile-pending-panel,
.profile-evolution-panel {
  background: var(--card) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
  border: 1px solid var(--borda) !important;
  border-radius: 16px !important;
}

/* Aba ativa: sublinhado limpo, sem brilho. Destaque SEMPRE na cor do tema do
   professor — texto e sublinhado em var(--brand-strong); nunca cor fixa. Os
   estados semânticos (status do aluno, mensalidades) têm cores próprias e não
   passam por aqui. */
.student-profile-tabs button.is-active {
  color: var(--brand-strong) !important;
  background: rgba(var(--brand-rgb), 0.08) !important;
  box-shadow: inset 0 -2px 0 var(--brand-strong) !important;
}

/* Evolution panel: ↑/↓ indicators */
.profile-chart-summary .is-positive { color: #48d764 !important; }
.profile-chart-summary .is-negative { color: #ff5a4f !important; }

/* Responsive: stack activity cards on very small screens */
@media (max-width: 28rem) {
  .profile-activity-grid {
    grid-template-columns: 1fr !important;
  }

  .student-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   BUG FIXES — divisórias de alunos, menu do perfil
   ═══════════════════════════════════════════════════════════════ */

/* ── Bug #3: student-info-block — layout simples, sem duplicação ── */
.student-card-info {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0 !important;
  padding-top: 10px !important;
  margin-top: 10px !important;
  border-top: 1px solid var(--borda) !important;
}

.student-info-block {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  padding: 0 8px !important;
  border-left: 0 !important;
  min-width: 0 !important;
  /* Remove grid-template-areas herdado */
  grid-template-columns: unset !important;
  grid-template-areas: none !important;
  grid-template-rows: unset !important;
  align-items: unset !important;
}

.student-info-block:first-child {
  padding-left: 0 !important;
}

.student-info-block:not(:first-child) {
  border-left: 1px solid rgba(255, 255, 255, 0.07) !important;
  padding-left: 8px !important;
}

/* Oculta o ícone (muito pequeno e cria falsa separação visual) */
.student-info-icon {
  display: none !important;
}

.student-info-block > span:not(.student-info-icon) {
  grid-area: unset !important;
  color: var(--txt2) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.student-info-block > strong {
  grid-area: unset !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* ── Bug #4: hero ... menu — posição top-right, sem overflow:hidden ── */
.student-profile-hero,
.student-profile-hero .student-hero-main {
  overflow: visible !important;
}

/* Alinhar itens ao topo para o botão ... ficar no canto superior */
.student-profile-hero .student-hero-main {
  align-items: flex-start !important;
}

/* Menu dropdown do perfil: não cortado pela borda */
.student-hero-menu {
  position: relative !important;
  align-self: flex-start !important;
}

.student-hero-menu > div,
.student-hero-menu [class*=menu-list] {
  position: absolute !important;
  right: 0 !important;
  top: 100% !important;
  z-index: 300 !important;
  min-width: 180px !important;
  background: #1E1E1E !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
  overflow: visible !important;
}

/* styles.css hides nth-child(2) with higher specificity — override here since alunos.css loads after */
.student-summary-grid .student-summary-card:nth-child(2) {
  display: grid !important;
}

/* A-01: especificidade maior (0,2,0) garante que base.css não sobrescreva com background:var(--card) */
.students-workspace > .students-list-panel {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* A-02: badge não quebra linha nem é empurrado pelo nome longo */
.student-card-side .badge {
  white-space: nowrap !important;
}

/* ═══════════════════════════════════════════════
   TELA NOVO ALUNO (full-screen form)
   ═══════════════════════════════════════════════ */

.new-student-screen {
  display: flex;
  flex-direction: column;
  max-width: 42rem;
  margin-inline: auto;
  padding-bottom: 0;
  /* Respiro no topo: respeita o notch quando aberta como tela cheia no PWA */
  padding-top: max(0.35rem, env(safe-area-inset-top, 0px));
  min-height: 100%;
}

/* Alça (puxador) no topo, no padrão das sheets que sobem de baixo */
.ns-handle {
  margin-top: 0.1rem;
  margin-bottom: 0.5rem;
}

.ns-topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0 0.75rem;
  background: var(--bg);
  border-bottom: 1px solid var(--borda);
}

.ns-topbar h3 {
  margin: 0;
  text-align: center;
  color: var(--ink);
  font-size: clamp(1.05rem, 4vw, 1.25rem);
  font-weight: 700;
  line-height: 1.1;
}

.ns-topbar .ns-close {
  width: 2.75rem;
  height: 2.75rem;
  min-height: 2.75rem;
  border: 0;
  background: transparent;
  color: var(--brand-strong);
}

.ns-topbar-spacer {
  width: 2.75rem;
}

.ns-form {
  display: flex;
  flex-direction: column;
  gap: 0;
  /* O rodapé (.ns-footer) é IRMÃO logo abaixo deste form (sticky bottom:0), não
     o sobrepõe no fim da rolagem — então não precisa reservar a altura dele aqui.
     Só um respiro curto antes do fio do rodapé. flex:1 faz o corpo ocupar o
     espaço quando o conteúdo é curto (conteúdo no topo, rodapé colado na base). */
  padding: 0.85rem 0;
  flex: 1;
}

/* Visual premium minimalista: seções sem caixa aninhada — apenas um respiro
   generoso e um fio discreto separando uma da outra. Os únicos "cartões" são
   os próprios campos, deixando o formulário leve e plano. */
.ns-section {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 0;
}

.ns-section + .ns-section {
  margin-top: 1.6rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--borda);
}

/* Título discreto na cor do tema (eyebrow): pequeno, em caixa-alta e espaçado,
   guiando o olho sem competir com os rótulos dos campos. */
.ns-section-title {
  margin: 0 0 0.4rem;
  color: var(--dourado);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Foto de perfil — upload centralizado com preview e círculo tracejado dourado quando vazio */
.ns-photo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0 0.5rem;
}

.ns-photo-drop {
  position: relative;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  cursor: pointer;
}

.ns-photo-preview {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

.ns-photo-preview.is-empty {
  border: 2px dashed rgba(var(--brand-rgb), 0.7);
  background-color: rgba(var(--brand-rgb), 0.06);
}

.ns-photo-preview svg {
  width: 30px;
  height: 30px;
  color: var(--dourado);
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
}

.ns-photo-badge {
  position: absolute;
  right: -2px;
  bottom: -2px;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: var(--dourado);
  color: var(--brand-ink);
  border: 2px solid var(--bg);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.ns-photo-badge svg {
  width: 1rem;
  height: 1rem;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
}

.ns-photo-drop:focus-within .ns-photo-preview {
  outline: 2px solid var(--dourado);
  outline-offset: 3px;
}

.ns-photo-hint {
  color: var(--txt2);
  font-size: 0.8rem;
  font-weight: 600;
}

/* CPF — selo verde de validação dentro do campo */
.ns-input-wrap {
  position: relative;
  display: block;
}

.ns-cpf-check {
  position: absolute;
  top: 50%;
  right: 0.75rem;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 999px;
  background: var(--ok);
  color: #fff;
  pointer-events: none;
}

.ns-cpf-check[hidden] {
  display: none;
}

.ns-cpf-check svg {
  width: 0.85rem;
  height: 0.85rem;
  stroke: currentColor;
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ns-input-wrap input[data-cpf-mask] {
  padding-right: 2.6rem;
}

.ns-input-wrap input.is-valid {
  border-color: rgb(from var(--ok) r g b / 0.6);
}

.ns-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  /* Alinha a dupla pelo topo: o aviso do CEP cresce só na própria coluna,
     sem esticar nem desalinhar o campo Número ao lado. */
  align-items: start;
}

/* Todas as duplas lado a lado usam colunas iguais (1fr 1fr): mesma largura,
   mesma quebra de coluna e títulos alinhados verticalmente entre as seções —
   sem campos curtos avulsos que desalinhavam valor/vencimento. */

.ns-row-3 {
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.6rem;
}

/* Campo de data com formato curto DD/MM/AAAA + ícone de calendário.
   O input nativo (que "foge"/desalinha em mobile) fica invisível por cima,
   apenas para abrir o seletor ao tocar; a "face" controla a aparência e nunca
   transborda da coluna (texto com ellipsis, ícone fixo à direita). */
.ns-date {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
}

.ns-date-input.ns-date-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
  -webkit-appearance: none;
  appearance: none;
}

.ns-date-face {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  min-height: 3.2rem;
  padding: 0 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.055);
  color: var(--ink);
  overflow: hidden;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.ns-date-value {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}

/* Data opcional vazia (ex.: Fim do contrato "Sem fim"): mesma cor de placeholder
   dos demais campos, para o vazio não parecer um valor preenchido. */
.ns-date-value.is-placeholder {
  color: rgba(247, 244, 235, 0.65);
}

.ns-date-icon {
  flex-shrink: 0;
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: var(--brand);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Espelha o foco do input nativo na face visível. */
.ns-date-input:focus-visible + .ns-date-face {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(var(--brand-rgb), 0.13);
}

/* Foco dos demais campos do cadastro: o halo segue o tema do professor.
   Sobrescreve o glow fixo (teal antigo) herdado de base.css, que não
   acompanhava --brand. */
.new-student-screen input:focus-visible,
.new-student-screen select:focus-visible,
.new-student-screen textarea:focus-visible {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(var(--brand-rgb), 0.13);
}

.ns-required {
  color: var(--danger);
  font-size: 0.85em;
}

.ns-field-hint {
  display: block;
  margin-top: 0.35rem;
  color: var(--txt2);
  font-size: 0.78rem;
  line-height: 1.3;
}
/* Aviso leve do CEP (não encontrado / falha de rede) — cor de atenção, sem travar. */
.ns-field-hint.is-error {
  color: var(--danger);
}
/* O aviso do CEP é flutuante: ancorado ao campo e fora do fluxo, para que
   apareça/suma sem empurrar nem deslocar os demais campos do formulário. */
.field:has(> [data-cep-status]) {
  position: relative;
}
.ns-field-hint[data-cep-status] {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 0.2rem;
  font-weight: 600;
  z-index: 3;
  pointer-events: none;
}
.ns-field-hint[hidden] {
  display: none;
}

/* Nota da seção explicando quais campos o aluno poderá editar no futuro
   (telefone, e-mail, nascimento, foto) e quais ficam travados para o personal. */
.ns-section-note {
  margin: -0.2rem 0 0.1rem;
  color: var(--txt2);
  font-size: 0.78rem;
  line-height: 1.35;
}

/* Aviso discreto (cor de atenção = tema do professor) quando o valor do aluno
   difere do padrão do plano. Segue --brand/derivadas, sem cor fixa. */
.ns-value-warning {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.35rem;
  color: var(--brand-strong);
  font-size: 0.74rem;
  line-height: 1.3;
}

.ns-value-warning[hidden] {
  display: none;
}

.ns-value-warning::before {
  content: "!";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.95rem;
  height: 0.95rem;
  flex: none;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand-strong);
  font-weight: 700;
  font-size: 0.65rem;
}

.ns-chip-label {
  color: var(--txt2);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: -0.25rem;
}

.ns-chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.radio-chip {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.radio-chip input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.radio-chip span {
  display: inline-flex;
  align-items: center;
  min-height: 2.4rem;
  padding: 0 0.88rem;
  border-radius: 999px;
  border: 1px solid var(--borda);
  background: rgba(255, 255, 255, 0.04);
  color: var(--txt2);
  font-size: 0.84rem;
  font-weight: 500;
  transition: border-color 120ms, background 120ms, color 120ms;
  user-select: none;
}

.radio-chip input:checked + span {
  border-color: rgba(var(--brand-rgb), 0.7);
  background: rgba(var(--brand-rgb), 0.12);
  color: var(--dourado);
  font-weight: 650;
}

.radio-chip:focus-within span {
  outline: 2px solid var(--dourado);
  outline-offset: 2px;
}

.ns-field-error {
  border-color: var(--danger) !important;
  box-shadow: 0 0 0 3px rgb(from var(--danger) r g b / 0.18) !important;
}

[data-cpf-error] {
  display: block;
  color: var(--danger);
  font-size: 0.8rem;
  margin-top: 0.25rem;
}
[data-cpf-error][hidden] {
  display: none;
}

/* Sem altura: o corpo (.ns-form flex:1) já encosta o último campo no respiro do
   rodapé; um espaçador extra só recriaria o espaço morto acima do rodapé. */
.ns-footer-spacer {
  height: 0;
}

/* Rodapé PRESO na base: a tela já abre em frente, acima da navbar (oculta por
   is-mgr-fullscreen), então o rodapé fica colado no fundo do viewport — sem o
   antigo deslocamento da altura da navbar, que deixava um espaço morto abaixo. */
.ns-footer {
  position: sticky;
  bottom: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem calc(0.85rem + var(--safe-bottom, 0px));
  background: var(--bg);
  border-top: 1px solid var(--borda);
}

/* Cancelar à esquerda (largura automática) — anula o width:100% herdado de
   .secondary-action, senão empurraria o Cadastrar aluno para fora da tela.
   Mesmo padrão do rodapé da aba Planos (.ex-cancel-btn). */
.ns-footer .ns-cancel {
  width: auto;
  min-width: 5.5rem;
  flex-shrink: 0;
}

/* Grupo à direita: o primário ocupa o espaço restante, igual ao .ex-footer-right. */
.ns-footer-right {
  display: flex;
  flex: 1;
  gap: 0.5rem;
  justify-content: flex-end;
}

.ns-footer .ns-submit {
  width: 100%;
  min-height: 3.1rem;
  font-weight: 700;
}

/* Em telas muito estreitas, todas as duplas de colunas iguais empilham. */
@media (max-width: 22rem) {
  .ns-row:not(.ns-row-3) {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════
   SHEET AGENDAR
   ═══════════════════════════════════════════════ */

.ag-sheet {
  position: fixed;
  inset: 0;
  z-index: 82;
  display: grid;
  place-items: end center;
}

.ag-sheet[hidden] { display: none; }

.ag-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 100dvh;
  /* Scrim escuro e SÓLIDO o suficiente para cobrir a tela toda.
     Sem backdrop-filter: o blur deixava o conteúdo de baixo vazar
     semitransparente. Agora é uma camada escura limpa. */
  background: rgba(0, 0, 0, 0.72);
}

.ag-panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(100%, 38rem);
  max-height: 92dvh;
  overflow: hidden;
  border-radius: 20px 20px 0 0;
  /* Fundo SÓLIDO próprio — nunca deixa ver o que está atrás da sheet. */
  background: #141414;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 0;
  box-shadow: 0 -24px 64px rgba(0, 0, 0, 0.6);
}

.ag-panel > .ag-head {
  flex-shrink: 0;
  padding: 0.55rem 1.1rem 0.5rem;
}

.ag-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
  padding: 0.55rem 1.1rem 0.75rem;
}

.ag-body::-webkit-scrollbar { display: none; }

.ag-sheet-footer {
  flex-shrink: 0;
  padding: 0.75rem 1.1rem calc(0.75rem + var(--safe-bottom, 0px));
  border-top: 1px solid var(--borda);
  background: var(--card);
}

.ag-sheet-footer:empty { padding: 0; border-top: 0; }

.ag-sheet-footer .primary-action,
.ag-sheet-footer .secondary-action { width: 100%; }

.ag-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
}

.ag-title {
  margin: 0;
  color: var(--ink);
  font-size: clamp(1rem, 4vw, 1.22rem);
  font-weight: 700;
  line-height: 1.1;
}

.ag-close-btn {
  width: 2.1rem;
  height: 2.1rem;
  min-height: 2.1rem;
  border: 0;
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
  border-radius: 999px;
  padding: 0;
}

.ag-close-btn svg {
  width: 1rem;
  height: 1rem;
}

#agSheetBody .form-grid {
  gap: 0.75rem;
}

@media (min-width: 38rem) {
  .ag-panel {
    border-radius: 20px;
    margin-bottom: 1rem;
  }
}

/* ─── Agendar atividade: formulário repaginado (avatar, chips) ─── */
.ag-form {
  display: grid;
  gap: 1.1rem;
}

.ag-section {
  display: grid;
  gap: 0.5rem;
}

.ag-section-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Card do ALUNO: avatar + nome + objetivo; o <select> nativo cobre o card
   (opacity 0) e funciona como o seletor ("abre seletor" ao tocar). */
/* [14B.3 B] A CAIXA DO ALUNO tinha ~76px e um círculo grande demais para o
   que ele informa (duas letras). 56px e 32px. */
.ag-student-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 56px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--borda);
  border-radius: 14px;
  padding: 0 0.7rem;
  cursor: pointer;
}

.ag-avatar {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(var(--brand-rgb, 245, 158, 11), 0.18);
  color: var(--brand);
  font-weight: 800;
  font-size: 0.78rem;
}

.ag-student-info {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 0.1rem;
}

.ag-student-name {
  font-size: var(--t-corpo, 15px);
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ag-student-goal {
  font-size: var(--t-fato, 13px);
  color: var(--dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ag-student-caret {
  flex-shrink: 0;
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: var(--dim);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Select nativo invisivel cobrindo o card inteiro (abre o seletor do SO). */
.ag-student-select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

/* ═══════════════════════════════════════════════════════════════════════
   [14B.3] A FOLHA "AGENDAR ATIVIDADE".

   A MARCA DE ESCOLHIDO É UMA SÓ, e serve para o tipo, o dia, a hora e a
   duração: contorno de 1,5px e fundo de 12% na cor do TEMA. A cor do TIPO
   fica no ponto, e só. Antes o cartão "Treino" escolhido ficava verde e o
   "Retorno" ficaria laranja — a cor dizendo duas coisas ao mesmo tempo, e
   nenhuma delas "você escolheu esta".
   ═══════════════════════════════════════════════════════════════════════ */
.ag-pilulas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.ag-pilula {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 36px;
  padding: 0 0.7rem;
  border: 1.5px solid var(--borda);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: var(--t-fato, 13px);
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
}

.ag-pilula.is-escolhida {
  border-color: var(--brand);
  background: rgba(var(--brand-rgb, 245, 158, 11), 0.12);
  font-weight: 600;
}

/* O que já passou não se toca — e diz isso antes de alguém tentar. */
.ag-pilula.is-passado,
.ag-pilula:disabled {
  color: var(--dim);
  border-color: rgba(255, 255, 255, 0.04);
  opacity: 0.55;
  cursor: default;
  pointer-events: none;
}

.ag-tipo-pilula .agenda-ponto {
  flex: 0 0 8px !important;
  width: 8px !important;
  height: 8px !important;
}

/* A linha do rótulo com a ação à direita: "+ outro horário" é AÇÃO, e por
   isso não tem a forma dos horários, que são VALORES. */
.ag-section-label-linha {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
}

.ag-outro-horario {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--dim);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}

/* MINI-CALENDARIO embutido. A CAIXA EM VOLTA SAIU: o rótulo "DATA" já separa
   a seção, e a borda só roubava largura. */
.ag-calendar {
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
}

.ag-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.ag-cal-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ink);
}

.ag-cal-nav {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--borda);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
}

/* Não existe nada para achar lá atrás. */
.ag-cal-nav.is-desligada,
.ag-cal-nav:disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

.ag-cal-nav svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: var(--ink);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ag-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.2rem;
}

.ag-cal-weekdays {
  margin-bottom: 0.3rem;
}

.ag-cal-wd {
  text-align: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--muted);
  padding: 0.2rem 0;
}

.ag-cal-cell {
  display: grid;
  place-items: center;
  height: 38px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.ag-cal-cell.is-empty {
  cursor: default;
}

/* O DIA QUE JÁ PASSOU: bem apagado, e sem toque. */
.ag-cal-cell.is-passado,
.ag-cal-cell:disabled {
  color: var(--dim);
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}

.ag-cal-cell.is-today {
  box-shadow: inset 0 0 0 1px var(--borda);
}

/* O dia escolhido é um quadrado arredondado de 34px na cor do tema. */
.ag-cal-cell.is-selected {
  justify-self: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--brand);
  color: var(--brand-ink);
  font-weight: 800;
}

/* [14B.3 I] O AVISO VIRA UMA LINHA. Era uma caixa de ~90px com borda
   vermelha, fundo vermelho fraco e triângulo de perigo, dizendo um FATO sobre
   como o app funciona. Gastar a cor de perigo num fato faz com que perigo de
   verdade não signifique mais nada. */
.ag-nota {
  margin: 0;
  color: var(--dim);
  font-size: var(--t-fato, 13px);
  line-height: 1.35;
}

.ag-nota.is-travada {
  color: var(--muted);
}

/* [14B.3 D] "TREINO VINCULADO" era o ÚNICO rótulo desta tela em corpo grande
   e negrito; ALUNO, DATA, HORÁRIO e DURAÇÃO são todos 11px maiúsculo apagado.
   Agora ele é como os outros. */
.ag-form .ag-workout-section > span:first-child {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.ag-footer-actions .primary-action { width: 100%; }

/* ═══════════════════════════════════════════════
   SHEET DETALHE DO EVENTO
   ═══════════════════════════════════════════════ */

.det-sheet {
  position: fixed;
  inset: 0;
  z-index: 83;
  display: grid;
  place-items: end center;
}

.det-sheet[hidden] { display: none; }

.det-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(2px);
}

.det-panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(100%, 38rem);
  max-height: 92dvh;
  overflow: hidden;
  border-radius: 20px 20px 0 0;
  background: var(--card);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 0;
  box-shadow: 0 -24px 64px rgba(0, 0, 0, 0.6);
}

.det-panel > .ag-head {
  flex-shrink: 0;
  padding: 0.55rem 1.1rem;
}

/* [15.5] O CORPO NÃO ESTICA. Ele era `flex: 1` — crescia para preencher o
   painel — e com o painel em tela cheia isso virava um vão de quase 380px
   entre a última linha de dado e o rodapé. Agora ele tem a altura do que
   tem dentro; `flex: 0 1 auto` deixa que ele ENCOLHA (e só então role)
   quando o painel bate no teto de 92dvh. O rolador continua sendo um só,
   como manda o [14B.6]: este. */
.det-panel .ag-body {
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
  padding-bottom: 0.5rem;
}

.det-panel .ag-body::-webkit-scrollbar { display: none; }

.det-panel .ag-sheet-footer {
  padding: 0.75rem 1.1rem calc(0.75rem + var(--safe-bottom, 0px));
}

.det-body {
  display: grid;
  gap: 0.9rem;
  padding: 0 1.1rem 0.25rem;
}

/* ═══════════════════════════════════════════════════════════════════════
   [14.4] A FOLHA DO COMPROMISSO.

   O TÍTULO E O ESTADO num bloco só: a lei [G1] mede o CENTRO de cada filho
   do cabeçalho contra o centro do X, e duas linhas soltas ali dentro fariam
   o X parecer deslocado. Um filho, duas linhas.
   ═══════════════════════════════════════════════════════════════════════ */
.det-titulo-bloco {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

.det-panel .ag-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  /* 20px/700: o tamanho vem da escala, e o peso é o 700 que todo título de
     folha do app já usa — o mesmo do "Partir de um padrão" do [13.1]. */
  font-size: var(--t-objeto);
  font-weight: 700;
}

.det-panel .ag-title > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.det-panel .ag-title .det-ponto {
  flex: 0 0 10px !important;
}

.det-estado {
  /* [15.3 E] Ele carrega DUAS coisas: a frase apagada "confirmado pelo aluno"
     e, quando falta confirmar, a MESMA etiqueta da lista do dia — que tem
     24px de altura e precisa caber sem ser cortada por esta entrelinha. */
  display: inline-flex;
  align-items: center;
  color: var(--dim);
  font-size: var(--t-fato);
  font-weight: 400;
  line-height: 1.2;
}

.det-estado:empty { display: none; }

/* OS DADOS COMO LINHAS, separadas por fio — a caixa cinza em volta deles
   sumiu junto com as pílulas: ela agrupava três fatos que já vinham juntos. */
.det-linhas {
  display: grid;
  gap: 0;
}

.det-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 44px;
  padding: 0.45rem 0;
  border-top: 1px solid var(--borda);
}

.det-linha:first-child { border-top: 0; }

.det-rotulo {
  flex: 0 0 auto;
  color: var(--dim);
  font-size: var(--t-fato);
}

.det-dado {
  min-width: 0;
  color: var(--ink);
  font-size: var(--t-corpo);
  font-weight: 600;
  text-align: right;
}

.det-notas {
  margin: 0;
  color: var(--muted);
  font-size: var(--t-fato);
  white-space: pre-wrap;
}

/* O RODAPÉ: UMA ação âmbar de 52px em largura total, e as outras como
   linhas de 60px — o componente das folhas do [12.2]. */
.det-rodape {
  display: grid;
  gap: 0.35rem;
}

.det-principal {
  width: 100%;
  min-height: 52px;
}

/* UM ÂMBAR SÓ NA FOLHA INTEIRA. No resto do app o ícone da linha de ação vem
   na cor do tema; aqui existe um botão âmbar acima dele, e dois âmbares na
   mesma tela é o mesmo que nenhum. */
.det-acoes .acao-icone {
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted);
}

.det-panel .whatsapp-button {
  width: 100%;
  justify-content: center;
}

@media (min-width: 38rem) {
  .det-panel {
    border-radius: 20px;
    margin-bottom: 1rem;
  }
}

/* ═══════════════════════════════════════════════════════════════
   PERFIL TELA CHEIA — cabeçalho fixo, abas sem recarregar
   ═══════════════════════════════════════════════════════════════ */

.sp-wrapper {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

.sp-sticky-head {
  position: sticky;
  top: var(--mgr-header-h, 5.85rem);
  z-index: 9;
  /* Bleed para cobrir o padding lateral do workspace-layout */
  margin-inline: -1rem;
  padding: 0 1rem 0.5rem;
  background: var(--bg, #0D0D0D);
  display: flex;
  flex-direction: column;
  gap: 0.62rem;
}

/* Topbar: voltar + título + ações */
.sp-topbar {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
  padding-top: 0.5rem;
}

.sp-topbar .sp-title {
  margin: 0;
  color: var(--ink, #f7f4eb);
  font-size: clamp(1rem, 4.2vw, 1.22rem);
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sp-topbar-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* Ações do topo: chat + menu como ícones */
.sp-chat-btn,
.sp-menu-btn {
  width: 2.5rem !important;
  height: 2.5rem !important;
  min-height: 2.5rem !important;
  color: var(--ink, #f7f4eb) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 0.7rem !important;
}

.sp-chat-btn svg,
.sp-menu-btn svg {
  width: 1.15rem !important;
  height: 1.15rem !important;
}

/* Tab body: conteúdo rolável */
.sp-tab-body {
  display: flex;
  flex-direction: column;
  gap: 0.62rem;
  padding-top: 0.62rem;
}

/* Oculta a topbar antiga quando sp-wrapper está ativo */
.sp-wrapper .student-profile-topbar {
  display: none !important;
}

@media (max-width: 32.5rem) {
  .sp-sticky-head {
    gap: 0.5rem;
  }

  .sp-topbar {
    padding-top: 0.35rem;
  }
}

/* ── Perfil em TELA CHEIA: cabecalho enxuto com respiro de notch ──────────
   A marca e a bottom-nav ja sao ocultas por is-mgr-fullscreen. Aqui a
   sticky-head vira o topo da tela: gruda em top:0 e leva o safe-area no
   proprio padding, para NUNCA cortar no notch (nem na rolagem). */
body.is-sp-screen .manager-workspace .workspace-layout {
  padding-top: 0 !important;
}

body.is-sp-screen .sp-sticky-head {
  top: 0 !important;
  margin-top: 0 !important;
  padding-top: env(safe-area-inset-top, 0px) !important;
}

/* ═══════════════════════════════════════════════════════
   MAIS HUB — hub do aluno (renderStudentProfile)
   ═══════════════════════════════════════════════════════ */



/* ---- perfil: foto de avatar ---- */
.profile-avatar-wrap {
  position: relative;
  flex-shrink: 0;
  display: inline-flex;
}

.profile-photo-label {
  position: absolute;
  bottom: -3px;
  right: -3px;
  cursor: pointer;
  line-height: 0;
}

.profile-photo-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--brand, #f5b82e);
  border: 2px solid var(--surface, #1a1a1a);
}

.profile-photo-badge svg {
  width: 11px;
  height: 11px;
  stroke: #000;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* perfil do gestor — foto grande */
.profile-photo-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0;
}

.profile-photo-section .profile-avatar-wrap .entity-avatar,
.profile-photo-section .profile-photo-preview {
  width: 80px;
  height: 80px;
  min-width: 80px;
  font-size: 1.6rem;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgb(from var(--brand-soft) r g b / 0.45);
}

.profile-photo-section .profile-photo-badge {
  width: 28px;
  height: 28px;
}

.profile-photo-section .profile-photo-badge svg {
  width: 14px;
  height: 14px;
}

.profile-avatar-lg {
  width: 80px !important;
  height: 80px !important;
  min-width: 80px !important;
  font-size: 1.6rem !important;
}
/* ---- fim perfil foto ---- */

/* ── Perfil do gestor: duas camadas (cartão público + dados privados) ── */
.profile-form {
  gap: 1rem;
}

.profile-public-card,
.profile-private-card {
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

/* Cartão público em destaque: borda/halo dourado */
.profile-public-card {
  border: 1px solid var(--dourado-borda, rgba(245, 158, 11, 0.4));
  background:
    linear-gradient(180deg, rgb(from var(--brand) r g b / 0.07), transparent 120px),
    var(--card, #1A1A1A);
  box-shadow: 0 0 0 1px rgb(from var(--brand) r g b / 0.06), var(--shadow);
}

/* Etiqueta de camada (público / privado) */
.profile-layer-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  align-self: flex-start;
  padding: 0.28rem 0.6rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.profile-layer-tag svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.profile-layer-tag--public {
  color: var(--brand-ink, #1A1206);
  background: var(--brand, #F59E0B);
}

.profile-layer-tag--private {
  color: var(--muted, #aaa59a);
  background: rgb(from var(--muted) r g b / 0.12);
  border: 1px solid var(--borda, rgba(255, 255, 255, 0.1));
}

.profile-public-card .profile-photo-section {
  padding: 0.25rem 0;
}

.profile-public-fields {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.profile-public-fields textarea {
  resize: vertical;
  min-height: 56px;
}

.profile-public-note {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  color: var(--muted, #aaa59a);
  font-size: 0.8rem;
  text-align: center;
  justify-content: center;
}

/* Cabeçalho do cartão privado: etiqueta + indicador Completo/Incompleto */
.profile-private-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Indicador dos dados do professor reutilizados em todo contrato */
.profile-doc-status {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.24rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.profile-doc-status svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.profile-doc-status.is-complete {
  color: var(--success);
  background: rgb(from var(--success) r g b / 0.12);
  border: 1px solid rgb(from var(--success) r g b / 0.3);
}

.profile-doc-status.is-incomplete {
  color: var(--brand-strong);
  background: rgb(from var(--brand) r g b / 0.12);
  border: 1px solid rgb(from var(--brand) r g b / 0.32);
}

.profile-doc-hint {
  margin: 0;
  color: var(--muted);
}
/* ---- fim perfil duas camadas ---- */

/* ── Perfil do aluno: nome no cartão público + campos travados ── */
.profile-public-name {
  text-align: center;
}

.profile-public-name strong {
  font-size: 1.05rem;
  font-weight: 800;
}

.profile-locked-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.profile-locked-field {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.6rem 0.7rem;
  border-radius: 10px;
  background: rgb(from var(--muted) r g b / 0.06);
  border: 1px solid var(--borda, rgba(255, 255, 255, 0.08));
}

.profile-locked-field .plf-label {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--muted, #aaa59a);
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.profile-locked-field strong {
  font-size: 0.95rem;
  word-break: break-word;
}

.plf-lock {
  width: 11px;
  height: 11px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.85;
}

/* Lista de ações da tela de Configurações do aluno */
.settings-action-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.settings-action-list .secondary-action {
  text-align: center;
  text-decoration: none;
}
/* ---- fim perfil aluno público/privado ---- */

/* ---- foto de perfil: sheet de preview / recorte ---- */
.photo-crop-panel {
  align-items: stretch;
}

.photo-crop-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  padding: 0.5rem 1.1rem 0.25rem;
}

/* Quadro quadrado com máscara CIRCULAR: a foto é arrastável e ampliável; tudo
   que fica fora do círculo inscrito aparece escurecido e um anel marca o limite
   do recorte. */
.photo-crop-frame {
  position: relative;
  width: 240px;
  height: 240px;
  max-width: 72vw;
  max-height: 72vw;
  overflow: hidden;
  border-radius: 14px;
  background: #000;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.5);
  touch-action: none;
  cursor: grab;
  flex-shrink: 0;
}

.photo-crop-frame.is-grabbing {
  cursor: grabbing;
}

.photo-crop-img {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: top left;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
  will-change: transform;
}

/* Escurece tudo fora do círculo inscrito no quadro (o furo central é a foto). */
.photo-crop-mask {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.55);
  -webkit-mask: radial-gradient(circle at center, transparent 0 calc(50% - 1px), #000 50%);
  mask: radial-gradient(circle at center, transparent 0 calc(50% - 1px), #000 50%);
}

/* Anel branco marcando o limite do círculo. */
.photo-crop-ring {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.92);
}

.photo-crop-hint {
  color: var(--muted);
  font-size: 0.78rem;
  text-align: center;
  margin: 0;
  line-height: 1.4;
}

.photo-crop-controls {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  max-width: 280px;
}

.photo-zoom-slider {
  flex: 1;
  min-width: 0;
  accent-color: var(--brand-soft);
}

.photo-zoom-step {
  flex-shrink: 0;
}

.photo-crop-footer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.photo-crop-footer .primary-action {
  width: 100%;
}

.photo-crop-footer-row {
  display: flex;
  gap: 0.5rem;
}

.photo-crop-footer-row .secondary-action {
  flex: 1;
}
/* ---- fim ajustador de foto (recorte circular) ---- */

/* ---- ajustar logo: zoom + arrastar no formato do slot do header ---- */
.logo-adjust-panel {
  align-items: stretch;
}

.logo-adjust-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  padding: 0.5rem 1.1rem 0.25rem;
}

/* Quadro ARREDONDADO no mesmo formato do slot do header (.brand-logo:
   quadrado com cantos ~19%). Fundo branco como o slot real. */
.logo-adjust-frame {
  position: relative;
  width: 220px;
  height: 220px;
  max-width: 72vw;
  max-height: 72vw;
  border-radius: 19%;
  overflow: hidden;
  background: #fff;
  box-shadow:
    0 0 0 1px var(--brand-soft),
    0 3px 12px rgba(0, 0, 0, 0.5);
  touch-action: none;
  cursor: grab;
  flex-shrink: 0;
}

.logo-adjust-frame.is-grabbing {
  cursor: grabbing;
}

.logo-adjust-img {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: top left;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
  will-change: transform;
}

.logo-adjust-hint {
  color: var(--muted);
  font-size: 0.78rem;
  text-align: center;
  margin: 0;
  line-height: 1.4;
}

.logo-adjust-controls {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  max-width: 280px;
}

.logo-zoom-slider {
  flex: 1;
  min-width: 0;
  accent-color: var(--brand-soft);
}

.logo-zoom-step {
  flex-shrink: 0;
}

.logo-adjust-footer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.logo-adjust-footer .primary-action {
  width: 100%;
}

.logo-adjust-footer-row {
  display: flex;
  gap: 0.5rem;
}

.logo-adjust-footer-row .secondary-action {
  flex: 1;
}
/* ---- fim ajustar logo ---- */








.student-page .mais-hub-item:hover {
  background: rgba(255, 255, 255, 0.06);
}


.student-page .mais-hub-icon {
  background: rgba(255, 255, 255, 0.1);
}







/* ── Perfil do aluno (renderStudentProfile) — fiel ao protótipo ── */
.profile-hero-panel {
  padding: 1.4rem 1rem;
}

.profile-hero-panel .profile-photo-section {
  gap: 0.95rem;
}

.profile-hero-panel .profile-avatar-wrap .entity-avatar {
  width: 96px;
  height: 96px;
  min-width: 96px;
  font-size: 2rem;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgb(from var(--brand-soft) r g b / 0.45);
}

.profile-hero-panel .profile-photo-badge {
  width: 30px;
  height: 30px;
  bottom: 2px;
  right: 2px;
}

.profile-hero-panel .profile-photo-badge svg {
  width: 15px;
  height: 15px;
}

.profile-hero-id {
  text-align: center;
  min-width: 0;
}

.profile-hero-id h2 {
  margin: 0;
  color: var(--ink);
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1.15;
}

.profile-hero-id p {
  margin: 0.25rem 0 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.3;
}

/* Botão Sair em destaque vermelho */
.student-profile .mais-sair-btn {
  color: var(--danger);
  border-color: rgb(from var(--danger) r g b / 0.42);
  background: rgb(from var(--danger) r g b / 0.08);
  font-weight: 720;
}

.student-profile .mais-sair-btn:hover {
  background: rgb(from var(--danger) r g b / 0.16);
  border-color: rgb(from var(--danger) r g b / 0.6);
}

/* ═══════════════════════════════════════════════════════
   ALUNO PERFIL — seção de contrato no perfil do aluno
   ═══════════════════════════════════════════════════════ */

.aluno-perfil-contrato {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.5rem;
}

.aluno-perfil-contrato-info {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
  flex: 1;
}

.aluno-perfil-contrato-info strong {
  font-size: 0.95rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.aluno-perfil-contrato-info span {
  font-size: 0.82rem;
  color: var(--muted);
}

.aluno-perfil-contrato .ghost-button {
  flex-shrink: 0;
}

/* ── ABA PROGRESSO consolidada (Evolução / Check-ins / Histórico) ─────────
   Sub-abas internas no topo, lista de check-ins clicável e o rodapé
   atual/meta do card de peso. Reaproveita .tab-row para o visual das pills. */
.progress-tab {
  display: flex;
  flex-direction: column;
  gap: 0.62rem;
}

.progress-sub-body {
  display: flex;
  flex-direction: column;
  gap: 0.62rem;
}

/* [41.1] O `position: sticky` mudou para a moldura `.tabs-scroller.is-sticky`.
   Aqui ficam só as leis da tira que rola: o padding é DE DENTRO, o snapport
   respeita esse padding (senão a primeira pastilha encosta na borda e nasce
   cortada), e a barra de rolagem não aparece. */
/* [41.23] A mesma lei na tira de sub-abas: ela também era uma caixa com borda
   (herdada de `.tab-row`, em base.css), e por isso o "Atualizaçõe" terminava
   numa linha dura sem esmaecido nenhum. Vira faixa, com a goteira por dentro. */
.progress-subtabs {
  scroll-snap-type: x proximity;
  padding: 0 16px;
  scroll-padding-inline: 16px;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.progress-subtabs::-webkit-scrollbar {
  display: none;
}

.progress-subtabs button {
  scroll-snap-align: start;
}

.weight-widget-goal {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.7rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--line);
}

.weight-widget-goal .wwg-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.weight-widget-goal .wwg-item small {
  font-size: 0.74rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.weight-widget-goal .wwg-item strong {
  font-size: 0.98rem;
  font-weight: 800;
  color: var(--ink);
}

/* ═══════════════════════════════════════════════════════════════
   FICHA · ABA EVOLUÇÃO — cabeçalho premium (selo na cor do tema +
   resumo em chips) acima das sub-abas roláveis. Espelha o padrão
   das abas Treinos/Dieta. Os gráficos/listas internos seguem como
   estavam (timeline, peso, volume, check-ins).
   ═══════════════════════════════════════════════════════════════ */
.ev-panel {
  display: flex;
  flex-direction: column;
}

.ev-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.8rem;
  margin-top: 0.9rem;
  padding: 0.85rem;
  border-radius: 1rem;
  background: rgb(from var(--brand-soft) r g b / 0.05);
  border: 1px solid rgb(from var(--brand-soft) r g b / 0.42);
  box-shadow: 0 0.35rem 0.9rem rgba(0, 0, 0, 0.18);
}

.ev-hero-seal {
  display: inline-grid;
  width: clamp(2.9rem, 12vw, 3.4rem);
  height: clamp(2.9rem, 12vw, 3.4rem);
  place-items: center;
  border-radius: 0.85rem;
  background: linear-gradient(135deg, var(--brand), var(--brand-strong));
  color: var(--brand-ink);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}

.ev-hero-seal svg {
  width: 1.6rem;
  height: 1.6rem;
  stroke: currentColor;
}

.ev-hero-info {
  min-width: 0;
}

.ev-hero-label {
  display: block;
  color: var(--brand-strong);
  font-size: 0.72rem;
  font-weight: 820;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.ev-hero-title {
  display: block;
  margin-top: 0.1rem;
  color: var(--ink);
  font-size: 1.32rem;
  font-weight: 750;
  line-height: 1.14;
}

.ev-hero-title small {
  font-size: 0.62em;
  font-weight: 700;
  color: var(--muted);
}

.ev-hero-objective {
  /* Até 2 linhas: textos longos (ex.: estado vazio "Sequência aparece quando
     houver treinos registrados") aparecem por inteiro em vez de cortados com
     reticências numa única linha. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  margin-top: 0.12rem;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.3;
  overflow: hidden;
}

/* Tendência de peso — cores SEMÂNTICAS, nunca herdam o tema. */
.ev-trend {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 750;
}

.ev-trend.is-down { background: rgba(72, 215, 100, 0.16); color: #48d764; }
.ev-trend.is-up { background: rgba(255, 90, 79, 0.16); color: #ff5a4f; }
.ev-trend.is-flat { background: rgba(255, 255, 255, 0.06); color: var(--muted); }

.ev-stats {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 0.5rem;
  margin-top: 0.7rem;
}

.ev-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.14rem;
  padding: 0.62rem 0.4rem;
  border-radius: 0.85rem;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
}

.ev-stat strong {
  color: var(--ink);
  font-size: clamp(1.05rem, 4.4vw, 1.35rem);
  font-weight: 750;
  line-height: 1;
}

.ev-stat > span {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.ev-stat.is-gold {
  border-color: rgb(from var(--brand-soft) r g b / 0.34);
  background: rgb(from var(--brand-soft) r g b / 0.08);
}

.ev-stat.is-gold strong {
  color: var(--brand-strong);
}

/* Sub-abas e corpo ganham respiro do painel premium. A barra de sub-abas
   gruda no topo do painel (sticky) ao rolar a lista de histórico. */
.ev-panel .progress-tab {
  margin-top: 0.95rem;
}

/* [41.23] O fundo era o do cartão, porque a tira ERA uma caixa. Agora ela é
   faixa: quem carrega o fundo é o painel em volta, e a tira é transparente. */
.ev-panel .progress-subtabs {
  background: transparent;
}

/* Segmento das sub-abas Execuções/Evolução/Check-ins no tema escuro premium.
   A regra global (.tab-row button.is-active) deixava a ativa com fundo BRANCO
   (#fff de styles.css, que base.css não reseta). Aqui a ativa vira um segmento
   escuro destacado, tingido pela cor do tema, com texto claro — sem branco. */
.progress-subtabs {
  gap: 0.3rem;
}

.progress-subtabs button {
  border-radius: 0.6rem;
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.progress-subtabs button.is-active {
  background:
    linear-gradient(145deg, rgb(from var(--brand-soft) r g b / 0.26), rgb(from var(--brand-soft) r g b / 0.12)),
    rgba(255, 255, 255, 0.04);
  color: var(--brand-strong);
  box-shadow:
    inset 0 0 0 1px rgb(from var(--brand-soft) r g b / 0.42),
    0 6px 16px rgba(0, 0, 0, 0.32);
}

.progress-subtabs button:not(.is-active):hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--ink);
}

@media (max-width: 28rem) {
  .ev-hero {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .ev-hero .ev-trend {
    grid-column: 2;
    justify-self: start;
  }
}

/* ═══════════════════════════════════════════════════════════════
   FREQUÊNCIA — dias treinados por semana (prévia de formato).
   Reaproveita o cabeçalho premium (.ev-hero / .ev-stats) e adiciona
   as bolinhas dos dias, o selo de sequência e o histórico semanal.
   ═══════════════════════════════════════════════════════════════ */

.freq-panel {
  display: flex;
  flex-direction: column;
}

/* Selo de sequência no canto do cabeçalho — verde semântico (positivo),
   nunca herda o tema. */
/* ═══════════════════════════════════════════════════════════════
   [41.7] A FREQUÊNCIA — uma frase, a tirinha com legenda e o calendário.

   SAÍRAM daqui, junto com as seções que os usavam: `.freq-streak-badge`
   (que, além de órfão, pintava #48d764 — verde de sistema), `.freq-stats`,
   `.freq-history*`, `.freq-week-row*` e `.freq-mini-dot*`. Eram a lista
   "semana a semana" em barras de texto e a lista "últimas execuções", que
   era conteúdo da sub-aba Execuções duplicado aqui.

   As cores dos três estados vêm do mapa do [41.3] e NÃO seguem o tema: cheio
   âmbar é "treinou", contornado é "não treinou", tracejado é "ainda vem".
   ═══════════════════════════════════════════════════════════════ */

/* [41.7-1] A frase única, no lugar dos dois contadores. */
.freq-frase {
  margin: 0.9rem 0 0;
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 650;
  line-height: 1.35;
}

/* [41.7-2] A base da conta. Encolhe, mas fica: sem ela a média mente.
   [41.22] E SOBE DE TOM: é FRASE, e frase não desce abaixo de --dim. Estava no
   tom mais apagado, quase na cor do fundo — uma frase que a tela precisa que o
   professor leia, escrita para sumir. */
.freq-base {
  margin: 0.3rem 0 0;
  color: var(--dim, #6B665D);
  font-size: 0.74rem;
  line-height: 1.3;
}

/* A TIRINHA DA SEMANA. */
.freq-week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.35rem;
  margin-top: 0.9rem;
}

.freq-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
}

.freq-dot {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: transparent;
}

.freq-dot svg {
  width: 58%;
  height: 58%;
  stroke: currentColor;
}

.freq-day.is-treinou .freq-dot {
  background: var(--estado-espera, #F59E0B);
  border: 0;
  color: #1A1713;
}

.freq-day.is-nao .freq-dot {
  background: transparent;
  border: 1.5px solid #2A2724;
}

.freq-day.is-vem .freq-dot {
  background: transparent;
  border: 1.5px dashed #3A3733;
}

.freq-day.is-today .freq-dot {
  box-shadow: 0 0 0 2px var(--card), 0 0 0 3.5px #6B665D;
}

.freq-day-label {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 650;
}

.freq-day.is-treinou .freq-day-label {
  color: var(--ink);
}

/* Três estados sem legenda viram adivinhação. */
.freq-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.7rem;
  padding-top: 0.6rem;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  color: var(--muted);
  font-size: 0.7rem;
}

.freq-legenda span {
  display: inline-flex;
  align-items: center;
  gap: 0.34rem;
}

.freq-legenda-ponto {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
}

.freq-legenda-ponto.is-treinou {
  background: var(--estado-espera, #F59E0B);
}

.freq-legenda-ponto.is-nao {
  border: 1.5px solid #2A2724;
}

.freq-legenda-ponto.is-vem {
  border: 1.5px dashed #3A3733;
}

/* [41.7-5] O CALENDÁRIO DO MÊS, um bloco visual no lugar de dois de texto. */
.freq-cal {
  margin-top: 1.05rem;
}

.freq-cal-head,
.freq-cal-grade {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.3rem;
}

/* [41.22] O cabeçalho S T Q Q S S D sobe para --muted: ele é rótulo, e
   rótulo ilegível transforma o calendário em enfeite. */
.freq-cal-head {
  margin-bottom: 0.35rem;
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 700;
  text-align: center;
}

.freq-cal-dia,
.freq-cal-vazio {
  display: inline-grid;
  place-items: center;
  justify-self: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 0.72rem;
  font-weight: 650;
}

.freq-cal-dia.is-treinou {
  background: var(--estado-espera, #F59E0B);
  color: #1A1713;
}

.freq-cal-dia.is-sem-treino {
  border: 1.5px solid #2A2724;
  color: var(--muted);
}

/* Dia fora do acompanhamento (antes da entrada, ou futuro): só o número, sem
   contorno, para não parecer um dia perdido.
   [41.22] E O TOM SOBE. Estava em #2C2926 — quase a cor do fundo —, e foi
   disto que o Guilherme falou: "não dá pra ver os cinzas". O número de um dia
   é informação: ele diz QUE DIA é aquela casa. Secundário não é invisível. */
.freq-cal-dia.is-fora {
  color: var(--dim, #6B665D);
}

.freq-cal-dia.is-hoje {
  box-shadow: 0 0 0 1.5px #6B665D;
}

/* ═══════════════════════════════════════════════════════════════
   FINANCEIRO — mensalidades em cards (prévia de formato).
   Reaproveita o cabeçalho premium (.ev-hero / .ev-stats) e o aviso de
   prévia (.freq-preview-note). As cores são SEMÂNTICAS e nunca herdam o
   tema: Pago verde, A vencer amarelo, Atrasado vermelho.
   ═══════════════════════════════════════════════════════════════ */

.fin-panel {
  display: flex;
  flex-direction: column;
}

/* Selo de status do cabeçalho — em dia (verde) / em aberto (amarelo ou
   vermelho quando há atraso). */
.fin-status-badge {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 750;
}

.fin-status-badge.is-paid { background: rgba(72, 215, 100, 0.16); color: #48d764; }
.fin-status-badge.is-upcoming { background: rgba(242, 180, 65, 0.18); color: #f2b441; }
.fin-status-badge.is-overdue { background: rgba(255, 90, 79, 0.16); color: #ff5a4f; }

/* Chips do resumo — números semânticos sobre a base do .ev-stat. */
.fin-stats {
  margin-top: 0.85rem;
}

.fin-stat.is-paid {
  border-color: rgba(72, 215, 100, 0.28);
  background: rgba(72, 215, 100, 0.07);
}

.fin-stat.is-paid strong { color: #48d764; }
.fin-stat.is-open strong { color: #f2b441; }
.fin-stat.is-overdue strong { color: #ff5a4f; }

/* Lista de mensalidades. */
.fin-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1.05rem;
}

.fin-list-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.1rem;
}

.fin-list-head h4 {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 750;
  color: var(--ink);
}

/* Card da mensalidade — faixa lateral na cor semântica do status. */
.fin-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.7rem 0.8rem 0.7rem 0.95rem;
  border-radius: 0.85rem;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 3px solid rgba(255, 255, 255, 0.18);
}

.fin-card.is-paid { border-left-color: #48d764; }
.fin-card.is-upcoming { border-left-color: #f2b441; }
.fin-card.is-overdue {
  border-left-color: #ff5a4f;
  background: rgba(255, 90, 79, 0.05);
}

.fin-card-main {
  display: flex;
  flex-direction: column;
  gap: 0.16rem;
  min-width: 0;
}

.fin-card-month {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 650;
}

.fin-card-amount {
  color: var(--ink);
  font-size: 1.12rem;
  font-weight: 750;
  line-height: 1;
}

.fin-card-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.3rem;
  min-width: 0;
  text-align: right;
}

.fin-pill {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.fin-pill.is-paid { background: rgba(72, 215, 100, 0.16); color: #48d764; }
.fin-pill.is-upcoming { background: rgba(242, 180, 65, 0.18); color: #f2b441; }
.fin-pill.is-overdue { background: rgba(255, 90, 79, 0.16); color: #ff5a4f; }

.fin-card-detail {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
}

.fin-card-detail svg {
  width: 0.85rem;
  height: 0.85rem;
  flex: none;
  stroke: currentColor;
}

.fin-card.is-paid .fin-card-detail svg { color: #48d764; }
.fin-card.is-upcoming .fin-card-detail svg { color: #f2b441; }
.fin-card.is-overdue .fin-card-detail,
.fin-card.is-overdue .fin-card-detail svg { color: #ff5a4f; }

/* ═══════════════════════════════════════════════════════════════
   CONTRATO — alinhamento premium da aba (lado personal)
   Mantém a lógica e o DOM de renderStudentProfileContract; apenas
   reveste o card do contrato e as linhas de financeiro com os
   mesmos tokens das abas repaginadas (selo do tema, superfícies e
   raios). Carrega depois de styles.css (.pc-contract-*/.pc-fin-*
   originais) e vence por ordem. Estados são SEMÂNTICOS: nunca
   herdam o tema (Pago verde, A vencer amarelo, Atrasado vermelho).
   ═══════════════════════════════════════════════════════════════ */

/* Card do contrato — superfície premium + traço lateral no tema. */
.pc-contract-card {
  gap: 0.85rem;
  padding: 0.95rem;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 3px solid var(--brand);
  background: rgb(from var(--brand-soft) r g b / 0.05);
  box-shadow: 0 0.35rem 0.9rem rgba(0, 0, 0, 0.18);
}

.pc-contract-card.is-expired { border-left-color: var(--danger); }
.pc-contract-card.is-upcoming { border-left-color: var(--brand); }
.pc-contract-card.is-draft { border-left-color: var(--muted); }
.pc-contract-card.is-expired::after { background: rgb(from var(--danger) r g b / 0.08); }

/* Ícone vira o selo de marca das abas premium (gradiente do tema). */
.pc-contract-icon {
  width: clamp(2.9rem, 12vw, 3.4rem);
  height: clamp(2.9rem, 12vw, 3.4rem);
  border-radius: 0.85rem;
  color: var(--brand-ink);
  background: linear-gradient(135deg, var(--brand), var(--brand-strong));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}

.pc-contract-icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

/* Rótulo do contrato no padrão do .ev-hero-label (cor do tema). */
.pc-contract-id small {
  color: var(--brand-strong);
  letter-spacing: 0.05em;
}

/* Chips de valor/vigência — mesma base de superfície dos .ev-stat. */
.pc-contract-field {
  border-radius: 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.035);
}

.pc-contract-field span { color: var(--brand-strong); }

/* Botão de abrir o contrato — gradiente do tema, sem dourado fixo. */
.pc-contract-open {
  border-radius: 0.85rem;
  color: var(--brand-ink);
  background: linear-gradient(135deg, var(--brand), var(--brand-strong));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22), 0 0.5rem 1.1rem -0.6rem rgba(0, 0, 0, 0.6);
}

.pc-contract-open:hover {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3), 0 0.65rem 1.4rem -0.6rem rgba(0, 0, 0, 0.65);
}

/* Seção financeiro do aluno — linhas no padrão premium das abas. */
.pc-fin-row {
  gap: 0.65rem;
  padding: 0.7rem 0.8rem;
  border-radius: 0.85rem;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 3px solid rgba(255, 255, 255, 0.18);
}

/* [56.1] a faixa da linha de cobrança na ficha usa as tintas de estado da lei
   (esta folha carrega DEPOIS de styles.css e vencia a regra de lá). */
.pc-fin-row.is-paid { border-left-color: var(--estado-ok); }
.pc-fin-row.is-awaiting { border-left-color: var(--estado-espera); }
.pc-fin-row.is-pending { border-left-color: var(--estado-espera); }
.pc-fin-row.is-overdue {
  border-left-color: var(--estado-atraso);
  background: rgba(255, 90, 79, 0.05);
}

/* Ícone da mensalidade — tom do tema, sem dourado fixo. */
.pc-fin-icon {
  border-radius: 0.7rem;
  color: var(--brand-strong);
  background: rgb(from var(--brand-soft) r g b / 0.12);
}

/* [F1.4] O botão "Cobrar" dentro da linha saiu: a linha inteira agora abre o
   sheet de ações, onde cobrar convive com registrar pagamento, ver/editar e
   cancelar — uma ação por toque, todas no mesmo lugar. */

/* ═══════════════════════════════════════════════════════════════
   ALUNOS v55 — lista de cards minimalista premium
   Card clicável: avatar (foto ou iniciais) + nome + nome do plano
   + badge de status na cor do tema. Substitui o card antigo
   (.student-card e filhos), que deixa de ser renderizado.
   ═══════════════════════════════════════════════════════════════ */

.student-card-list {
  display: grid !important;
  gap: 0.6rem !important;
}

.aluno-card {
  display: flex;
  /* [A2] O menu "…" mora na PRIMEIRA linha, não no meio vertical do cartão:
     com a terceira linha o cartão cresce, e um botão centrado passaria a
     flutuar ao lado do plano sem pertencer a nada. */
  align-items: flex-start;
  gap: 0.45rem;
  width: 100%;
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--borda);
  border-radius: 16px;
  background: var(--card);
  color: var(--ink);
  transition: border-color 140ms ease, background 140ms ease;
}

.aluno-card:hover {
  border-color: rgba(var(--brand-rgb), 0.45);
}

/* Aluno inativo: card levemente apagado para sinalizar o estado desligado,
   sem alarme — o vermelho fica reservado para a ação destrutiva (Excluir). */
.aluno-card.is-inactive {
  opacity: 0.78;
}

/* [F1.1] Área clicável que abre o perfil — grid de duas linhas: topo (avatar /
   nome+plano / selo de exceção) e, abaixo, o SINAL do aluno com a miniatura de
   frequência à direita. As ações vivem no botão de três pontos
   (.aluno-card-actions-btn), que abre o bottom sheet, fora deste botão. */
.aluno-card-open {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  /* [A2] TRÊS LINHAS, e a terceira ocupa o cartão inteiro.
       1: avatar · nome · selo
       2: plano · miniatura das oito semanas
       3: o sinal, largura inteira — só quando há o que dizer.
     Antes o sinal dividia a segunda linha com a miniatura, numa coluna
     estreita: foi por isso que "Contrato aguardando assinatura" quebrou em
     três linhas assim que deixou de ser cortado. */
  grid-template-areas:
    "avatar nome  status"
    "avatar apoio apoio";
  align-items: center;
  column-gap: 0.85rem;
  row-gap: 0.5rem;
  flex: 1;
  min-width: 0;
  text-align: left;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: transform 120ms ease;
  -webkit-tap-highlight-color: transparent;
}

.aluno-card .entity-avatar {
  grid-area: avatar;
}

/* [A2] A LISTA NUNCA FICA MAIS LARGA QUE A TELA.
   `.student-card-list` é um grid de uma coluna `auto`: uma coluna assim
   cresce até o min-content do item mais largo, e o cartão — com nome, selo
   e miniatura que não quebram — pedia 400px dentro de uma área de 370. O
   `minmax(0, 1fr)` prende a coluna à largura disponível, e o `min-width: 0`
   deixa o que está dentro encolher em vez de empurrar. */
.student-card-list {
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
}

.aluno-card,
.aluno-card-open,
.aluno-card-apoio {
  min-width: 0;
}

.aluno-card-open.tem-sinal {
  grid-template-areas:
    "avatar nome  status"
    "avatar apoio apoio"
    "sinal  sinal sinal";
}

.aluno-card-status {
  grid-area: status;
}

/* A SEGUNDA LINHA: plano e histórico, separados por ponto médio, numa linha
   só. Eram dois blocos em lugares diferentes do cartão. */
.aluno-card-apoio {
  grid-area: apoio;
  display: flex;
  align-items: center;
  gap: 0.34rem;
  min-width: 0;
  color: var(--txt2);
  font-size: 0.8rem;
  line-height: 1.2;
}

.aluno-card-apoio > * + *::before {
  content: "·";
  margin-right: 0.34rem;
  color: var(--txt2);
  opacity: 0.7;
}

/* [F1.1b] O SINAL: um fato por linha, o mais urgente.
   [B8.3] ELE QUEBRA EM DUAS LINHAS EM VEZ DE SER CORTADO.

   A decisão original era o contrário — uma linha só, cortada com reticências,
   para não empurrar o card e desalinhar a lista. O celular mostrou o preço
   disso: "Contrato ag…". Ler três letras da palavra "aguardando" não alinha
   coisa nenhuma; só esconde o único fato que a linha tinha para contar.

   O alinhamento da lista era uma preferência; o fato é informação. Ganha o
   fato. A frase NÃO foi encurtada: encurtar é outra decisão, e ela não foi
   tomada. */
.aluno-card-sinal {
  grid-area: sinal;
  min-width: 0;
  color: var(--txt2);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

/* [A2] Com a largura inteira do cartão ela cabe em UMA linha em 390 — e
   continua sem reticências: se um dia não couber, quebra. */

.aluno-card-sinal.is-atraso {
  color: var(--danger, #ff5a4f);
}

.aluno-card-sinal.is-contrato,
/* [20.1] O acesso do aluno (convite não enviado / senha não criada) é uma
   pendência do mesmo tipo do contrato: coisa a fazer, no mesmo tom. */
.aluno-card-sinal.is-sem-convite,
.aluno-card-sinal.is-sem-senha,
.aluno-card-sinal.is-contrato-professor {
  color: var(--brand, var(--ink));
}

.aluno-card-sinal.is-treinou {
  color: var(--success, #48d764);
}

/* [F1.1d] Miniatura de frequência: 8 semanas, a mais recente à direita. Barra
   apagada = semana sem treino; a altura é relativa ao melhor da série do
   próprio aluno (comparar Ana com Bruno não é a pergunta da linha). */
.aluno-card-freq {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 1.15rem;
  flex: 0 0 auto;
}

.aluno-freq-barra {
  width: 4px;
  height: var(--altura, 6%);
  min-height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.12);
}

.aluno-freq-barra.tem-treino {
  background: rgba(var(--brand-rgb), 0.75);
}

.aluno-card-freq.is-vazia {
  align-items: center;
  color: var(--txt2);
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}

.aluno-card-open:active {
  transform: scale(0.992);
}

.aluno-card-open:focus-visible {
  outline: 2px solid var(--dourado);
  outline-offset: 2px;
}

/* Gatilho de três pontos no canto do card: ícone redondo e sutil que agora
   abre o bottom sheet de ações (.aluno-acoes-sheet), em vez do antigo menu
   <details>. */
.aluno-card-actions-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2rem;
  width: 2rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--txt2);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.aluno-card-actions-btn svg {
  width: 1.2rem;
  height: 1.2rem;
}

.aluno-card-actions-btn:hover {
  border-color: var(--borda);
  background: rgba(var(--brand-rgb), 0.1);
  color: var(--ink);
}

.aluno-card-actions-btn:focus-visible {
  outline: 2px solid var(--dourado);
  outline-offset: 2px;
}

/* ═══════════════════════════════════════════════
   SHEET: AÇÕES DO ALUNO
   Bottom sheet próprio, com o seu CSS só dele (a folha do convite antigo, que
   no cascade virava tela cheia, saiu no [36 A] e levou o `.el-*` junto):
   sobe da base com overlay escurecido, fica ACIMA da barra inferior (z 1090 >
   nav 1000) e usa transição de transform — sem keyframe — para o arraste-para-
   fechar acompanhar o dedo. Sobreposto à tela toda: não empurra a lista nem
   cobre cards parcialmente.
   ═══════════════════════════════════════════════ */
.aluno-acoes-sheet {
  position: fixed;
  inset: 0;
  z-index: 1090;
  display: grid;
  place-items: end center;
}

.aluno-acoes-sheet[hidden] { display: none; }

.aluno-acoes-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 200ms ease;
}

.aluno-acoes-sheet.is-open .aluno-acoes-backdrop { opacity: 1; }
.aluno-acoes-sheet.is-closing .aluno-acoes-backdrop { opacity: 0; transition: opacity 160ms ease; }

.aluno-acoes-panel {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0.65rem;
  width: min(100%, 38rem);
  max-height: 88dvh;
  overflow-y: auto;
  padding: 0.55rem 1.1rem calc(1.25rem + var(--safe-bottom, env(safe-area-inset-bottom, 0px)));
  border-radius: 20px 20px 0 0;
  background: var(--card);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 0;
  box-shadow: 0 -24px 64px rgba(0, 0, 0, 0.6);
  transform: translateY(100%);
  transition: transform 280ms cubic-bezier(0.34, 1.26, 0.64, 1);
  touch-action: none;
  will-change: transform;
  scrollbar-width: none;
}

.aluno-acoes-panel::-webkit-scrollbar { display: none; }

.aluno-acoes-sheet.is-open .aluno-acoes-panel { transform: translateY(0); }
.aluno-acoes-sheet.is-closing .aluno-acoes-panel { transform: translateY(100%); transition: transform 170ms ease; }
.aluno-acoes-sheet.is-dragging .aluno-acoes-panel { transition: none; }

.aluno-acoes-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
}

.aluno-acoes-title {
  margin: 0;
  color: var(--ink);
  font-size: clamp(1rem, 4vw, 1.18rem);
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.aluno-acoes-close {
  width: 2.5rem;
  height: 2.5rem;
  min-height: 2.5rem;
  border: 0;
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
  border-radius: 999px;
  padding: 0;
}

.aluno-acoes-close svg {
  width: 1.1rem;
  height: 1.1rem;
}

.aluno-acoes-list {
  display: grid;
  gap: 0.4rem;
}

/* Cada ação é uma linha de menu de largura total: ícone + rótulo, área de
   toque generosa. Excluir (.is-danger) usa o vermelho reservado às ações
   destrutivas. */
.aluno-acoes-item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  min-height: 3.1rem;
  padding: 0 0.95rem;
  border: 1px solid var(--borda);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 120ms ease, border-color 120ms ease;
}

.aluno-acoes-item svg {
  width: 1.2rem;
  height: 1.2rem;
  flex: 0 0 auto;
  color: var(--txt2);
}

.aluno-acoes-item:hover {
  background: rgba(var(--brand-rgb), 0.1);
  border-color: rgba(var(--brand-rgb), 0.35);
}

.aluno-acoes-item:active {
  transform: scale(0.99);
}

.aluno-acoes-item.is-danger {
  color: var(--vermelho, #e5484d);
}

.aluno-acoes-item.is-danger svg {
  color: var(--vermelho, #e5484d);
}

.aluno-acoes-item.is-danger:hover {
  background: rgba(229, 72, 77, 0.12);
  border-color: rgba(229, 72, 77, 0.4);
}

/* [F1.2] Os itens "Em breve" (Registrar pagamento, Renovar contrato) saíram do
   sheet: não tinham nada por trás. O que sobrou de desabilitado aqui é ação
   REAL bloqueada por uma regra — remover um aluno ainda ativo —, e ela vem
   sempre acompanhada da frase que ensina a saída (.aluno-acoes-nota). */
.aluno-acoes-item[disabled] {
  cursor: default;
  opacity: 0.45;
}

.aluno-acoes-item[disabled]:hover {
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--borda);
}

.aluno-acoes-item[disabled]:active {
  transform: none;
}

.aluno-acoes-nota {
  margin: 0.1rem 0.2rem 0;
  color: var(--txt2);
  font-size: 0.76rem;
  line-height: 1.3;
}

/* Avatar — anel sutil na cor do tema; foto preenche o quadro arredondado */
.aluno-card .entity-avatar {
  width: 52px;
  height: 52px;
  min-width: 52px;
  font-size: 1.05rem;
  font-weight: 700;
  border-radius: 14px;
  border: 1px solid rgba(var(--brand-rgb), 0.28);
  box-shadow: none;
  overflow: hidden;
}

.aluno-card .entity-avatar.is-photo {
  border-color: rgba(255, 255, 255, 0.12);
}

.aluno-card .entity-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* [A2] O NOME mora sozinho na primeira linha, e NÃO É CORTADO: se um nome
   muito longo dividir a linha com o selo mais largo, ele quebra. Cortar
   nome de aluno é o pior corte que esta tela poderia fazer. */
.aluno-card-name {
  grid-area: nome;
  min-width: 0;
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  /* Quebra entre palavras, NUNCA no meio de uma e nunca com reticências:
     com o selo mais largo ("Contrato pendente", 156px) sobram ~98px para o
     nome em 390, e um nome comprido usa a segunda linha em vez de virar
     "Ana Beatriz Figueir…". */
  overflow-wrap: normal;
  word-break: normal;
}

.aluno-card-plan {
  min-width: 0;
  color: var(--txt2);
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}

/* Linha de resumo: Objetivo · Mensalidade · Vencimento. Divisor sutil no topo
   separa do nome/plano; itens com ícone discreto na cor do tema, alinhados e
   quebrando linha sem desalinhar quando o espaço aperta. */
.aluno-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.9rem;
  margin-top: 0.1rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--borda);
  color: var(--txt2);
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.1;
}

.aluno-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  min-width: 0;
}

.aluno-meta-item > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.aluno-meta-item svg {
  flex: 0 0 auto;
  width: 0.92rem;
  height: 0.92rem;
  color: var(--dourado);
  opacity: 0.85;
}

/* Badge de status — pílula com ponto. As cores são SEMÂNTICAS e fixas, nunca
   herdam a cor --brand do tema do professor: o status comunica uma condição do
   aluno (ativo / inativo / atrasado), não a identidade visual do personal.
   Ativo = verde, Inativo = cinza neutro, Atrasado = vermelho/laranja. O fallback
   base é o cinza neutro, para que um badge sem modificador nunca pegue a marca. */
.aluno-card-status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.32rem 0.62rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.3);
  background: rgba(148, 163, 184, 0.12);
  color: #94a3b8;
  font-size: 0.72rem;
  font-weight: 650;
  line-height: 1;
  white-space: nowrap;
}

.aluno-status-dot {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.16);
}

/* Ativo: verde semântico — fundo verde suave, texto e ponto verdes. */
/* [56.1] AS TRÊS TINTAS DE ESTADO DA PÍLULA SÃO AS DA LEI (L6): pago/ativo
   --estado-ok, aguardando --estado-espera, atrasado --estado-atraso. Antes
   eram #22c55e / var(--brand) / #ff5a4f — verde de sistema, a COR DA MARCA
   no lugar da espera, e um vermelho fora da paleta. A guarda [56.1-3] lê a
   cor pintada, não a palavra. */
.aluno-card-status.aluno-status--success {
  border-color: color-mix(in srgb, var(--estado-ok) 34%, transparent);
  background: color-mix(in srgb, var(--estado-ok) 12%, transparent);
  color: var(--estado-ok);
}

.aluno-card-status.aluno-status--success .aluno-status-dot {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--estado-ok) 16%, transparent);
}

.aluno-card-status.aluno-status--danger {
  border-color: color-mix(in srgb, var(--estado-atraso) 32%, transparent);
  background: color-mix(in srgb, var(--estado-atraso) 10%, transparent);
  color: var(--estado-atraso);
}

.aluno-card-status.aluno-status--danger .aluno-status-dot {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--estado-atraso) 16%, transparent);
}

/* Inativo: cinza neutro fixo — estado deliberado/desligado, sem alarme e sem
   herdar a marca. Pílula apagada para o ar de "desligado". */
.aluno-card-status.aluno-status--muted {
  border-color: rgba(148, 163, 184, 0.3);
  background: rgba(148, 163, 184, 0.12);
  color: #94a3b8;
}

.aluno-card-status.aluno-status--muted .aluno-status-dot {
  box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.16);
}

/* BLOCO 7 (item 7) — PÍLULA DE CARREGANDO DO CARD.
   Enquanto uma ação do aluno espera o servidor, esta pílula OCUPA O LUGAR do
   badge de status. Ela não é um quarto estado do aluno: é "ainda não sabemos",
   e por isso é deliberadamente NEUTRA — nem verde nem vermelha, para ninguém
   ler resultado onde ainda não há. Cinza fixo, como o fallback do badge, para
   também não herdar a marca do professor. */
.aluno-card-status.aluno-card-status--pending {
  border-color: rgba(148, 163, 184, 0.3);
  background: rgba(148, 163, 184, 0.12);
  color: #94a3b8;
}

.aluno-status-spinner {
  width: 0.62rem;
  height: 0.62rem;
  border-radius: 999px;
  border: 2px solid rgba(148, 163, 184, 0.32);
  border-top-color: currentColor;
  animation: aluno-status-spin 0.7s linear infinite;
}

@keyframes aluno-status-spin {
  to {
    transform: rotate(360deg);
  }
}

/* O card em espera não vira alvo de mais um gesto: o menu de três pontos já sai
   disabled no HTML e aqui ele também para de parecer clicável. O card em si
   continua abrindo o perfil — ler a ficha durante a espera não muda nada. */
.aluno-card.is-pending .aluno-card-actions-btn {
  opacity: 0.4;
  pointer-events: none;
}

/* Respeita quem pediu menos movimento: sem giro, o anel fica estático e a
   palavra ("Desativando…") continua dizendo o que está acontecendo. */
@media (prefers-reduced-motion: reduce) {
  .aluno-status-spinner {
    animation: none;
  }
}

/* Atrasado (RESERVADO): atraso de mensalidade calculado pelo financeiro no
   futuro. Alerta segue a marca (--dourado/--brand-rgb), como o restante dos
   estados de aviso do app — coerente com qualquer tema. Pronta para quando o
   status for ligado. Hoje nenhum aluno recebe este estado. */
.aluno-card-status.aluno-status--warning {
  border-color: color-mix(in srgb, var(--estado-espera) 34%, transparent);
  background: color-mix(in srgb, var(--estado-espera) 12%, transparent);
  color: var(--estado-espera);
}

.aluno-card-status.aluno-status--warning .aluno-status-dot {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--estado-espera) 16%, transparent);
}

@media (max-width: 26rem) {
  .aluno-card {
    padding: 0.75rem 0.8rem;
  }

  .aluno-card-open {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.7rem;
  }

  /* [A2] 44px — o mesmo alvo de toque de todo o app, e dois pixels a mais
     de largura para o nome na primeira linha. */
  .aluno-card .entity-avatar {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 12px;
  }
}

/* =========================================================================
   [11.1] O TREINO DO ALUNO É UMA LINHA
   -------------------------------------------------------------------------
   Era um cartão com quadrado de letra de 51px, selo, duas linhas de meta,
   até três botões de sessão e TRÊS controles no rodapé — "Editar", um "Ver"
   que abria os exercícios em texto corrido dentro dele, e o menu.

   "Editar" e "Ver" eram o MESMO destino contado de dois jeitos. Agora a
   linha inteira abre o treino, e o menu é o único outro toque.
   ========================================================================= */
.treino-lista-fatos {
  margin: 0 0 0.2rem;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
  white-space: nowrap;
}

.treino-lista {
  display: grid;
  gap: 0;
  min-width: 0;
}

.treino-lista-secao {
  display: grid;
  gap: 0.3rem;
  margin-top: 1rem;
  min-width: 0;
}

.treino-linha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px;
  align-items: start;
  gap: 8px;
  min-width: 0;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--borda);
  background: transparent;
}

.treino-lista > .treino-linha:first-child { border-top: 0; }

.treino-linha-abrir {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  min-width: 0;
  min-height: 76px;
  padding: 12px 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.treino-linha-letra {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: rgba(var(--brand-rgb), 0.14);
  color: var(--brand-strong, var(--brand));
  font-size: var(--t-corpo, 15px);
  font-weight: 700;
}

.treino-linha-texto {
  display: grid;
  gap: 2px;
  min-width: 0;
}

/* AS TRÊS LINHAS, e nenhuma quebra em 390. */
.treino-linha-nome {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
}

/* A LEI DO SELO: o normal é um ponto de 6px; a exceção é a palavra. Um selo
   "Publicado" escrito em toda linha publicada não informa nada. */
.treino-linha-ponto {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--success, #10b981);
}

.treino-linha-rascunho {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
}

/* [13.4] Nome comprido não empurra o marcador para fora: quem cede é o nome,
   e o ponto (ou "RASCUNHO") fica sempre visível. O nome do treino é texto
   livre, escrito pelo professor — não há como encurtá-lo por redação. */
.treino-linha-titulo {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* [41.24] A LINHA QUEBRA EM VEZ DE VAZAR.
   Era `white-space: nowrap` nas duas, e com o [41.6] a linha de baixo passou a
   ter mais um fato ("levou menos de 1 min"). Em 390pt ela saiu pela direita da
   tela: "feito 1 vez · último em 14/09/2026 · levou menos d". Texto cortado
   pela borda da tela não é decisão de desenho, é acidente — e a informação é
   toda necessária, então quem cede é a altura. */
.treino-linha-fatos {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.25;
  white-space: normal;
  overflow-wrap: anywhere;
}

.treino-linha-historia {
  color: var(--dim, #6B665D);
  font-size: 12px;
  line-height: 1.3;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* O menu é o ícone de 24px com alvo de toque de 44, alinhado ao topo. */
.treino-linha-menu {
  position: relative;
  align-self: start;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-top: 12px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.treino-linha-menu::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: var(--alvo, 44px);
  height: var(--alvo, 44px);
  transform: translate(-50%, -50%);
}

.treino-linha-menu svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

/* =========================================================================
   [11.2] AS OPÇÕES DO TREINO — linhas de lista, não botões âmbar
   ========================================================================= */
/* Remover não é âmbar nem vermelho: o ícone apaga, e a pergunta é que
   carrega o peso. Não existe vermelho na nossa paleta. */
/* [41.3] O estado da cobrança na ficha: bolinha + palavra, sem chip de fundo
   saturado. A tinta é a do mapa de estado e não segue o tema do professor. */
.fin-estado {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 650;
}

/* ═══════════════════════════════════════════════════════════════
   [41.10] A LINHA DA ATUALIZAÇÃO — a foto entra, a abreviação sai.

   Era texto puro numa aba cujo conteúdo é imagem, com colunas de largura
   fixa brigando por 318px: "Atualização" virava "Atua…" e "14/09/2026"
   virava "14/0…". O que acaba com a abreviação é a data ficar AO LADO da
   etiqueta, na mesma linha, e não disputando a coluna do resto.
   ═══════════════════════════════════════════════════════════════ */

.atzficha-fato {
  margin: 0.1rem 0 0.8rem;
  color: var(--muted);
  font-size: 0.78rem;
}

.atzficha-fato .atzficha-esperando {
  color: var(--estado-espera, #F59E0B);
  font-weight: 700;
}

.atzficha-lista {
  display: flex;
  flex-direction: column;
}

.atzficha-linha {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  padding: 0.7rem 0;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.atzficha-linha:last-child {
  border-bottom: 0;
}

/* A miniatura: 56 x 72, canto 10px, recorte que preenche. */
.atzficha-mini {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 72px;
  overflow: hidden;
  border-radius: 10px;
  background: #131313;
}

.atzficha-mini img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Sem foto: um ícone apagado, não um buraco nem um quadrado preto — e o
   alinhamento das outras linhas não quebra. */
.atzficha-mini.is-vazia svg {
  width: 22px;
  height: 22px;
  stroke: #3A3733;
  fill: none;
}

.atzficha-mini-selo {
  position: absolute;
  right: 4px;
  bottom: 4px;
  padding: 1px 5px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.62);
  color: #F7F4EB;
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
}

.atzficha-corpo {
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
  min-width: 0;
}

.atzficha-topo {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}

/* [41.3] A etiqueta do TIPO. Atualização é #82A6E0 — estava saindo rosa — e
   a cor de tipo não segue o tema do professor. */
.atzficha-etiqueta {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 0.5rem;
  border-radius: 6px;
  background: rgba(130, 166, 224, 0.16);
  color: #82A6E0;
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 700;
}

.atzficha-data {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.atzficha-peso {
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
}

.atzficha-estado {
  display: inline-flex;
  align-items: center;
  color: var(--muted);
  font-size: 0.76rem;
}

/* A ÚNICA LINHA COLORIDA DA LISTA. Se tudo brilha, nada chama. */
.atzficha-linha.is-esperando .atzficha-estado {
  color: var(--estado-espera, #F59E0B);
  font-weight: 650;
}

.atzficha-seta {
  display: inline-grid;
  place-items: center;
  color: var(--muted);
}

.atzficha-seta svg {
  width: 16px;
  height: 16px;
}

/* [41.24] Cabeçalho que só tem a ação: sem o título, o `.section-title` (que é
   um grid de duas colunas) deixaria uma coluna vazia à esquerda e jogaria o
   botão para o meio. Aqui ele encosta à direita, como encostava antes. */
.section-title--so-acao {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.7rem;
}

/* ═══════════════════════════════════════════════════════════════
   [41.21] A ABA EVOLUÇÃO — DUAS PASTILHAS E UM GRÁFICO SÓ.

   O que saiu: o invólucro `.ev-panel` como CARTÃO (era cartão dentro de
   cartão dentro de cartão, três níveis de borda), a fileira `.ev-stats` de
   quatro contadores, e o cabeçalho `.ev-hero` que repetia o peso que a
   pastilha já diz. "70 kg" aparecia três vezes na mesma rolagem.
   ═══════════════════════════════════════════════════════════════ */

/* O painel deixa de ser cartão: é só a pilha da sub-aba. */
.ev-panel {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 0;
  border: 0;
  background: transparent;
}

/* A linha de fato, no lugar dos quatro contadores. */
.ev-fato {
  margin: 0.1rem 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.3;
}

.ev-pastilhas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 0.55rem;
}

.ev-pastilha {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.28rem;
  padding: 0.7rem 0.75rem;
  border: 1px solid var(--borda);
  border-radius: 0.85rem;
  background: var(--card);
  text-align: left;
  cursor: pointer;
}

/* A escolhida ganha o anel na cor da marca — aqui o tema pinta AÇÃO, que é
   exatamente o que ele deve pintar pelo [41.3]. */
.ev-pastilha.is-escolhida {
  border-color: transparent;
  box-shadow: inset 0 0 0 2px var(--brand-strong);
}

.ev-pastilha-rotulo {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.ev-pastilha-valor {
  color: var(--ink);
  font-size: 1.32rem;
  font-weight: 800;
  line-height: 1.05;
}

.ev-pastilha-valor small {
  margin-left: 2px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 650;
}

.ev-spark {
  width: 130px;
  height: 28px;
  max-width: 100%;
}

.ev-spark polyline {
  fill: none;
  stroke: var(--estado-neutro, #9C978C);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* O painel do gráfico: 130px, e ele SÓ EXISTE com dois pontos ou mais. */
.ev-grafico {
  padding: 0.6rem 0.2rem 0.4rem;
  border: 1px solid var(--borda);
  border-radius: 0.85rem;
  background: var(--card);
}

.ev-grafico svg {
  display: block;
  width: 100%;
  height: 130px;
}

.ev-area {
  fill: rgb(from var(--brand-soft) r g b / 0.14);
  stroke: none;
}

.ev-linha {
  fill: none;
  stroke: var(--brand-strong);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ev-ponto {
  fill: var(--brand-strong);
}

.ev-grafico-rotulos {
  display: flex;
  justify-content: space-between;
  padding: 0 0.6rem;
  color: var(--muted);
  font-size: 0.68rem;
}

/* ═══════════════════════════════════════════════════════════════
   [41.21 G] A LINHA DA EXECUÇÃO PRECISA PARECER PORTA.

   O [41.0-I] provou que esta sub-aba é o ÚNICO caminho para o detalhe da
   sessão. Ela era um cartão com um "ver série a série →" em letra pequena
   no rodapé; agora a LINHA INTEIRA é o toque, com seta à direita.
   ═══════════════════════════════════════════════════════════════ */

.exec-lista {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.exec-linha {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  min-height: 72px;
  padding: 0.6rem 0;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.exec-item:last-child .exec-linha {
  border-bottom: 0;
}

.exec-dia {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 0.6rem;
  background: rgba(255, 255, 255, 0.045);
}

.exec-dia strong {
  color: var(--ink);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
}

.exec-dia small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.2;
}

.exec-corpo {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.exec-nome {
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 650;
  overflow-wrap: anywhere;
}

.exec-fatos {
  color: var(--muted);
  font-size: 0.78rem;
}

/* A ÚNICA COR DA LISTA. Se tudo brilha, nada chama — e sem ela o professor
   abre seis execuções para achar a que importa. */
.exec-fora {
  color: var(--estado-espera, #F59E0B);
  font-size: 0.76rem;
  font-weight: 650;
}

.exec-seta {
  display: inline-grid;
  place-items: center;
  color: var(--muted);
}

.exec-seta svg {
  width: 16px;
  height: 16px;
}

/* [41.22] O quarto estado da legenda: "hoje" é o anel claro, e agora ele tem
   nome. Quatro marcadores com três explicações era uma adivinhação. */
.freq-legenda-ponto.is-hoje {
  box-shadow: 0 0 0 1.5px #6B665D;
}