:root {
  --brand: #F59E0B;
  --brand-strong: #E7A83E;
  --brand-soft: rgba(245,181,27,0.1);
  --ink: #1A1206;
  --muted: #66736f;
  --line: #d9e1dd;
  --surface: #ffffff;
  --canvas: #f6f7f2;
  --accent: #e7a83e;
  --accent-soft: #fff2d6;
  --danger: #c44949;
  --danger-soft: #fde9e9;
  --success: #2d9d78;
  --success-soft: #ddf4ec;
  --info: #2e6d9e;
  --info-soft: #e2f0fa;
  --shadow: 0 18px 48px rgba(12, 47, 41, 0.14);
  --radius: 8px;
  /* [27.2] O RESPIRO DO APP MORA AQUI, e só aqui. A área segura do aparelho
     (recorte em cima, faixa do gesto embaixo) MAIS uma folga — a mesma em
     cima e embaixo, é isso que "distribuído" quer dizer. Quem precisa lê:
     o cabeçalho (--recuo-topo), a barra de baixo (--respiro acima dos
     ícones, --recuo-rodape abaixo) e o conteúdo que termina atrás dela.
     No tablet a área segura é zero e só a folga fica. Nenhuma tela resolve
     o próprio recuo. */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --respiro: 12px;
  --recuo-topo: calc(var(--safe-top) + var(--respiro));
  --recuo-rodape: calc(var(--safe-bottom) + var(--respiro));
}

* {
  box-sizing: border-box;
}

/* RODADA 2R9 (R2) — `clip` NO LUGAR DE `hidden` (a CAMADA QUE VENCE: este
   arquivo carrega depois do styles.css, entao e esta regra que valia no
   aparelho). `overflow-x: hidden` propaga e forca overflow-y a `auto`,
   transformando o html em caixa de rolagem — e o toque de 1 dedo nao era
   roteado para ela naquele Chrome/Android. `clip` contem o vazamento lateral
   igual, sem criar caixa e sem mexer no eixo Y. Ver o bloco equivalente em
   styles.css para a medicao completa. */
html {
  min-height: 100%;
  overflow-x: clip;
  background: var(--canvas);
}

body {
  min-height: 100vh;
  margin: 0;
  overflow-x: clip;
  color: var(--ink);
  background:
    linear-gradient(180deg, rgba(var(--brand-rgb), 0.09), rgba(246, 247, 242, 0) 30rem),
    var(--canvas);
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

img,
svg {
  display: block;
}

h1,
h2,
h3,
p {
  margin: 0;
}

h1 {
  font-size: clamp(28px, 8vw, 40px);
  line-height: 1.1;
}

.startup-splash {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 1rem;
  background: #F59E0B;
  background: var(--brand);
  color: var(--brand-ink);
  transition: opacity 260ms ease, visibility 260ms ease;
}

.startup-splash img {
  width: min(42vw, 8.5rem);
  height: min(42vw, 8.5rem);
  border-radius: 24%;
  object-fit: contain;
  background: #fff;
  padding: 0.75rem;
  box-shadow: 0 20px 42px rgba(0, 0, 0, 0.22);
  animation: splash-logo-pulse 2s ease-in-out infinite;
}

.startup-splash strong {
  font-size: 1rem;
  font-weight: 800;
}

body.app-ready .startup-splash {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@keyframes splash-logo-pulse {
  0%, 100% { transform: scale(1);    opacity: 0.88; }
  50%       { transform: scale(1.06); opacity: 1;    }
}

/* ═══════════════════ SKELETON SCREENS ════════════════════════
   Shimmer placeholders para listas enquanto o conteúdo carrega.
   ════════════════════════════════════════════════════════════ */
@keyframes shimmer {
  from { background-position: -200% center; }
  to   { background-position:  200% center; }
}

.skeleton {
  border-radius: var(--radius);
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.05) 25%,
    rgba(255, 255, 255, 0.13) 50%,
    rgba(255, 255, 255, 0.05) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.6s ease-in-out infinite;
}

.skeleton-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.25rem 1rem;
}

.skeleton-card     { height: 4.5rem; }
.skeleton-card--tall { height: 7rem; }
.skeleton-metric   { height: 5.5rem; }

.skeleton-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.skeleton-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
}

.view {
  min-height: 100vh;
}

.view[hidden],
[hidden] {
  display: none !important;
}

.login-view {
  display: grid;
  min-height: 100vh;
  padding: max(1.25rem, env(safe-area-inset-top, 0px)) 1rem max(1.25rem, var(--safe-bottom));
  place-items: center;
}

.login-card {
  display: grid;
  gap: 1rem;
  width: min(100%, 29rem);
  padding: 1rem;
  border: 1px solid rgba(217, 225, 221, 0.88);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow);
}

.login-install-row,
.workspace-header,
.header-actions,
.brand-inline,
.modal-head,
.section-title,
.toolbar,
.entity-row,
.agenda-item,
.workout-row,
.quick-row {
  display: flex;
  align-items: center;
}

.login-install-row,
.workspace-header,
.modal-head,
.section-title,
.toolbar {
  justify-content: space-between;
}

.login-install-row {
  gap: 0.75rem;
  color: var(--muted);
  font-size: 0.84rem;
}

.brand-block {
  display: grid;
  justify-items: center;
  gap: 0.45rem;
  padding: 0.75rem 0 0.25rem;
  text-align: center;
}

.brand-logo {
  width: 2.85rem;
  height: 2.85rem;
  border-radius: 22%;
  object-fit: contain;
  background: #fff;
}

/* Login: somente o simbolo (logo.png), nunca a wordmark Corefy.png. Tile de
   icone de app pequeno e intencional em navy #021837, cantos ~22%. O PNG ja
   tem fundo navy, entao o recorte arredondado entrega um tile limpo, sem
   quadrado claro destacado. */
.brand-logo-large {
  width: 6rem;
  height: 6rem;
  border: 0;
  padding: 0;
  box-shadow: none;
  border-radius: 22%;
  object-fit: cover;
  background: #021837;
  overflow: hidden;
}

.brand-block p {
  color: var(--brand);
  font-size: 0.79rem;
  font-weight: 800;
  text-transform: uppercase;
}

.brand-block h1 {
  font-size: clamp(1.75rem, 8vw, 2.45rem);
  line-height: 1.05;
}

.demo-credentials {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.75rem;
  border: 1px solid rgb(from var(--brand-strong) r g b / 0.42);
  border-radius: var(--radius);
  background: var(--accent-soft);
}

body.demo-mode .demo-credentials {
  display: flex;
}

.demo-only {
  display: none;
}

body.demo-mode .demo-only {
  display: grid;
}

.demo-credentials span,
.demo-credentials small {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.25;
}

.demo-credentials strong {
  display: block;
  margin: 0.12rem 0;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 0.9rem;
}

.login-form,
.form-grid,
.content-stack,
.card-grid,
.entity-list,
.agenda-list,
.workout-list,
.metric-grid,
.timeline,
.empty-state,
.profile-grid {
  display: grid;
}

.login-form {
  gap: 0.85rem;
}

.remember-control {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 2.75rem;
  padding: 0.68rem 0.78rem;
  border: 1px solid rgb(from var(--brand-strong) r g b / 0.22);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink);
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.remember-control:focus-within,
.remember-control:hover {
  border-color: rgb(from var(--brand-strong) r g b / 0.55);
  background: rgb(from var(--brand-strong) r g b / 0.08);
  box-shadow: none;
}

.remember-control input {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  accent-color: var(--brand);
}

.remember-control span {
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 750;
  line-height: 1.2;
}

.field {
  display: grid;
  gap: 0.45rem;
}

.field span {
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 750;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 3.2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
  padding: 0 0.9rem;
  outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.field textarea {
  min-height: 6rem;
  padding: 0.85rem 0.9rem;
  resize: vertical;
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  border-color: var(--brand);
  /* Halo de foco segue o tema do professor (--brand). Antes era um teal fixo
     (rgba(11,107,87,…)) que não acompanhava a marca — destoava no perfil do
     professor e na folha de contrato, que reusam .field fora de .new-student-screen. */
  box-shadow: 0 0 0 4px rgba(var(--brand-rgb), 0.13);
}

/* Selects do app (Objetivo, Plano e os demais) com o mesmo acabamento dos outros
   campos: borda/fundo/altura/padding já vêm de `.field input, .field select…`.
   Aqui só escondemos a seta nativa e desenhamos um chevron temado (--brand) via
   mask — mesmo desenho usado no select de contrato (.cfs-service-field), para não
   destoar do acabamento premium e seguir a marca do professor em qualquer tema. */
.field select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 2.6rem;
}

/* O chevron é um ::after da própria .field (que envolve o <select>), ancorado à
   base — onde o select fica como último item do grid (centro vertical ≈ 1.6rem
   da base, com min-height 3.2rem).
   [16.1] SETINHA DE CAMPO NÃO É AÇÃO. Ela saía na cor de destaque — a cor que
   este app reserva para o que se toca — e aqui é só o sinal de que o campo
   abre uma lista. Apagada, como a do [14B.3 E], agora no app inteiro. */
.field:has(> select) {
  position: relative;
}

.field:has(> select)::after {
  content: "";
  position: absolute;
  right: 0.95rem;
  bottom: 1.05rem;
  width: 1.1rem;
  height: 1.1rem;
  pointer-events: none;
  background: var(--dim);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / contain no-repeat;
}

.fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

.checkbox-grid,
.muscle-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.check-chip,
.inline-check {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--ink);
  font-size: 0.84rem;
  font-weight: 750;
}

.check-chip {
  min-height: 2.75rem;
  padding: 0 0.72rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
}

.check-chip input,
.inline-check input {
  width: auto;
  height: auto;
  min-height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  box-shadow: none;
}

.media-note {
  display: grid;
  gap: 0.45rem;
  padding: 0.8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #f8faf8;
}

.primary-action,
.secondary-action,
.danger-action,
.ghost-button,
.pill-button,
.icon-button,
.mini-button,
.nav-button,
.demo-credentials button {
  border-radius: var(--radius);
  font-weight: 800;
  text-decoration: none;
}

.primary-action,
.secondary-action,
.danger-action {
  width: 100%;
  min-height: 3.2rem;
}

.primary-action {
  border: 0;
  background: var(--brand);
  color: var(--brand-ink);
  box-shadow: 0 12px 24px rgba(var(--brand-rgb), 0.22);
}

.secondary-action {
  border: 1px solid rgba(var(--brand-rgb), 0.28);
  background: #fff;
  color: var(--brand-strong);
}

.danger-action {
  border: 1px solid rgb(from var(--danger) r g b / 0.28);
  background: var(--danger-soft);
  color: var(--danger);
}

.text-action {
  min-height: 2.75rem;
  border: 0;
  background: transparent;
  color: var(--brand);
  font-weight: 750;
}

.pill-button {
  min-height: 2.75rem;
  padding: 0 0.85rem;
  border: 1px solid rgba(var(--brand-rgb), 0.22);
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand-strong);
  font-size: 0.88rem;
  white-space: nowrap;
}

.ghost-button,
.mini-button,
.demo-credentials button {
  min-height: 2.75rem;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--brand);
}

.ghost-button {
  padding: 0 0.85rem;
}

.mini-button {
  min-height: 2.75rem;
  padding: 0 0.65rem;
  font-size: 0.82rem;
}

.mini-button.is-danger {
  border-color: rgba(196, 73, 73, 0.26);
  color: var(--danger);
}

.whatsapp-button {
  border-color: rgba(45, 157, 120, 0.3);
  background: var(--success-soft);
  color: var(--success);
}

.icon-button {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--brand);
}

svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.workspace {
  min-height: 100vh;
  overflow-x: hidden;
  padding-bottom: calc(5.8rem + var(--safe-bottom));
}

.workspace-header {
  position: sticky;
  top: 0;
  z-index: 20;
  gap: 0.8rem;
  padding: max(0.9rem, env(safe-area-inset-top, 0px)) clamp(12px, 4vw, 20px) 0.9rem;
  border-bottom: 1px solid rgba(217, 225, 221, 0.78);
  background: rgba(246, 247, 242, 0.94);
}

.brand-inline {
  min-width: 0;
  gap: 0.75rem;
}

.brand-inline div {
  min-width: 0;
}

.brand-inline span {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 750;
}

.brand-inline h2 {
  overflow: hidden;
  font-size: 1.28rem;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.header-actions {
  flex: 0 0 auto;
  gap: 0.45rem;
}

.workspace-layout {
  width: min(100%, 76rem);
  margin: 0 auto;
  padding: 1rem var(--goteira, 20px);
}

.side-nav {
  display: none;
}

.content-area {
  min-width: 0;
}

.content-stack {
  gap: 1rem;
}

.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.9);
}

.page-head h3 {
  margin-top: 0.2rem;
  font-size: clamp(1.25rem, 4vw, 1.85rem);
  line-height: 1.1;
}

.page-head p {
  margin-top: 0.35rem;
  color: var(--muted);
  line-height: 1.45;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: 1.55rem;
  color: var(--brand);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  flex: 0 0 auto;
}

.page-actions .primary-action,
.page-actions .secondary-action,
.page-actions .pill-button {
  width: auto;
}

.hero-panel {
  display: grid;
  gap: 1rem;
  padding: 1.15rem;
  border-radius: var(--radius);
  background: var(--brand-strong);
  /* Contraste: fundo dourado exige texto escuro, nunca branco. */
  color: var(--brand-ink);
  box-shadow: var(--shadow);
}

.hero-panel p {
  color: rgb(from var(--brand-ink) r g b / 0.72);
  font-size: 0.84rem;
  font-weight: 800;
}

.hero-panel h3 {
  margin-top: 0.2rem;
  color: var(--brand-ink);
  font-size: clamp(1.35rem, 7vw, 2rem);
  line-height: 1.08;
}

.hero-panel span {
  display: block;
  margin-top: 0.45rem;
  color: rgb(from var(--brand-ink) r g b / 0.78);
  line-height: 1.45;
}

/* Badge interno do hero-panel: escuro sobre o dourado (todas as variantes). */
.hero-panel .badge,
.hero-panel .badge.is-success,
.hero-panel .badge.is-danger,
.hero-panel .badge.is-info,
.hero-panel .badge.is-warning,
.hero-panel .badge.is-muted {
  border-color: rgb(from var(--brand-ink) r g b / 0.24);
  background: rgb(from var(--brand-ink) r g b / 0.12);
  color: var(--brand-ink);
}

/* ── Gate de primeiro acesso: hero escuro com acento dourado ── */
.contract-gate .hero-panel {
  background: #1A1A1A;
  color: #f0ece0;
  border-left: 3px solid var(--brand-strong);
}
.contract-gate .hero-panel p {
  color: rgba(240, 236, 224, 0.5);
}
.contract-gate .hero-panel h3 {
  color: #f0ece0;
}
.contract-gate .hero-panel span {
  color: #9CA3AF;
}
.contract-gate .hero-panel .badge,
.contract-gate .hero-panel .badge.is-success,
.contract-gate .hero-panel .badge.is-danger,
.contract-gate .hero-panel .badge.is-info,
.contract-gate .hero-panel .badge.is-warning,
.contract-gate .hero-panel .badge.is-muted {
  border-color: rgb(from var(--brand) r g b / 0.3);
  background: rgb(from var(--brand) r g b / 0.08);
  color: var(--brand-strong);
}

.metric-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}

.metric-card,
.panel,
.entity-row,
.agenda-item,
.workout-row,
.calendar-board,
.empty-state,
.profile-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.metric-card {
  min-height: 5.4rem;
  padding: 0.85rem;
}

.metric-card span,
.muted,
.small-text {
  color: var(--muted);
}

.metric-card span {
  display: block;
  font-size: 0.82rem;
  line-height: 1.25;
}

.metric-card strong {
  display: block;
  margin-top: 0.45rem;
  font-size: clamp(1.2rem, 6vw, 1.8rem);
  line-height: 1;
}

.panel {
  display: grid;
  gap: 0.85rem;
  padding: 0.9rem;
}

.section-title {
  gap: 0.75rem;
}

.section-title h3 {
  font-size: 1.04rem;
}

.section-actions,
.row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.toolbar {
  flex-wrap: wrap;
  gap: 0.7rem;
  padding: 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.78);
}

.toolbar-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.toolbar input,
.toolbar select {
  min-height: 2.4rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  padding: 0 0.65rem;
}

.workout-main {
  display: grid;
  gap: 0.3rem;
}

.dashboard-grid {
  display: grid;
  gap: 1rem;
}

.mini-button:hover,
.ghost-button:hover,
.secondary-action:hover {
  border-color: rgba(var(--brand-rgb), 0.38);
}

.segmented {
  display: inline-grid;
  grid-auto-flow: column;
  gap: 0.25rem;
  padding: 0.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #eef3f0;
}

.segmented button {
  min-height: 2.75rem;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-weight: 800;
  padding: 0 0.65rem;
}

.segmented button.is-active {
  background: #fff;
  color: var(--brand-strong);
  box-shadow: 0 8px 18px rgba(12, 47, 41, 0.1);
}

.entity-list,
.agenda-list,
.workout-list,
.timeline,
.profile-grid {
  gap: 0.65rem;
}

.entity-row,
.agenda-item,
.workout-row,
.quick-row {
  justify-content: space-between;
  gap: 0.85rem;
  padding: 0.85rem;
}

.entity-main,
.agenda-main,
.workout-main,
.quick-main {
  min-width: 0;
}

.entity-main strong,
.agenda-main strong,
.workout-main strong,
.quick-main strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.entity-main span,
.agenda-main span,
.workout-main span,
.quick-main span {
  display: block;
  margin-top: 0.18rem;
  font-size: 0.84rem;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.small-text {
  display: block;
  margin-top: 0.18rem;
  font-size: 0.84rem;
  line-height: 1.35;
}

.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.45rem;
}

.badge {
  display: inline-flex;
  align-items: center;
  min-height: 1.8rem;
  padding: 0 0.55rem;
  border-radius: 999px;
  background: #eef3f0;
  color: var(--brand-strong);
  font-size: 0.76rem;
  font-weight: 800;
  white-space: nowrap;
  flex-shrink: 0;
}

.badge.is-success {
  background: var(--success-soft);
  color: var(--success);
}

.badge.is-danger {
  background: var(--danger-soft);
  color: var(--danger);
}

.badge.is-info {
  background: var(--info-soft);
  color: var(--info);
}

.badge.is-warning {
  background: #fff4d8;
  color: #8a5a00;
}

.preview-box {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}

.preview-box {
  display: grid;
  gap: 0.35rem;
  padding: 0.85rem;
}

.preview-box span {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

.exercise-video {
  width: 100%;
  max-height: 70vh;
  border-radius: var(--radius);
  background: #000;
}

.agenda-item {
  align-items: stretch;
  border-left: 0.35rem solid var(--brand);
}

.agenda-time {
  flex: 0 0 4.8rem;
  color: var(--brand-strong);
  font-weight: 900;
}

.agenda-item.is-status-done,
.agenda-item.is-status-sent,
.day-event.is-status-done,
.day-event.is-status-sent {
  border-left-color: var(--success);
  background: linear-gradient(90deg, rgba(45, 157, 120, 0.08), #fff);
}

.agenda-item.is-status-pending,
.agenda-item.is-status-contract_pending,
.day-event.is-status-pending,
.day-event.is-status-contract_pending {
  border-left-color: #d99000;
  background: linear-gradient(90deg, rgba(217, 144, 0, 0.1), #fff);
}

.agenda-item.is-status-canceled,
.agenda-item.is-status-missed,
.day-event.is-status-canceled,
.day-event.is-status-missed {
  border-left-color: var(--danger);
  background: linear-gradient(90deg, rgba(191, 75, 75, 0.09), #fff);
}

.calendar-board {
  overflow: hidden;
}

.calendar-head,
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.calendar-head span {
  padding: 0.65rem 0.45rem;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  text-align: center;
}

.day-cell {
  display: grid;
  align-content: start;
  gap: 0.45rem;
  min-height: 9rem;
  padding: 0.55rem;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.month-view .day-cell {
  min-height: 7.5rem;
}

.day-cell.is-outside {
  background: #f8faf8;
  color: var(--muted);
}

.day-cell:nth-child(7n) {
  border-right: 0;
}

.day-cell.is-selected {
  background: var(--brand-soft);
}

.day-select {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  width: fit-content;
  min-height: 2.75rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 850;
  padding: 0;
}

.day-number {
  display: inline-grid;
  width: 1.8rem;
  height: 1.8rem;
  place-items: center;
  border-radius: 999px;
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 850;
}

.day-cell.is-today .day-number {
  background: var(--brand);
  color: var(--brand-ink);
}

.day-events {
  display: grid;
  gap: 0.3rem;
}

.day-event {
  display: block;
  overflow: hidden;
  width: 100%;
  min-height: 1.85rem;
  border: 1px solid rgba(var(--brand-rgb), 0.16);
  border-left: 0.25rem solid var(--brand);
  border-radius: 6px;
  background: rgba(var(--brand-rgb), 0.07);
  color: var(--brand-strong);
  padding: 0.35rem 0.4rem;
  text-align: left;
  font-size: 0.72rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.day-event span {
  margin-right: 0.28rem;
  opacity: 0.76;
}

.day-event.is-more {
  border-left-color: transparent;
  background: #f6f8f6;
  color: var(--muted);
}

.agenda-day-title {
  margin-top: 0.35rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--line);
}

.agenda-detail-panel {
  border-left: 0.35rem solid var(--brand);
}

.empty-state {
  justify-items: start;
  gap: 0.45rem;
  padding: 1rem;
  color: var(--muted);
}

.empty-state strong {
  color: var(--ink);
}

.compact-note {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #f8faf8;
}

.student-summary-grid,
.profile-overview-grid {
  display: grid;
  gap: 0.75rem;
}

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

.profile-card {
  display: grid;
  gap: 0.35rem;
  padding: 0.9rem;
}

.profile-card span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.profile-card strong {
  overflow-wrap: anywhere;
}

.profile-card small {
  color: var(--muted);
  line-height: 1.35;
}

.student-summary-card {
  min-height: 5.4rem;
}

.compact-row {
  align-items: center;
  min-height: 4.8rem;
}

.library-row .video-link,
.library-row [data-open-local-video] {
  margin-top: 0.45rem;
}

.library-row {
  align-items: flex-start;
}

.library-row .entity-main {
  display: grid;
  gap: 0.35rem;
}

.subtle-chip,
.entity-main .subtle-chip {
  display: inline-flex;
  align-items: center;
  min-height: 1.85rem;
  padding: 0 0.58rem;
  border-radius: 999px;
  background: #f4f7f5;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
}

.video-meta,
.entity-main .video-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}

.video-meta .small-text {
  margin-top: 0;
}

.profile-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid rgba(var(--brand-rgb), 0.22);
  border-radius: var(--radius);
  background: linear-gradient(180deg, #fff, var(--brand-soft));
}

.student-profile-hero {
  display: grid;
}

.student-hero-main {
  min-width: 0;
}

.student-hero-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
  min-width: 0;
}

.student-hero-details article {
  display: grid;
  gap: 0.18rem;
  min-width: 0;
  padding: 0.65rem;
  border: 1px solid rgba(var(--brand-rgb), 0.16);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.78);
}

.student-hero-details span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 850;
}

.student-hero-details strong {
  overflow-wrap: anywhere;
  font-size: 0.88rem;
}

.profile-hero h3 {
  margin-top: 0.2rem;
  font-size: clamp(1.25rem, 5vw, 1.8rem);
  line-height: 1.1;
}

.profile-hero p,
.profile-hero-aside span {
  color: var(--muted);
  line-height: 1.4;
}

.tab-row {
  display: flex;
  gap: 0.4rem;
  overflow-x: auto;
  padding: 0.35rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #eef3f0;
}

.tab-row button {
  flex: 0 0 auto;
  min-height: 2.75rem;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-weight: 850;
  padding: 0 0.7rem;
}

.tab-row button.is-active {
  background: #fff;
  color: var(--brand-strong);
  box-shadow: 0 8px 18px rgba(12, 47, 41, 0.1);
}

.action-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.inline-action {
  justify-content: flex-start;
  padding: 0;
  border: 0;
  background: transparent;
}

.exercise-list {
  display: grid;
  gap: 0.55rem;
  margin-top: 0.65rem;
}

.exercise-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.65rem;
  align-items: start;
  padding: 0.65rem;
  border-radius: var(--radius);
  background: #f4f7f5;
}

.exercise-item.has-check {
  grid-template-columns: auto 1fr;
}

.exercise-item input {
  width: 1.05rem;
  height: 1.05rem;
  margin-top: 0.15rem;
  accent-color: var(--brand);
}

.progress-bars {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: end;
  gap: 0.55rem;
  height: 9rem;
  padding: 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(217, 225, 221, 0.38) 1px, transparent 1px) 0 0 / 100% 25%,
    #fff;
}

.progress-bars span {
  min-height: 1rem;
  border-radius: 999px 999px 4px 4px;
  background: linear-gradient(180deg, var(--accent), var(--brand));
}

.bottom-nav {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 25;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(4.9rem, 1fr);
  overflow-x: auto;
  gap: 0.25rem;
  padding: 0.55rem 0.55rem calc(0.55rem + var(--safe-bottom));
  border-top: 1px solid rgba(217, 225, 221, 0.8);
  background: rgba(255, 255, 255, 0.95);
}

.nav-button {
  display: grid;
  min-width: 0;
  min-height: 3.15rem;
  place-items: center;
  gap: 0.18rem;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 0.72rem;
}

.nav-button svg {
  width: 1.05rem;
  height: 1.05rem;
}

.nav-button.is-active {
  background: var(--brand-soft);
  color: var(--brand-strong);
}

.side-nav .nav-button {
  grid-template-columns: auto 1fr;
  justify-items: start;
  min-height: 2.9rem;
  padding: 0 0.75rem;
  text-align: left;
}

.nav-group {
  margin: 0.55rem 0.65rem 0.2rem;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.side-nav .nav-group:first-child {
  margin-top: 0.15rem;
}

.form-grid {
  gap: 0.85rem;
}

.form-grid.two {
  grid-template-columns: 1fr;
}

.library-grid {
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 0.75rem;
}

.library-card {
  display: grid;
  gap: 0.65rem;
  padding: 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.library-card strong,
.library-card span {
  overflow-wrap: anywhere;
}

.library-card p {
  color: var(--muted);
  line-height: 1.45;
}

.video-link {
  color: var(--brand);
  font-weight: 800;
  text-decoration: none;
}

.workout-builder {
  display: grid;
  gap: 0.75rem;
  padding: 0.85rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #f8faf8;
}

#workoutRows {
  display: grid;
  gap: 0.75rem;
}

.workout-builder-row {
  display: grid;
  gap: 0.75rem;
  padding: 0.85rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}





.set-list {
  display: grid;
  gap: 0.65rem;
}

.set-row {
  display: grid;
  grid-template-columns: 1.4fr minmax(5.5rem, 0.6fr) minmax(5.5rem, 0.6fr) auto;
  gap: 0.65rem;
  align-items: end;
  padding: 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}

.set-row.is-running {
  border-color: rgb(from var(--brand-strong) r g b / 0.7);
  background: var(--accent-soft);
}

.set-row.is-done {
  border-color: rgba(45, 157, 120, 0.4);
  background: var(--success-soft);
}

.set-row label {
  display: grid;
  gap: 0.25rem;
}

.set-row label span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
}

.set-row input {
  min-height: 2.4rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0 0.55rem;
}

.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
  gap: 0.45rem;
  margin-top: 0.65rem;
}

.photo-grid img {
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--radius);
  object-fit: cover;
  border: 1px solid var(--line);
}

button:disabled,
input:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.form-actions {
  display: grid;
  gap: 0.65rem;
}

.modal,
.install-sheet {
  position: fixed;
  inset: 0;
  z-index: 80;
}

.modal[hidden],
.install-sheet[hidden] {
  display: none;
}

.modal {
  display: grid;
  place-items: end center;
}

.modal-backdrop,
.sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 25, 22, 0.45);
}

.modal-panel,
.sheet-panel {
  position: relative;
  z-index: 1;
  max-height: min(88vh, 46rem);
  overflow: auto;
  border-radius: 1rem 1rem 0 0;
  background: #fff;
  box-shadow: 0 -18px 44px rgba(0, 0, 0, 0.16);
}

.modal-panel {
  display: grid;
  gap: 0.9rem;
  width: min(100%, 52rem);
  padding: 1rem;
}

.sheet-panel {
  display: grid;
  gap: 0.9rem;
  width: min(100%, 38rem);
  margin: auto auto 0;
  padding: 0.8rem 1rem calc(1rem + var(--safe-bottom));
}

.sheet-handle {
  width: 2.8rem;
  height: 0.28rem;
  margin: 0 auto 0.35rem;
  border-radius: 999px;
  background: #c9d2ce;
}

.sheet-logo {
  width: 4.5rem;
  height: 4.5rem;
  border: 1px solid var(--line);
  border-radius: 22%;
  object-fit: contain;
  padding: 0.45rem;
}

.install-steps {
  display: grid;
  gap: 0.55rem;
  margin: 0;
  padding-left: 1.25rem;
}

.install-steps li,
.sheet-panel p {
  color: var(--muted);
  line-height: 1.45;
}

.sheet-actions {
  display: grid;
  gap: 0.65rem;
}

.toast {
  position: fixed;
  right: 1rem;
  bottom: calc(5.6rem + var(--safe-bottom));
  z-index: 90;
  max-width: min(22rem, calc(100vw - 2rem));
  padding: 0.85rem 1rem;
  border-radius: var(--radius);
  background: var(--ink);
  color: #fff;
  font-size: 0.9rem;
  line-height: 1.35;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transform: translateY(0.75rem);
  transition: opacity 180ms ease, transform 180ms ease;
}

.toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

body.app-installed [data-install-trigger] {
  display: none;
}

@media (min-width: 42rem) {
  .metric-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

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

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

  .student-profile-hero {
    grid-template-columns: minmax(0, 0.9fr) minmax(20rem, 1.1fr);
  }
}

@media (min-width: 58rem) {
  .workspace {
    padding-bottom: 1.5rem;
  }

  .workspace-layout {
    display: grid;
    grid-template-columns: 15.5rem 1fr;
    gap: 1rem;
    padding: 1.25rem;
  }

  .side-nav {
    position: sticky;
    top: 5rem;
    display: grid;
    align-self: start;
    gap: 0.35rem;
    padding: 0.55rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.86);
  }

  .bottom-nav {
    display: none;
  }

  .hero-panel {
    grid-template-columns: 1fr auto;
    align-items: end;
  }

  .dashboard-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(20rem, 0.8fr);
  }

  .modal {
    place-items: center;
  }

  .modal-panel,
  .sheet-panel {
    border-radius: 1rem;
  }
}

@media (max-width: 28rem) {
  .demo-credentials,
  .page-head,
  .profile-hero,
  .entity-row,
  .agenda-item,
  .workout-row,
  .toolbar,
  .rest-banner,
  .action-panel {
    align-items: stretch;
    flex-direction: column;
  }

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

  .set-row {
    grid-template-columns: 1fr;
  }

  .header-actions,
  .page-actions,
  .section-actions,
  .row-actions,
  .toolbar-group {
    width: 100%;
  }

  .header-actions > *,
  .page-actions > *,
  .section-actions > *,
  .row-actions > *,
  .toolbar-group > *,
  .demo-credentials button {
    flex: 1 1 auto;
    width: 100%;
  }

  .calendar-head span {
    font-size: 0.68rem;
    padding: 0.45rem 0.15rem;
  }

  .day-cell {
    min-height: 6.8rem;
    padding: 0.35rem;
  }

  .month-view .day-cell {
    min-height: 5.8rem;
  }

  .day-number {
    width: 1.55rem;
    height: 1.55rem;
    font-size: 0.72rem;
  }

  .day-event {
    font-size: 0.66rem;
    min-height: 1.55rem;
    padding: 0.25rem 0.3rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Elite AS visual refresh v22 */
:root {
  --brand: #F59E0B;
  --brand-rgb: 245, 158, 11;
  --brand-strong: #E7A83E;
  --brand-soft: rgba(var(--brand-rgb), 0.1);
  --brand-ink: #1A1206;
  --ink: #f7f4eb;
  --muted: #aaa59a;
  --line: rgba(255, 255, 255, 0.12);
  --surface: rgba(18, 18, 18, 0.9);
  --canvas: #050505;
  --accent: var(--brand);
  --accent-soft: var(--brand-soft);
  --danger: #ff5a4f;
  --danger-soft: rgba(255, 90, 79, 0.14);
  --success: #48d764;
  --success-soft: rgba(72, 215, 100, 0.13);
  --info: #5aa7ff;
  --info-soft: rgba(90, 167, 255, 0.14);
  --shadow: 0 24px 64px rgba(0, 0, 0, 0.46);
  --radius: 8px;
  /* Tokens centralizados */
  --bg: #0D0D0D;
  --card: #1A1A1A;
  --borda: rgba(255, 255, 255, 0.06);
  --txt2: #9CA3AF;
  --ok: var(--success);
  --erro: var(--danger);
  --dourado: var(--brand);
  --dourado-soft: var(--brand-soft);
  --dourado-borda: rgba(var(--brand-rgb), 0.4);
  /* ═══════════════════════════════════════════════════════════════════════
     [14B.1] AS SEIS CORES DE TIPO SÃO UM CONJUNTO — E ESTE É O ÚNICO LUGAR
     ONDE ELAS SÃO ESCRITAS.

     Antes eram seis cores avulsas, cada uma escolhida num dia diferente:
     #10B981, #0E9CA8, #3B82F6, #F97316, #EC4899, #F59E0B. Claridades e cromas
     de origens diferentes — o rosa e o laranja saltavam da tela, o
     azul-petróleo sumia —, e uma delas (Outro) era literalmente o âmbar da
     MARCA, então o olho lia "ação" onde era só categoria.

     A PRIMEIRA TENTATIVA (48° a partir de 25°) consertou aquilo e caiu num
     quase idêntico: "Outro" foi parar em 73°, a TRÊS GRAUS do tom da marca —
     o âmbar desbotado. E pôs um tom em 265°, em cima da borda do roxo, sem
     folga nenhuma.

     ─────────────────────────────────────────────────────────────────────
     A REGRA, e a conta. Espaçamento regular e distância mínima do tema NÃO
     CABEM JUNTOS: seis tons igualmente espaçados num arco de 230° têm passo
     de 46°, então sempre existe um tom a menos de 23° de qualquer ponto,
     inclusive do tom da marca. A saída é escolher SETE e jogar um fora.

      1. A FAIXA PROIBIDA é a do roxo e do magenta: de --roxo-de (265°) a
         --roxo-ate (385°, que é 25°). São 120°.
      2. O ARCO ÚTIL é o resto do círculo, com 5° de folga nas duas pontas:
         de 385+5 = 390 = 30° até 265-5 = 260°. São 230°.
      3. SETE TONS igualmente espaçados nesse arco, pontas incluídas:
         passo = 230 ÷ 6 = 38,333°
         30 · 68,33 · 106,67 · 145 · 183,33 · 221,67 · 260
      4. JOGA-SE FORA o mais perto do tom da marca. `--brand` (#F59E0B) é
         oklch(0.7686 0.1647 70.08), e o descartado é o 68,33 — a 1,75° dela.
         Sobram SEIS.
      5. O MAIS PRÓXIMO DA MARCA, entre os seis que ficaram, é o 106,67, a
         36,59° dela. Acima do mínimo de 30°, então NÃO foi preciso girar o
         conjunto. As duas pontas ficam a exatos 5° da borda do roxo.
      6. CLARIDADE e CROMA são do conjunto, não de uma cor: iguais nos seis.
         O croma é 0.095 = 57,7% do croma da marca (0.1647), abaixo do teto
         de 60% — a cor da AÇÃO sempre vence a cor do TIPO.

     A ORDEM É FIXA e é esta, do menor tom para o maior: Retorno · Outro ·
     Reavaliação · Treino · Avaliação · Atualização. Ela é a mesma ordem
     relativa de antes, para o professor não ter que reaprender o conjunto.

     `cores-de-tipo.test.js` refaz esta conta e falha se algum dos seis
     encostar na marca ou na borda do roxo.
     ═══════════════════════════════════════════════════════════════════════ */
  --tipo-l: 0.72;
  --tipo-c: 0.095;
  /* A faixa proibida, declarada aqui porque a guarda lê DAQUI: mexer nela sem
     mexer nos tons faz a guarda acusar, que é o que a gente quer. */
  --roxo-de: 265;
  --roxo-ate: 385;
  --tom-retorno: 30;
  --tom-outro: 106.67;
  --tom-reaval: 145;
  --tom-treino: 183.33;
  --tom-aval: 221.67;
  --tom-atualiza: 260;
  --treino: oklch(var(--tipo-l) var(--tipo-c) var(--tom-treino));
  --treino-soft: oklch(var(--tipo-l) var(--tipo-c) var(--tom-treino) / 0.18);
  --treino-borda: oklch(var(--tipo-l) var(--tipo-c) var(--tom-treino) / 0.4);
  --aval: oklch(var(--tipo-l) var(--tipo-c) var(--tom-aval));
  --aval-soft: oklch(var(--tipo-l) var(--tipo-c) var(--tom-aval) / 0.18);
  --aval-borda: oklch(var(--tipo-l) var(--tipo-c) var(--tom-aval) / 0.4);
  --atualiza: oklch(var(--tipo-l) var(--tipo-c) var(--tom-atualiza));
  --atualiza-soft: oklch(var(--tipo-l) var(--tipo-c) var(--tom-atualiza) / 0.18);
  --atualiza-borda: oklch(var(--tipo-l) var(--tipo-c) var(--tom-atualiza) / 0.4);
  --retorno: oklch(var(--tipo-l) var(--tipo-c) var(--tom-retorno));
  --retorno-soft: oklch(var(--tipo-l) var(--tipo-c) var(--tom-retorno) / 0.18);
  --retorno-borda: oklch(var(--tipo-l) var(--tipo-c) var(--tom-retorno) / 0.4);
  --reaval: oklch(var(--tipo-l) var(--tipo-c) var(--tom-reaval));
  --reaval-soft: oklch(var(--tipo-l) var(--tipo-c) var(--tom-reaval) / 0.18);
  --reaval-borda: oklch(var(--tipo-l) var(--tipo-c) var(--tom-reaval) / 0.4);
  --outro: oklch(var(--tipo-l) var(--tipo-c) var(--tom-outro));
  --outro-soft: oklch(var(--tipo-l) var(--tipo-c) var(--tom-outro) / 0.18);
  --outro-borda: oklch(var(--tipo-l) var(--tipo-c) var(--tom-outro) / 0.4);
  /* Contrato (dourado FIXO) — cor própria da atividade de contrato, dissociada
     de --brand/--dourado: o personalizador NÃO a altera, para que o tipo
     Contrato permaneça dourado mesmo quando a marca for azul/roxo/etc. */
  --contrato: #F59E0B;
  --contrato-soft: rgba(245, 158, 11, 0.18);
  --contrato-borda: rgba(245, 158, 11, 0.4);

  /* ═══════════════════════════════════════════════════════════════════════
     [41.3] AS CINCO CORES DE ESTADO — declaradas aqui, e não existe outra.

     LEI DE CLASSE, e ela vale para o aplicativo inteiro: COR DE ESTADO E COR
     DE TIPO NÃO SEGUEM O TEMA DO PROFESSOR. O tema pinta AÇÃO — botões, links,
     aba ativa, o trilho. Verde é "ok", âmbar é "esperando", terracota é
     "atrasado", em qualquer tema. Um professor de tema vermelho não pode ter a
     tela inteira parecendo atrasada; um de tema verde não pode ter tudo
     parecendo pago.

     Por isso são hexadecimais literais e não derivam de --brand. O que entrava
     na ficha antes disto eram os verdes e azuis DO SISTEMA OPERACIONAL, que
     mudam de aparelho para aparelho e não são nossos.

     `tema-nao-pinta-estado.test.js` troca a marca do professor e falha se
     qualquer uma destas cinco (ou das seis de tipo, acima) mudar junto.
     ═══════════════════════════════════════════════════════════════════════ */
  --estado-ok: #7EB580;       /* Assinado · Ativo · Pago */
  --estado-espera: #F59E0B;   /* Aguardando · Em aberto */
  --estado-atraso: #DA8E81;   /* Atrasado · Vencido */
  --estado-neutro: #9C978C;   /* Neutro · informativo */
  --estado-apagado: #4A463F;  /* Ausência · contexto */

  /* ═══════════════════════════════════════════════════════════════════════
     [41.22] LEI DE CLASSE: O TOM MAIS APAGADO DA PALETA NÃO CARREGA FRASE.

     `--estado-apagado` (#4A463F) serve para UMA coisa: um VALOR que é uma
     ausência — "não informado", "não cobrada", um zero apagado. Ele está a um
     passo do fundo, e é para estar: o trabalho dele é sumir.

     FRASE QUE O PROFESSOR PRECISA LER NUNCA DESCE ABAIXO DE `--dim`.

     Este tom foi criado no bloco 14 para apagar o que não importa, e daí em
     diante foi usado para tudo que era secundário. SECUNDÁRIO NÃO É INVISÍVEL
     — e a prova foi o Guilherme abrir a Frequência no iPhone e dizer "não dá
     pra ver os cinzas": os dias fora do acompanhamento estavam quase na cor do
     fundo.

     A escada, do mais forte ao mais fraco:
        --ink            o que se lê primeiro
        --muted          rótulo, unidade, meta de linha
        --dim            frase secundária — O PISO DE QUALQUER FRASE
        --estado-apagado só valor-ausência, nunca frase

     `frase-nunca-no-tom-mais-apagado.test.js` é a guarda.
     ═══════════════════════════════════════════════════════════════════════ */
  /* ── Typography & rhythm tokens ── */
  --t-h1: clamp(1.85rem, 7vw, 2.5rem);
  --t-h1-w: 820;
  --t-sub: clamp(0.86rem, 2.8vw, 1rem);
  --t-sub-lh: 1.3;
  --t-section: clamp(1rem, 3.1vw, 1.18rem);
  --t-section-w: 780;
  --t-num-lg: clamp(1.75rem, 7vw, 2.55rem);
  --t-num-md: clamp(1.4rem, 4.8vw, 2rem);
  --t-num-w: 800;
  --t-label: 0.72rem;
  --t-label-w: 800;

  /* ═══════════════════════════════════════════════════════════════════════
     [E0] A ESCALA DO APP DO ALUNO — declarada num lugar só.
     ───────────────────────────────────────────────────────────────────────
     NENHUM font-size, goteira ou espaçamento pode ser escrito solto numa
     regra do app do aluno. Se um tamanho novo for preciso, ele entra AQUI —
     e aí é uma decisão, não um acidente. A guarda `escala-do-aluno.test.js`
     falha se aparecer qualquer font-size fora destes sete valores.

     A REGRA DURA DA HIERARQUIA: o nome de um objeto NUNCA é maior que o
     título da tela. --t-objeto (20) < --t-titulo (24). O nome do treino não
     pode voltar a ser o maior texto da tela.
     ═══════════════════════════════════════════════════════════════════════ */
  --t-heroi: 34px;      /* o número-manchete de uma tela. No máximo UM por tela */
  --t-heroi-w: 700;
  --t-titulo: 24px;     /* o título da tela */
  --t-titulo-w: 700;
  --t-objeto: 20px;     /* nome de treino, nome de exercício */
  --t-objeto-w: 600;
  --t-corpo: 15px;
  --t-corpo-w: 400;
  --t-fato: 13px;       /* linha de fatos, estado, datas — sempre em --muted */
  --t-fato-w: 400;
  --t-rotulo: 11px;     /* MAIÚSCULA, 0.08em, --dim */
  --t-rotulo-w: 600;
  --t-entrada: 28px;    /* o número dentro de um campo de carga/repetição */
  --t-entrada-w: 700;

  --goteira: 20px;      /* a margem lateral, UMA para todas as telas do aluno */
  --entre-blocos: 28px;
  --entre-linhas: 12px;
  --alvo: 44px;         /* altura mínima de qualquer coisa que se toca */

  --dim: #6B665D;
}

/* ── Themes ─────────────────────────────────────────────────────────────
   Cada seletor sobrescreve apenas as 4 variáveis canônicas de marca.
   Trocar data-theme no <html> re-tematiza o app inteiro.

   REGRA ÚNICA DE CONTRASTE: todo elemento com `background: var(--brand)`
   usa `color: var(--brand-ink)` no texto — nunca branco/#fff sobre o
   dourado (bug recorrente). `--brand-ink` é a única fonte dessa decisão e
   é definido por tema abaixo; não hardcodar cor de texto sobre a marca.
   ──────────────────────────────────────────────────────────────────── */

/* gold — âmbar dourado (ativo) */
[data-theme="gold"] {
  --brand:        #F59E0B;
  --brand-rgb:    245, 158, 11;
  --brand-strong: #E7A83E;
  --brand-soft:   rgba(var(--brand-rgb), 0.10);
  --brand-ink:    #1A1206;
}

/* ocean — azul céu + rosa (inativo) */
[data-theme="ocean"] {
  --brand:        #0EA5E9;
  --brand-rgb:    14, 165, 233;
  --brand-strong: #F9A8D4;
  --brand-soft:   rgba(var(--brand-rgb), 0.10);
  --brand-ink:    #072331;
}

/* graphite — ardósia neutra (inativo) */
[data-theme="graphite"] {
  --brand:        #64748B;
  --brand-rgb:    100, 116, 139;
  --brand-strong: #CBD5E1;
  --brand-soft:   rgba(var(--brand-rgb), 0.10);
  --brand-ink:    #0F172A;
}

html,
body {
  background: var(--canvas);
}

body {
  color: var(--ink);
  background:
    linear-gradient(120deg, var(--borda) 0 17%, transparent 17% 100%),
    linear-gradient(180deg, #020202, #0a0a0a 34rem, #050505);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 34rem);
  background-position: 0 0;
  background-size: 100% 100%;
  mask-image: radial-gradient(circle at right 18rem top 24rem, #000 0 16rem, transparent 24rem);
}

/* ── Corefy FIXA: splash + login imunes ao tema do personal ──────────────
   O personalizador (applyAppearance) escreve --brand, --bg e --card em :root
   (inline no <html>), que cascateia para todo o app. A splash e a tela de
   login NÃO devem ler nem aplicar esse tema salvo: exibem SEMPRE a marca
   Corefy — fundo escuro #0D0D0D e acento verde-água #2DD4BF.
   Redeclarar os tokens nestes dois containers faz a resolução das variáveis
   usar o valor local; o override inline em :root não alcança descendentes
   que declaram a própria variável, então mudar o tema dentro do app não
   altera a cara da splash nem do login. */
.startup-splash,
.login-view {
  --brand: #2DD4BF;
  --brand-rgb: 45, 212, 191;
  --brand-strong: #14B8A6;
  --brand-soft: rgba(45, 212, 191, 0.1);
  --brand-ink: #06231F;
  --accent: #2DD4BF;
  --accent-soft: rgba(45, 212, 191, 0.1);
  --bg: #0D0D0D;
  --card: #1A1A1A;
  --canvas: #0D0D0D;
}

.startup-splash {
  background: #0F1318;
}

.login-view {
  background: #0F1318;
}

.startup-splash img,
.brand-logo {
  background: transparent;
}

/* O selo do rodape da splash usa o MESMO <img> que a marca central, mas a
   regra legada `.startup-splash img` (min(42vw,8.5rem)) o inflava para ~136px,
   recriando uma logo grande duplicada no rodape. Aqui o reduzimos ao icone
   minimo de 14px (sem padding/sombra/pulso), deixando so o texto completo
   "Desenvolvido por Corefy" centralizado. */
.splash-credit img {
  width: 14px;
  height: 14px;
  padding: 0;
  box-shadow: none;
  animation: none;
}

/* Simbolo central da splash: tile navy arredondado, centralizado, com brilho
   radial verde-agua atras e a barrinha fina mais abaixo. Espelha o CSS critico
   inline do index.html para o PWA instalado (CSS externo em cache) renderizar
   igual e nao herdar o legado `.startup-splash img` (#fff/padding/sombra/pulso),
   que encolhia o simbolo p/ ~80px e o cercava de navy. */
.splash-logo {
  position: relative;
  display: grid;
  place-items: center;
}
.splash-logo::before {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--brand-rgb, 45, 212, 191), 0.16) 0%, rgba(var(--brand-rgb, 45, 212, 191), 0) 70%);
  z-index: 0;
  pointer-events: none;
}
.startup-splash .splash-mark {
  position: relative;
  z-index: 1;
  width: 104px;
  height: 104px;
  border-radius: 22%;
  object-fit: cover;
  background: #021837;
  overflow: hidden;
  padding: 0;
  box-shadow: none;
  animation: none;
  display: block;
}
.splash-bar {
  margin-top: 3.25rem;
  position: relative;
  overflow: hidden;
  width: 120px;
  height: 3px;
  border-radius: 999px;
  background: rgba(var(--brand-rgb, 45, 212, 191), 0.18);
}
.splash-bar::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 45%;
  border-radius: 999px;
  background: var(--brand, #2dd4bf);
  animation: splash-bar-slide 1.15s ease-in-out infinite;
}
body.app-ready .splash-bar::after {
  animation: none;
}
@keyframes splash-bar-slide {
  0% { transform: translateX(-110%); }
  100% { transform: translateX(355%); }
}

.login-card,
.page-head,
.panel,
.metric-card,
.entity-row,
.agenda-item,
.workout-row,
.calendar-board,
.empty-state,
.profile-card,
.toolbar,
.library-card,
.preview-box,
.workout-builder,
.workout-builder-row,
.media-note,
.day-cell,
.segmented,
.rest-banner,
.action-panel {
  border-color: var(--line);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.028)),
    rgba(12, 12, 12, 0.88);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.login-card,
.modal-panel,
.sheet-panel {
  border-color: var(--line);
  background:
    rgba(9, 9, 9, 0.96);
}

.brand-block p,
.eyebrow,
.video-link,
.text-action,
.agenda-time {
  color: var(--brand);
}

.field span,
.field input,
.field select,
.field textarea,
.entity-main strong,
.agenda-main strong,
.workout-main strong,
.quick-main strong,
.section-title h3,
.profile-card strong,
.page-head h3,
.brand-inline h2 {
  color: var(--ink);
}

.field input,
.field select,
.field textarea,
.check-chip,
.icon-button,
.ghost-button,
.mini-button,
.secondary-action,
.demo-credentials button {
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.055);
  color: var(--ink);
}

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

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: rgb(from var(--brand-soft) r g b / 0.75);
  box-shadow: none;
}

.primary-action {
  border: none;
  background: var(--brand);
  color: var(--brand-ink);
  box-shadow: none;
}

.secondary-action,
.pill-button,
.mini-button.primary-mini {
  border-color: rgb(from var(--brand-soft) r g b / 0.44);
  background: var(--brand-soft);
  color: var(--brand-strong);
}

.danger-action,
.mini-button.is-danger {
  border-color: rgba(255, 90, 79, 0.36);
  background: var(--danger-soft);
  color: var(--danger);
}

.whatsapp-button {
  border-color: rgba(72, 215, 100, 0.32);
  background: var(--success-soft);
  color: var(--success);
}

.badge {
  border: 1px solid rgb(from var(--brand-soft) r g b / 0.28);
  background: var(--brand-soft);
  color: var(--brand-strong);
}

.badge.is-success {
  border-color: rgba(72, 215, 100, 0.34);
  background: var(--success-soft);
  color: var(--success);
}

.badge.is-danger {
  border-color: rgba(255, 90, 79, 0.34);
  background: var(--danger-soft);
  color: var(--danger);
}

.badge.is-info {
  border-color: rgba(90, 167, 255, 0.34);
  background: var(--info-soft);
  color: var(--info);
}

.badge.is-warning {
  border-color: rgb(from var(--brand-soft) r g b / 0.4);
  background: rgb(from var(--brand-soft) r g b / 0.14);
  color: var(--brand-strong);
}

.badge.is-muted {
  border-color: rgba(154, 160, 166, 0.28);
  background: rgba(154, 160, 166, 0.12);
  color: rgba(247, 244, 235, 0.68);
}

.workspace {
  padding-bottom: calc(5.8rem + var(--safe-bottom));
}

.manager-workspace {
  padding-bottom: 1.25rem;
}

#managerBottomNav {
  display: none !important;
}

.workspace-header {
  min-height: 4.5rem;
  padding: max(0.75rem, env(safe-area-inset-top, 0px)) clamp(12px, 4vw, 20px) 0.75rem;
  border-bottom-color: var(--line);
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.065) 0 31%, transparent 31% 100%),
    rgba(2, 2, 2, 0.92);
}

.manager-header {
  display: flex;
  align-items: center;
}

.brand-inline h2 {
  font-size: clamp(1.08rem, 4.8vw, 1.55rem);
  letter-spacing: 0;
}

.brand-inline span {
  color: var(--brand);
  font-size: 0.72rem;
  text-transform: uppercase;
}

.brand-inline span strong {
  color: var(--muted);
  font-weight: 800;
  text-transform: none;
}

.manager-header .brand-logo {
  width: 4.1rem;
  height: 2.35rem;
  border-radius: 0;
  object-fit: contain;
}

.header-actions {
  width: auto;
}

.header-actions > * {
  width: auto;
  flex: 0 0 auto;
}

.avatar-button {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  border: 1px solid rgb(from var(--brand-soft) r g b / 0.7);
  border-radius: 999px;
  background: linear-gradient(145deg, rgb(from var(--brand-soft) r g b / 0.22), var(--borda));
  color: var(--brand-strong);
  font-size: 0.78rem;
  font-weight: 900;
}

.avatar-button.has-photo {
  padding: 0;
  overflow: hidden;
}

.avatar-button.has-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}

.notification-button {
  position: relative;
  border-radius: 999px;
}

.notification-button::after {
  content: "";
  position: absolute;
  top: 0.42rem;
  right: 0.42rem;
  width: 0.48rem;
  height: 0.48rem;
  border-radius: 999px;
  background: var(--brand);
}

.menu-trigger {
  min-width: 2.75rem;
  min-height: 2.75rem;
  border: 0;
  background: transparent;
  color: var(--ink);
}

.workspace-layout {
  width: min(100%, 78rem);
}

.content-stack {
  gap: 0.9rem;
}

.page-head {
  align-items: center;
  padding: 0.35rem 0 0.6rem;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.page-head h3 {
  margin-top: 0.2rem;
  font-size: clamp(2rem, 9vw, 3rem);
  font-weight: 780;
}

.page-head p {
  color: var(--muted);
  font-size: clamp(0.95rem, 3vw, 1.08rem);
}

.page-actions {
  align-items: center;
}

.page-actions .primary-action {
  min-height: 3rem;
  padding: 0 1.15rem;
}

.metric-grid {
  gap: 0.75rem;
}

.metric-card {
  display: grid;
  align-content: center;
  min-height: 6rem;
  padding: 1rem;
}

.metric-card span {
  color: var(--muted);
  font-size: 0.88rem;
}

.metric-card strong {
  color: var(--ink);
  font-size: var(--t-num-lg);
  font-weight: var(--t-num-w);
}

.panel {
  gap: 0.8rem;
  padding: 1rem;
}

.section-title h3 {
  font-size: 1.16rem;
  font-weight: 780;
}

.entity-row,
.workout-row,
.agenda-item {
  border-radius: 0.85rem;
  padding: 0.85rem;
}

.compact-row {
  align-items: center;
}

.entity-main span,
.agenda-main span,
.workout-main span,
.quick-main span,
.small-text {
  color: var(--muted);
}

.row-actions {
  justify-content: flex-end;
}

.row-actions .mini-button,
.section-actions .mini-button {
  min-height: 2.75rem;
  border-radius: 999px;
  padding: 0 0.72rem;
}

.entity-avatar {
  display: grid;
  flex: 0 0 3rem;
  width: 3rem;
  height: 3rem;
  place-items: center;
  border: 1px solid rgb(from var(--brand-soft) r g b / 0.35);
  border-radius: 999px;
  background:
    rgba(255, 255, 255, 0.055);
  color: var(--brand-strong);
  font-size: 0.9rem;
  font-weight: 900;
}

/* shared photo display for all avatar variants */
.entity-avatar.is-photo,
.agenda-avatar.is-photo,
.ap-student-avatar.is-photo,
.cfs-result-avatar.is-photo {
  overflow: hidden;
  background: none;
}

.entity-avatar.is-photo img,
.agenda-avatar.is-photo img,
.ap-student-avatar.is-photo img,
.cfs-result-avatar.is-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Garante recorte circular consistente da foto em QUALQUER contexto (perfil,
   listas, header, chat). Força o quadrado (aspect-ratio 1) e anula o flex-basis
   herdado de .entity-avatar (flex: 0 0 3rem), que em containers flex deixava o
   avatar oval e cortava o PNG circular. Escopo .is-photo/.has-photo: o fallback
   de iniciais continua intacto. */
.avatar-button.has-photo,
.side-nav-avatar,
.entity-avatar.is-photo,
.agenda-avatar.is-photo,
.ap-student-avatar.is-photo,
.cfs-result-avatar.is-photo {
  flex: 0 0 auto;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 999px;
}

.avatar-button.has-photo img,
.side-nav-avatar img,
.entity-avatar.is-photo img,
.agenda-avatar.is-photo img,
.ap-student-avatar.is-photo img,
.cfs-result-avatar.is-photo img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

.student-row .entity-main,
.update-row .entity-main {
  display: grid;
  gap: 0.12rem;
}

.action-menu {
  position: relative;
}

.action-menu summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0 0.72rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
  color: var(--brand-strong);
  font-size: 0.82rem;
  font-weight: 800;
  list-style: none;
  cursor: pointer;
}

.action-menu summary::-webkit-details-marker {
  display: none;
}

.action-menu div {
  position: absolute;
  top: calc(100% + 0.35rem);
  right: 0;
  z-index: 18;
  display: grid;
  min-width: 10rem;
  gap: 0.35rem;
  padding: 0.45rem;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: rgba(8, 8, 8, 0.98);
  box-shadow: var(--shadow);
}

.action-menu div .mini-button {
  justify-content: center;
  width: 100%;
}

.toolbar {
  padding: 0.65rem;
}

.toolbar-group {
  gap: 0.55rem;
}

.toolbar input,
.toolbar select {
  min-height: 2.8rem;
}

.mini-button:hover,
.ghost-button:hover,
.secondary-action:hover {
  border-color: rgb(from var(--brand-soft) r g b / 0.56);
}

.segmented {
  width: 100%;
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.035);
}

.segmented button {
  min-height: 2.75rem;
}

.segmented button.is-active {
  background: rgb(from var(--brand-soft) r g b / 0.12);
  color: var(--brand-strong);
  box-shadow: inset 0 -2px 0 var(--brand);
}

.calendar-board {
  border-radius: 1rem;
}

.calendar-head span,
.day-cell {
  border-color: var(--line);
}

.day-cell {
  background: rgba(255, 255, 255, 0.03);
}

.day-cell.is-outside {
  background: rgba(255, 255, 255, 0.018);
}

.day-cell.is-selected {
  background: var(--brand-soft);
}

.day-number {
  color: var(--ink);
}

.day-cell.is-selected .day-number {
  background: var(--brand);
  color: var(--brand-ink);
}

.agenda-item {
  border-left-width: 0.2rem;
}

.agenda-item.is-status-done,
.agenda-item.is-status-sent,
.day-event.is-status-done,
.day-event.is-status-sent {
  background: linear-gradient(90deg, rgba(72, 215, 100, 0.14), rgba(255, 255, 255, 0.03));
}

.agenda-item.is-status-pending,
.agenda-item.is-status-contract_pending,
.day-event.is-status-pending,
.day-event.is-status-contract_pending {
  background: linear-gradient(90deg, rgb(from var(--brand-soft) r g b / 0.16), rgba(255, 255, 255, 0.03));
}

.agenda-item.is-status-canceled,
.agenda-item.is-status-missed,
.day-event.is-status-canceled,
.day-event.is-status-missed {
  background: linear-gradient(90deg, rgba(255, 90, 79, 0.15), rgba(255, 255, 255, 0.03));
}

.day-event {
  border-color: rgb(from var(--brand-soft) r g b / 0.28);
  background: rgb(from var(--brand-soft) r g b / 0.12);
  color: var(--ink);
}

.profile-hero,
.student-profile-hero {
  border-color: var(--line);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025)),
    rgba(12, 12, 12, 0.9);
}

.tab-row {
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.035);
}

.tab-row button {
  color: var(--muted);
}

.tab-row button.is-active {
  color: var(--brand-strong);
  box-shadow: inset 0 -2px 0 var(--brand);
}

.set-row {
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.035);
}

.set-row.is-running {
  border-color: rgb(from var(--brand-soft) r g b / 0.58);
  background: rgb(from var(--brand-soft) r g b / 0.12);
}

.set-row.is-done {
  border-color: rgba(72, 215, 100, 0.4);
  background: rgba(72, 215, 100, 0.11);
}

.bottom-nav {
  right: 0.8rem;
  bottom: 0.8rem;
  left: 0.8rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: rgba(6, 6, 6, 0.9);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
}

.nav-button {
  border-radius: 0.85rem;
  color: var(--muted);
}

.nav-button.is-active {
  background: rgb(from var(--brand-soft) r g b / 0.12);
  color: var(--brand-strong);
  box-shadow: none;
}

.side-nav {
  color: var(--ink);
}

.side-nav .nav-button {
  color: var(--muted);
}

.side-nav .nav-button.is-active {
  background: rgb(from var(--brand-soft) r g b / 0.12);
  color: var(--brand-strong);
}

.side-nav .nav-button.is-logout {
  margin-top: 0.35rem;
  color: var(--danger);
}

.nav-group {
  color: var(--muted);
  letter-spacing: 0;
}

.nav-group-system {
  margin-top: auto;
}

.drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s;
}

.drawer-backdrop.visible {
  opacity: 1;
  pointer-events: auto;
}

.toast {
  background: rgba(15, 15, 15, 0.96);
  border: 1px solid var(--line);
  color: var(--ink);
}

@media (max-width: 57.99rem) {
  .manager-workspace .workspace-layout {
    padding-top: 0.85rem;
  }

  .manager-workspace .side-nav {
    position: fixed;
    top: 0;
    left: 0;
    height: 100dvh;
    width: min(82vw, 300px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    z-index: 9999;
    display: grid;
    align-content: start;
    gap: 0.28rem;
    padding-top: env(safe-area-inset-top, 16px);
    padding-bottom: env(safe-area-inset-bottom, 16px);
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    border: 1px solid var(--line);
    border-left: 0;
    border-radius: 0 1rem 1rem 0;
    background: #111111;
    box-shadow: none;
    transform: translateX(-100%);
    transition: transform 0.28s ease;
  }

  .manager-workspace .side-nav.open {
    transform: translateX(0);
    box-shadow: 24px 0 70px rgba(0, 0, 0, 0.58);
  }

  .manager-workspace .content-area {
    min-width: 0;
  }

  .manager-header .pill-button {
    display: none;
  }

  .page-head {
    gap: 0.75rem;
  }

  .page-head,
  .page-actions {
    align-items: stretch;
  }

  .page-actions .primary-action,
  .page-actions .secondary-action,
  .page-actions .pill-button {
    width: 100%;
  }

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

  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .entity-row,
  .workout-row {
    align-items: stretch;
    flex-direction: column;
  }

  .row-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
  }

  .row-actions .primary-action,
  .row-actions .secondary-action,
  .row-actions .mini-button {
    width: 100%;
  }

  .row-actions .action-menu {
    width: 100%;
  }

  .row-actions .action-menu summary {
    width: 100%;
  }

  .row-actions .action-menu div {
    position: static;
    margin-top: 0.35rem;
    width: 100%;
    min-width: 0;
  }

  .workout-row .row-actions .mini-button:nth-child(n + 3),
  .library-row .row-actions .mini-button:nth-child(n + 3) {
    min-height: 2.75rem;
    font-size: 0.75rem;
  }

  .calendar-board {
    overflow-x: auto;
  }

  .week-view .calendar-head,
  .week-view .calendar-grid {
    min-width: 42rem;
  }

  .month-view .calendar-head,
  .month-view .calendar-grid {
    min-width: 36rem;
  }
}

@media (min-width: 58rem) {
  .manager-workspace .workspace-layout {
    grid-template-columns: 17.5rem 1fr;
    gap: 1.2rem;
  }

  .manager-workspace .side-nav {
    top: 5.35rem;
    min-height: calc(100vh - 6.8rem);
    align-content: start;
    border-radius: 1rem;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025)),
      rgba(9, 9, 9, 0.82);
  }

  .menu-trigger {
    display: none;
  }

  .dashboard-grid {
    grid-template-columns: minmax(0, 1.18fr) minmax(22rem, 0.82fr);
  }
}

@media (max-width: 28rem) {
  .manager-header .brand-logo {
    width: 3.2rem;
  }

  .notification-button {
    display: none;
  }

  .metric-card {
    min-height: 5.25rem;
    padding: 0.75rem;
  }

  .page-head h3 {
    font-size: 1.8rem;
  }
}

/* Dashboard gestor - central de comando Elite AS */
.dashboard-home {
  gap: 0.72rem;
}

.manager-header {
  position: sticky;
  top: 0;
  z-index: 24;
  min-height: 3.85rem;
  padding: max(0.52rem, env(safe-area-inset-top, 0px)) clamp(12px, 4vw, 20px) 0.52rem;
}

.manager-header .brand-inline {
  gap: 0.58rem;
}

.manager-header .brand-inline .manager-subtitle + span {
  display: none;
}

.manager-header .brand-inline .manager-subtitle {
  display: inline-flex;
  gap: 0.22rem;
  align-items: center;
  color: var(--brand);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.manager-header .brand-inline .manager-subtitle strong {
  color: var(--muted);
  font-weight: 800;
  text-transform: none;
}

.dashboard-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 0.85rem;
  padding: 0.1rem 0 0.05rem;
}

.dashboard-hero h3 {
  margin-top: 0.08rem;
  color: var(--ink);
  font-size: var(--t-h1);
  font-weight: var(--t-h1-w);
  line-height: 1;
}

.dashboard-hero p {
  margin-top: 0.28rem;
  color: var(--muted);
  font-size: clamp(0.88rem, 2.7vw, 1rem);
  line-height: 1.35;
}

.dashboard-hero .primary-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 2.72rem;
  width: auto;
  min-width: 11.2rem;
  border-radius: 0.72rem;
  background: var(--brand);
  color: var(--brand-ink);
  box-shadow: none;
}

.dashboard-hero .primary-action svg {
  width: 1.2rem;
  height: 1.2rem;
  stroke: currentColor;
}

.dashboard-metrics {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.62rem;
}

.dashboard-metrics .dashboard-metric:nth-child(-n + 3) {
  grid-column: span 2;
}

.dashboard-metrics .dashboard-metric:nth-child(n + 4) {
  grid-column: span 3;
}

.dashboard-metric {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.34rem;
  min-height: 7.15rem;
  padding: 0.78rem 0.82rem;
  overflow: hidden;
  color: var(--ink);
  text-align: left;
}

button.dashboard-metric {
  width: 100%;
  border: 1px solid var(--line);
  cursor: pointer;
}

.dashboard-metric::after {
  content: "";
  position: absolute;
  right: 0.65rem;
  bottom: 0.65rem;
  width: 3.8rem;
  height: 3.8rem;
  border-radius: 999px;
  background: rgb(from var(--brand-soft) r g b / 0.055);
  pointer-events: none;
}

.dashboard-metric:hover {
  border-color: rgb(from var(--brand-soft) r g b / 0.5);
  transform: translateY(-1px);
}

.dashboard-metric .metric-icon {
  display: inline-grid;
  width: 1.7rem;
  height: 1.7rem;
  place-items: center;
  color: var(--brand-strong);
}

.dashboard-metric .metric-icon svg {
  width: 1.42rem;
  height: 1.42rem;
  stroke: currentColor;
}

.dashboard-metric .metric-label {
  max-width: 100%;
  min-height: 1.95rem;
  color: rgba(247, 244, 235, 0.74);
  font-size: 0.78rem;
  font-weight: 750;
  line-height: 1.2;
  overflow-wrap: normal;
  word-break: normal;
}

.dashboard-metric strong {
  position: relative;
  z-index: 1;
  margin-top: 0;
  color: var(--ink);
  font-size: clamp(1.75rem, 5.2vw, 2.35rem);
  line-height: 0.96;
}

.dashboard-metric small {
  color: var(--muted);
  font-size: 0.71rem;
  line-height: 1.25;
}

.dashboard-metric.is-success .metric-icon,
.dashboard-metric.is-success small {
  color: var(--success);
}

.dashboard-metric.is-warning .metric-icon,
.dashboard-metric.is-warning small {
  color: var(--brand-strong);
}

.dashboard-panel {
  border-radius: 0.88rem;
  padding: 0.76rem;
  gap: 0.62rem;
}

.dashboard-panel .section-title {
  align-items: start;
}

.dashboard-panel .section-title > div {
  display: grid;
  gap: 0.18rem;
  min-width: 0;
}

.dashboard-pending-list {
  gap: 0.42rem;
}

/* [40.1 A] Duas colunas, não três: a terceira era o selo de prioridade, que
   saiu junto com o `tone` que esta tela inventava sozinha. */
.dashboard-pending-item {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.6rem;
  min-height: 3.38rem;
  padding: 0.75rem 0.62rem;
}

.dashboard-pending-item .entity-main {
  display: grid;
  gap: 0.05rem;
  min-width: 0;
}

.dashboard-pending-item .entity-main small {
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.25;
}

.dashboard-pending-item .entity-main strong,
.dashboard-pending-item .entity-main span,
.dashboard-pending-item .entity-main small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* [40.1 A] `.dashboard-pending-actions` saiu daqui e das quatro repetições
   que tinha mais abaixo: o único filho que ela alinhava era o selo de
   prioridade ("Alta/Média/Baixa"), e o selo saiu. */

.status-dot {
  display: block;
  width: 0.72rem;
  height: 0.72rem;
  border-radius: 999px;
  background: var(--info);
  box-shadow: 0 0 0 0.28rem rgba(90, 167, 255, 0.12);
}

.status-dot.is-danger {
  background: var(--danger);
  box-shadow: 0 0 0 0.28rem rgba(255, 90, 79, 0.12);
}

.status-dot.is-warning {
  background: var(--brand);
  box-shadow: none;
}

.status-dot.is-success {
  background: var(--success);
  box-shadow: 0 0 0 0.28rem var(--success-soft);
}

.asaas-webhook-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}

.asaas-webhook-error {
  margin: -0.3rem 0 0.6rem;
  padding: 0.5rem 0.65rem;
  border: 1px solid rgba(220, 38, 38, 0.35);
  border-radius: 0.5rem;
  background: rgba(220, 38, 38, 0.08);
  color: #b91c1c;
}

.asaas-events {
  display: flex;
  flex-direction: column;
  gap: 0.42rem;
}

.asaas-event {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 0.7rem;
  background: rgba(255, 255, 255, 0.035);
}

.asaas-event-meta {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  white-space: nowrap;
}

.dashboard-agenda-list {
  gap: 0.42rem;
}

.dashboard-agenda-item {
  display: grid;
  grid-template-columns: 3.35rem minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.48rem;
  min-height: 3.45rem;
  padding: 0.75rem 0.52rem;
  border: 1px solid var(--line);
  border-left-width: 0.22rem;
  border-radius: 0.85rem;
  background: rgba(255, 255, 255, 0.035);
}

.dashboard-agenda-time {
  color: var(--brand-strong);
  font-size: 0.86rem;
  font-weight: 850;
  white-space: nowrap;
}

.dashboard-agenda-main {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

.dashboard-agenda-main strong,
.dashboard-agenda-main span,
.dashboard-agenda-main small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-agenda-main strong {
  color: var(--ink);
  font-size: 0.84rem;
}

.dashboard-agenda-main span,
.dashboard-agenda-main small {
  color: var(--muted);
  font-size: 0.7rem;
}

.dashboard-agenda-actions {
  display: flex;
  gap: 0.35rem;
  justify-content: flex-end;
}

.weekly-bars {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: end;
  min-height: 5.75rem;
  gap: 0.45rem;
  padding-top: 0.38rem;
}

.weekly-bar {
  display: grid;
  align-items: end;
  justify-items: center;
  gap: 0.32rem;
  min-width: 0;
  height: 5rem;
}

.weekly-bar i {
  display: block;
  width: min(100%, 1.4rem);
  height: var(--bar-height);
  min-height: 0.85rem;
  border-radius: 999px 999px 0.35rem 0.35rem;
  background: linear-gradient(180deg, var(--brand), rgb(from var(--brand-soft) r g b / 0.34));
  box-shadow: none;
}

.weekly-bar small {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
}

.weekly-bar.is-today small {
  color: var(--brand-strong);
}

@media (max-width: 57.99rem) {
  .manager-workspace .workspace-layout {
    padding: 0.7rem var(--goteira, 20px) 1rem;
  }

  .dashboard-hero {
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 0.58rem;
  }

  .dashboard-hero .primary-action {
    width: 100%;
    min-width: 0;
    min-height: 2.55rem;
  }

  .dashboard-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.52rem;
  }

  .dashboard-metrics .dashboard-metric:nth-child(n) {
    grid-column: auto;
  }

  .dashboard-metric {
    min-height: 6.55rem;
    padding: 0.68rem;
  }

  .dashboard-metric .metric-label {
    min-height: 1.8rem;
    font-size: 0.72rem;
  }

  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-agenda-item {
    grid-template-columns: 3.12rem minmax(0, 1fr) auto auto;
    gap: 0.36rem;
  }

  .dashboard-agenda-status {
    justify-self: end;
  }

  .dashboard-agenda-actions {
    grid-column: auto;
    justify-content: flex-end;
  }

  .dashboard-agenda-actions .mini-button,
  .dashboard-agenda-actions .whatsapp-button {
    flex: 0 0 auto;
    min-height: 1.95rem;
  }

}

@media (min-width: 58rem) {
  .dashboard-home .dashboard-grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(21rem, 0.92fr);
  }

}

@media (max-width: 24.5rem) {
  .dashboard-metrics {
    grid-template-columns: 1fr;
  }

  .dashboard-metric {
    min-height: 5.8rem;
  }

  .dashboard-metric .metric-label {
    min-height: auto;
  }

  .dashboard-pending-item {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .dashboard-pending-actions {
    grid-column: 2;
    justify-content: flex-start;
  }
}

.dashboard-home {
  gap: 0.56rem;
}

.manager-header {
  min-height: 3.45rem;
  padding: max(0.45rem, env(safe-area-inset-top, 0px)) clamp(12px, 4vw, 20px) 0.45rem;
}

.manager-header .brand-inline {
  gap: 0.5rem;
}

.manager-header .brand-logo {
  width: 3.45rem;
  height: 2.05rem;
}

.manager-header .brand-inline h2 {
  font-size: clamp(1.06rem, 4.1vw, 1.34rem);
  line-height: 1;
}

.manager-header .brand-inline .manager-subtitle {
  font-size: 0.66rem;
  line-height: 1.05;
}

.manager-header .avatar-button {
  width: 2.2rem;
  height: 2.2rem;
}

.dashboard-hero {
  gap: 0.68rem;
  padding: 0 0 0.04rem;
}

.dashboard-hero h3 {
  font-size: var(--t-h1);
}

.dashboard-hero p {
  margin-top: 0.2rem;
  font-size: clamp(0.8rem, 2.35vw, 0.94rem);
}

.dashboard-hero .primary-action {
  min-height: 2.42rem;
  min-width: 10rem;
  padding-inline: 0.95rem;
  border-radius: 0.68rem;
  box-shadow: none;
}

.dashboard-hero .primary-action svg {
  width: 1.2rem;
  height: 1.2rem;
}

.dashboard-metrics {
  gap: 0.5rem;
}

.dashboard-metric {
  min-height: 5.55rem;
  gap: 0.22rem;
  padding: 0.58rem 0.64rem;
  border-radius: 0.8rem;
}

.dashboard-metric::after {
  right: 0.45rem;
  bottom: 0.45rem;
  width: 2.95rem;
  height: 2.95rem;
}

.dashboard-metric .metric-icon {
  width: 1.34rem;
  height: 1.34rem;
}

.dashboard-metric .metric-icon svg {
  width: 1.16rem;
  height: 1.16rem;
}

.dashboard-metric .metric-label {
  min-height: auto;
  font-size: 0.68rem;
  line-height: 1.14;
}

.dashboard-metric strong {
  font-size: clamp(1.42rem, 4.1vw, 2.02rem);
}

.dashboard-metric small {
  font-size: 0.64rem;
  line-height: 1.16;
}

.dashboard-panel {
  border-radius: 0.82rem;
  padding: 0.62rem;
  gap: 0.48rem;
}

.dashboard-panel .section-title h3 {
  font-size: clamp(1rem, 3.2vw, 1.18rem);
  line-height: 1.08;
}

.dashboard-panel .section-title .small-text {
  font-size: 0.68rem;
  line-height: 1.22;
}

.dashboard-pending-list,
.dashboard-agenda-list {
  gap: 0.34rem;
}

.dashboard-pending-item {
  min-height: 3.05rem;
  gap: 0.48rem;
  padding: 0.45rem 0.5rem;
  border-radius: 0.78rem;
}

.dashboard-pending-item .entity-main strong {
  font-size: 0.82rem;
  line-height: 1.12;
}

.dashboard-pending-item .entity-main span,
.dashboard-pending-item .entity-main small {
  font-size: 0.66rem;
}

.dashboard-pending-actions .badge {
  min-height: 1.65rem;
  padding: 0.28rem 0.46rem;
  font-size: 0.62rem;
}

.dashboard-pending-actions .mini-button {
  min-height: 1.75rem;
  padding: 0.3rem 0.5rem;
  font-size: 0.66rem;
}

.dashboard-agenda-item {
  min-height: 3.05rem;
  padding: 0.44rem 0.48rem;
  border-radius: 0.78rem;
}

.dashboard-agenda-main strong {
  font-size: 0.78rem;
}

.dashboard-agenda-main span,
.dashboard-agenda-main small {
  font-size: 0.64rem;
}

.weekly-bars {
  min-height: 4.15rem;
  gap: 0.32rem;
}

.weekly-bar {
  height: 3.55rem;
  gap: 0.22rem;
}

.weekly-bar i {
  width: min(100%, 1.18rem);
  min-height: 0.72rem;
}

.weekly-bar small {
  font-size: 0.58rem;
}

@media (max-width: 57.99rem) {
  .manager-workspace {
    padding-bottom: calc(5.75rem + var(--safe-bottom));
  }

  #managerBottomNav {
    display: grid !important;
  }

  .manager-workspace .workspace-layout {
    padding: 0.58rem var(--goteira, 20px) 0.82rem;
  }

  .dashboard-hero {
    gap: 0.42rem;
  }

  .dashboard-hero .primary-action {
    min-height: 2.34rem;
  }

  .dashboard-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.42rem;
  }

  .dashboard-metrics .dashboard-metric:nth-child(n) {
    grid-column: auto;
  }

  .dashboard-metric {
    min-height: 5.05rem;
    padding: 0.5rem 0.52rem;
  }

  .dashboard-metric .metric-label {
    font-size: 0.63rem;
  }

  .dashboard-metric strong {
    font-size: clamp(1.28rem, 7vw, 1.62rem);
  }

  .dashboard-panel {
    padding: 0.56rem;
  }

  .dashboard-pending-item {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .dashboard-pending-actions {
    grid-column: 2;
    justify-content: flex-start;
  }

  .dashboard-agenda-status {
    display: none;
  }

  .dashboard-agenda-item {
    grid-template-columns: 2.75rem minmax(0, 1fr) auto;
  }

}

@media (max-width: 24.5rem) {
  .dashboard-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-metric {
    min-height: 4.9rem;
  }

  .dashboard-metric small {
    font-size: 0.58rem;
  }

}

@media (max-width: 20rem) {
  .dashboard-metrics {
    grid-template-columns: 1fr;
  }
}

/* Dashboard gestor - refinamento visual v36 */
.dashboard-home {
  gap: 0.5rem;
}

.dashboard-home .empty-state {
  min-height: auto;
  gap: 0.18rem;
  padding: 0.66rem 0.72rem;
  border-radius: 0.78rem;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018));
}

.dashboard-home .empty-state strong {
  font-size: 0.86rem;
  line-height: 1.16;
}

.dashboard-home .empty-state span {
  font-size: 0.7rem;
  line-height: 1.25;
}

.dashboard-metric {
  grid-template-columns: auto minmax(0, 1fr);
  align-content: center;
  min-height: 5.15rem;
  gap: 0.05rem 0.48rem;
  padding: 0.56rem 0.6rem;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 14px 38px rgba(0, 0, 0, 0.22);
}

.dashboard-metric .metric-icon {
  grid-row: 1 / span 3;
  align-self: start;
  margin-top: 0.08rem;
  border-radius: 0.58rem;
  background: rgb(from var(--brand-soft) r g b / 0.08);
}

.dashboard-metric .metric-label,
.dashboard-metric strong,
.dashboard-metric small {
  grid-column: 2;
}

.dashboard-metric .metric-label {
  color: rgba(247, 244, 235, 0.72);
  font-size: 0.64rem;
}

.dashboard-metric strong {
  margin-top: 0.06rem;
  font-size: clamp(1.28rem, 3.8vw, 1.9rem);
}

.dashboard-metric small {
  max-width: 100%;
  color: rgba(247, 244, 235, 0.72);
}

.dashboard-panel {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.018));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 16px 44px rgba(0, 0, 0, 0.2);
}

/* [40.3 A] NEUTRO, como no sino e na tela de Pendências — o mesmo aviso
   aparece nos três lugares e agora tem o mesmo quadradinho nos três. As
   quatro cores por tom (is-danger / is-info / is-gold / is-petroleo) saíram:
   o `tone` que as escolhia era inventado por esta tela, e saiu com o selo de
   prioridade. A cor mora no FATO ([40.3 B]). */
.dashboard-pending-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid var(--borda);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.045);
  color: #8A8378;
}

.dashboard-pending-icon svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
}

.dashboard-pending-item {
  min-height: 2.92rem;
}

.dashboard-pending-actions {
  gap: 0.28rem;
}

.dashboard-agenda-time {
  font-size: 0.78rem;
}

.weekly-bar i {
  transition: height 160ms ease, opacity 160ms ease;
}

.weekly-bar.is-empty i {
  height: 0.14rem;
  min-height: 0.14rem;
  border-radius: 999px;
  opacity: 0.44;
  background: rgb(from var(--brand-soft) r g b / 0.38);
  box-shadow: none;
}

@media (max-width: 57.99rem) {
  .dashboard-home {
    gap: 0.46rem;
  }

  .dashboard-hero h3 {
    font-size: clamp(1.42rem, 8vw, 1.82rem);
  }

  .dashboard-hero p {
    font-size: 0.75rem;
  }

  .dashboard-hero .primary-action {
    min-height: 2.18rem;
    font-size: 0.78rem;
  }

  .dashboard-metrics {
    gap: 0.36rem;
  }

  .dashboard-metric {
    min-height: 4.72rem;
    padding: 0.44rem 0.48rem;
    gap: 0.02rem 0.38rem;
  }

  .dashboard-metric .metric-icon {
    width: 1.14rem;
    height: 1.14rem;
    border-radius: 0.44rem;
  }

  .dashboard-metric .metric-icon svg {
    width: 0.92rem;
    height: 0.92rem;
  }

  .dashboard-metric .metric-label {
    font-size: 0.58rem;
  }

  .dashboard-metric strong {
    font-size: clamp(1.2rem, 7.8vw, 1.48rem);
  }

  .dashboard-metric small {
    font-size: 0.55rem;
  }

  .dashboard-panel {
    padding: 0.48rem;
    gap: 0.38rem;
  }

  .dashboard-panel .section-title h3 {
    font-size: 0.94rem;
  }

  .dashboard-panel .section-title .small-text {
    font-size: 0.62rem;
  }

  /* [40.3 A] 34px também aqui: o tamanho do quadradinho do aviso é um só. */
  .dashboard-pending-icon {
    width: 34px;
    height: 34px;
  }

  .dashboard-pending-icon svg {
    width: 16px;
    height: 16px;
  }

  .dashboard-pending-item {
    min-height: 2.72rem;
    padding: 0.38rem 0.42rem;
  }

  .dashboard-pending-item .entity-main strong {
    font-size: 0.75rem;
  }

  .dashboard-pending-item .entity-main span,
  .dashboard-pending-item .entity-main small {
    font-size: 0.6rem;
  }

  .dashboard-pending-actions .badge {
    min-height: 1.45rem;
    padding: 0.22rem 0.36rem;
    font-size: 0.56rem;
  }

  .dashboard-pending-actions .mini-button {
    min-height: 1.52rem;
    padding: 0.24rem 0.38rem;
    font-size: 0.58rem;
  }

  .dashboard-agenda-item {
    min-height: 2.72rem;
    padding: 0.38rem 0.42rem;
  }

  .weekly-bars {
    min-height: 3.45rem;
  }

  .weekly-bar {
    height: 2.92rem;
  }
}

/* Revisão visual global v39 - compactação premium Elite AS */
.content-stack,
.students-workspace,
.student-page,
.agenda-workspace,
.patterns-workspace,
.updates-workspace,
.contracts-workspace,
.finance-workspace,
.diet-workspace {
  gap: 0.72rem !important;
  max-width: 55.5rem;
  margin-inline: auto;
}

.manager-workspace,
.student-workspace {
  padding-bottom: calc(6.7rem + var(--safe-bottom)) !important;
}

.manager-workspace .workspace-layout,
.student-workspace .workspace-layout {
  padding-bottom: calc(1.1rem + var(--safe-bottom));
}

.manager-header,
.student-header {
  min-height: 4.4rem;
  border-bottom-color: rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(116deg, rgba(255, 255, 255, 0.055) 0 31%, transparent 31%),
    rgba(3, 3, 3, 0.94);
}

.manager-header .brand-logo,
.student-header .brand-logo {
  width: 4.15rem;
  height: 2.35rem;
  border-radius: 0.85rem;
}

.manager-header .brand-inline h2,
.student-header .brand-inline h2 {
  font-size: clamp(1.14rem, 4.3vw, 1.62rem);
  letter-spacing: 0;
}

.manager-header .brand-inline .manager-subtitle,
.student-header .brand-inline .manager-subtitle {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
}

.manager-header .avatar-button,
.student-header .avatar-button {
  width: 2.52rem;
  height: 2.52rem;
  border-color: rgb(from var(--brand-soft) r g b / 0.72);
  box-shadow: none;
}

.panel,
.contracts-list-panel,
.updates-filter-panel,
.updates-list-panel,
.patterns-toolbar,
.patterns-list-panel,
.diet-toolbar,
.diet-list-panel,
.diet-insights-panel,
.finance-toolbar,
.finance-month-panel,
.finance-list-panel,
.finance-insights-panel,
.student-search-panel,
.students-list-panel,
.agenda-control-panel,
.agenda-calendar-panel,
.agenda-day-panel {
  border: 1px solid rgba(255, 255, 255, 0.105);
  border-radius: 0.9rem;
  background:
    linear-gradient(145deg, var(--borda), rgba(255, 255, 255, 0.02)),
    rgba(10, 10, 10, 0.9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045), 0 1rem 2.2rem rgba(0, 0, 0, 0.18);
}

.panel,
.contracts-list-panel,
.updates-filter-panel,
.updates-list-panel,
.patterns-toolbar,
.patterns-list-panel,
.diet-toolbar,
.diet-list-panel,
.diet-insights-panel,
.finance-toolbar,
.finance-month-panel,
.finance-list-panel,
.finance-insights-panel,
.students-list-panel,
.agenda-control-panel,
.agenda-calendar-panel,
.agenda-day-panel {
  padding: 0.72rem;
}

.page-head,
.dashboard-hero,
.students-hero,
.student-profile-topbar,
.agenda-hero,
.patterns-hero,
.updates-hero,
.contracts-hero,
.finance-hero,
.diet-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 0.78rem;
  padding: 0.12rem 0 0;
}

.page-head h3,
.dashboard-hero h3,
.students-hero h3,
.student-profile-topbar h3,
.agenda-hero h3,
.patterns-hero h3,
.patterns-hero-text h3,
.updates-hero h3,
.contracts-hero h3,
.finance-hero h3,
.diet-hero h3,
.reports-hero h3 {
  margin: 0.12rem 0 0;
  font-size: var(--t-h1);
  font-weight: var(--t-h1-w);
  line-height: 1;
  letter-spacing: 0;
}

.page-head p,
.dashboard-hero p,
.students-hero p,
.student-profile-topbar p,
.agenda-hero p,
.patterns-hero p,
.patterns-hero-text p,
.updates-hero p,
.contracts-hero p,
.finance-hero p,
.diet-hero p,
.reports-hero p {
  margin: 0.28rem 0 0;
  color: rgba(247, 244, 235, 0.64);
  font-size: var(--t-sub);
  line-height: var(--t-sub-lh);
}

.primary-action,
.secondary-action,
.danger-action,
.mini-button,
.diet-primary-action,
.diet-secondary-action,
.finance-primary-action,
.finance-secondary-action,
.contract-secondary-action {
  border-radius: 0.78rem;
  letter-spacing: 0;
}

.primary-action,
.dashboard-hero .primary-action,
.students-hero .primary-action,
.agenda-hero .primary-action,
.patterns-hero .primary-action,
.finance-hero .primary-action,
.diet-hero .primary-action {
  min-height: 2.58rem;
  padding-inline: 0.95rem;
  background: var(--brand);
  color: var(--brand-ink);
  box-shadow: none;
}

.mini-button {
  min-height: 2.75rem;
  padding: 0.34rem 0.58rem;
  font-size: 0.72rem;
  font-weight: 800;
}

.section-title {
  gap: 0.55rem;
  align-items: center;
}

.section-title h3 {
  font-size: var(--t-section);
  font-weight: var(--t-section-w);
  line-height: 1.08;
}

.section-title .small-text {
  font-size: var(--t-label);
  line-height: 1.25;
}

.badge {
  min-height: 1.58rem;
  padding: 0.24rem 0.48rem;
  font-size: var(--t-label);
  font-weight: var(--t-label-w);
  line-height: 1;
}

.empty-state {
  min-height: auto;
  gap: 0.2rem;
  padding: 0.76rem;
  border-radius: 0.78rem;
}

.empty-state strong {
  font-size: 0.9rem;
}

.empty-state span {
  font-size: 0.73rem;
}

.metric-grid,
.dashboard-metrics,
.patterns-summary-grid,
.updates-summary-grid,
.contracts-summary-grid,
.finance-summary-grid,
.diet-summary-grid,
.student-summary-grid {
  gap: 0.55rem;
}

.dashboard-metrics {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.dashboard-metrics .dashboard-metric:nth-child(-n + 3) {
  grid-column: span 2;
}

.dashboard-metrics .dashboard-metric:nth-child(n + 4) {
  grid-column: span 3;
}

.dashboard-metric,
.pattern-summary-card,
.update-summary-card,
.contract-summary-card,
.finance-summary-card,
.diet-summary-card,
.student-summary-card,
.profile-card {
  min-height: 5.45rem;
  padding: 0.62rem;
  border-radius: 0.82rem;
}

.pattern-summary-card,
.update-summary-card,
.contract-summary-card,
.finance-summary-card,
.diet-summary-card {
  grid-template-columns: auto minmax(0, 1fr);
  align-content: center;
  gap: 0.05rem 0.55rem;
}

.pattern-summary-icon,
.update-summary-icon,
.contract-summary-icon,
.finance-summary-icon,
.diet-summary-icon,
.profile-card-icon {
  width: 1.72rem;
  height: 1.72rem;
}

.pattern-summary-icon svg,
.update-summary-icon svg,
.contract-summary-icon svg,
.finance-summary-icon svg,
.diet-summary-icon svg,
.profile-card-icon svg {
  width: 1.22rem;
  height: 1.22rem;
}

.dashboard-metric .metric-label,
.pattern-summary-card > span:not(.pattern-summary-icon),
.update-summary-card > span:not(.update-summary-icon),
.contract-summary-card > span:not(.contract-summary-icon),
.finance-summary-card > span:not(.finance-summary-icon),
.diet-summary-card > span:not(.diet-summary-icon),
.profile-card span {
  color: rgba(247, 244, 235, 0.7);
  font-size: 0.68rem;
  line-height: 1.16;
}

.dashboard-metric strong,
.pattern-summary-card strong,
.update-summary-card strong,
.contract-summary-card strong,
.finance-summary-card strong,
.diet-summary-card strong,
.profile-card strong {
  font-size: var(--t-num-md);
  font-weight: var(--t-num-w);
  line-height: 0.98;
}

.dashboard-metric small,
.pattern-summary-card small,
.update-summary-card small,
.contract-summary-card small,
.finance-summary-card small,
.diet-summary-card small,
.profile-card small {
  font-size: 0.64rem;
  line-height: 1.2;
}

.toolbar input,
.toolbar select,
.student-search-field,
.student-filter,
.pattern-search-field,
.pattern-filter,
.update-filter,
.finance-search-field,
.finance-filter,
.diet-search-field,
.diet-filter {
  min-height: 3.05rem;
  border-color: rgba(255, 255, 255, 0.105);
  border-radius: 0.82rem;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.018)),
    rgba(8, 8, 8, 0.9);
}

.toolbar input,
.toolbar select,
.pattern-search-field input,
.update-filter input,
.finance-search-field input,
.diet-search-field input,
.student-search-field input,
.pattern-filter select,
.update-filter select,
.finance-filter select,
.diet-filter select,
.student-filter select {
  color: var(--ink);
  background: transparent;
}

.student-filter-grid,
.pattern-filter-grid,
.update-filter-grid {
  gap: 0.52rem;
}

.students-list-panel,
.patterns-list-panel,
.updates-list-panel,
.contracts-list-panel,
.finance-list-panel,
.diet-list-panel {
  gap: 0.62rem;
}

.student-card-list,
.pattern-card-list,
.update-card-list,
.contract-list,
.diet-plan-list,
.entity-list {
  gap: 0.55rem;
}

.student-card,
.pattern-card,
.update-card,
.contract-card,
.finance-record-card,
.diet-plan-card,
.library-row {
  border-radius: 0.88rem;
}

.student-card,
.pattern-card,
.update-card,
.contract-card,
.finance-record-card,
.diet-plan-card,
.library-row {
  padding: 0.68rem;
}

.student-card .entity-avatar,
.student-profile-hero .entity-avatar,
.contract-card .entity-avatar,
.finance-record-card .entity-avatar,
.diet-plan-head .entity-avatar,
.update-card .entity-avatar {
  width: 3.55rem;
  height: 3.55rem;
  font-size: 1rem;
}

.student-card-main > strong,
.pattern-card-title strong,
.contract-card-main strong,
.diet-plan-title strong,
.update-card-head strong {
  font-size: clamp(1rem, 3.6vw, 1.22rem);
  line-height: 1.08;
}

.student-card-info,
.pattern-info-grid,
.diet-plan-grid,
.student-profile-hero .student-hero-details {
  gap: 0.5rem;
}

.student-card-info article,
.pattern-info-grid article,
.diet-plan-grid article,
.student-profile-hero .student-hero-details article {
  min-width: 0;
}

.student-card-actions,
.pattern-card-actions,
.diet-plan-actions,
.contract-card-actions,
.finance-record-actions {
  gap: 0.5rem;
}

.student-card-actions .secondary-action,
.pattern-card-actions .secondary-action,
.pattern-card-actions .primary-action,
.diet-primary-action,
.diet-secondary-action,
.finance-primary-action,
.finance-secondary-action {
  min-height: 2.75rem;
  font-size: 0.76rem;
}

.student-profile-hero {
  padding: 0.78rem;
  border-radius: 0.92rem;
}

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

.student-profile-tabs {
  min-height: 2.65rem;
  padding: 0.24rem;
  border-radius: 0.78rem;
}

.student-profile-tabs button {
  min-height: 2.75rem;
  padding-inline: 0.6rem;
  font-size: 0.74rem;
}

.profile-tab-panel {
  gap: 0.65rem;
}

.agenda-view-tabs {
  min-height: 2.7rem;
}

.agenda-view-tabs button {
  min-height: 2.75rem;
  font-size: 0.86rem;
}

.agenda-period-nav {
  min-height: 2.85rem;
  border-radius: 0.78rem;
}

.agenda-week-board {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.agenda-week-grid {
  min-width: 46rem;
}

.agenda-week-day,
.agenda-hour-label,
.agenda-week-slot {
  min-height: 2.7rem;
}

.agenda-event {
  padding: 0.28rem;
  border-radius: 0.42rem;
  font-size: 0.66rem;
  line-height: 1.12;
}

.agenda-list .agenda-item,
.agenda-item {
  min-height: 3.35rem;
  padding: 0.48rem 0.55rem;
}

.update-card {
  gap: 0.62rem;
}

.update-photo-grid {
  gap: 0.5rem;
}

.update-photo-frame {
  min-height: 5.4rem;
  border-radius: 0.72rem;
}

.finance-month-panel {
  gap: 0.62rem;
}

.finance-record-card {
  min-height: 3.7rem;
}

#managerBottomNav,
#studentBottomNav,
.bottom-nav {
  left: max(0.72rem, env(safe-area-inset-left, 0px));
  right: max(0.72rem, env(safe-area-inset-right, 0px));
  bottom: calc(0.58rem + var(--safe-bottom));
  height: 4.8rem;
  max-width: 55rem;
  margin-inline: auto;
  padding: 0.3rem;
  border-radius: 1rem;
  grid-auto-flow: initial;
  grid-auto-columns: initial;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  overflow: hidden;
}

.nav-button {
  min-width: 0;
  min-height: 4.05rem;
  padding: 0.28rem 0.2rem;
  border-radius: 0.85rem;
  font-size: 0.7rem;
  gap: 0.22rem;
}

.nav-button svg {
  width: 1.42rem;
  height: 1.42rem;
}

.nav-button.is-active {
  box-shadow: none;
}

@media (min-width: 58rem) {
  .dashboard-main-grid,
  .profile-overview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .finance-month-panel {
    grid-template-columns: minmax(0, 1.35fr) minmax(15rem, 0.65fr);
  }
}

@media (max-width: 57.99rem) {
  .content-stack,
  .students-workspace,
  .student-page,
  .agenda-workspace,
  .patterns-workspace,
  .updates-workspace,
  .contracts-workspace,
  .finance-workspace,
  .diet-workspace {
    gap: 0.58rem !important;
  }

  .manager-workspace .workspace-layout,
  .student-workspace .workspace-layout {
    padding: 0.62rem var(--goteira, 20px) calc(0.9rem + var(--safe-bottom));
  }

  .manager-header,
  .student-header {
    min-height: 4.1rem;
    padding-inline: 0.68rem;
  }

  .manager-header .brand-logo,
  .student-header .brand-logo {
    width: 3.55rem;
    height: 2.15rem;
  }

  .manager-header .brand-inline h2,
  .student-header .brand-inline h2 {
    font-size: clamp(1.05rem, 5.2vw, 1.34rem);
  }

  .manager-header .avatar-button,
  .student-header .avatar-button {
    width: 2.22rem;
    height: 2.22rem;
  }

  .page-head,
  .dashboard-hero,
  .students-hero,
  .student-profile-topbar,
  .agenda-hero,
  .patterns-hero,
  .updates-hero,
  .contracts-hero,
  .finance-hero,
  .diet-hero {
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 0.48rem;
  }

  .page-actions,
  .page-head .page-actions,
  .dashboard-hero .primary-action,
  .students-hero .primary-action,
  .student-profile-top-actions,
  .agenda-hero .primary-action,
  .patterns-hero .primary-action,
  .finance-hero .primary-action,
  .diet-hero .primary-action {
    width: 100%;
  }

  .page-head h3,
  .dashboard-hero h3,
  .students-hero h3,
  .student-profile-topbar h3,
  .agenda-hero h3,
  .patterns-hero h3,
  .patterns-hero-text h3,
  .updates-hero h3,
  .contracts-hero h3,
  .finance-hero h3,
  .diet-hero h3,
  .reports-hero h3 {
    font-size: var(--t-h1);
  }

  .dashboard-metrics,
  .patterns-summary-grid,
  .updates-summary-grid,
  .contracts-summary-grid,
  .finance-summary-grid,
  .diet-summary-grid,
  .student-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.42rem;
  }

  .dashboard-metrics .dashboard-metric:nth-child(n) {
    grid-column: auto;
  }

  .dashboard-metric,
  .pattern-summary-card,
  .update-summary-card,
  .contract-summary-card,
  .finance-summary-card,
  .diet-summary-card,
  .student-summary-card,
  .profile-card {
    min-height: 4.72rem;
    padding: 0.5rem;
  }

  .dashboard-metric .metric-icon,
  .pattern-summary-icon,
  .update-summary-icon,
  .contract-summary-icon,
  .finance-summary-icon,
  .diet-summary-icon,
  .profile-card-icon {
    width: 1.36rem;
    height: 1.36rem;
  }

  .dashboard-metric .metric-icon svg,
  .pattern-summary-icon svg,
  .update-summary-icon svg,
  .contract-summary-icon svg,
  .finance-summary-icon svg,
  .diet-summary-icon svg,
  .profile-card-icon svg {
    width: 1rem;
    height: 1rem;
  }

  .dashboard-metric strong,
  .pattern-summary-card strong,
  .update-summary-card strong,
  .contract-summary-card strong,
  .finance-summary-card strong,
  .diet-summary-card strong,
  .profile-card strong {
    font-size: clamp(1.18rem, 6.6vw, 1.58rem);
  }

  .dashboard-metric small,
  .pattern-summary-card small,
  .update-summary-card small,
  .contract-summary-card small,
  .finance-summary-card small,
  .diet-summary-card small,
  .profile-card small {
    font-size: 0.58rem;
  }

  .student-filter-grid,
  .pattern-filter-grid,
  .update-filter-grid,
  .diet-plan-grid,
  .student-card-info {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .finance-toolbar,
  .diet-toolbar,
  .patterns-toolbar {
    grid-template-columns: 1fr;
  }

  .student-card,
  .pattern-card,
  .update-card,
  .contract-card,
  .finance-record-card,
  .diet-plan-card,
  .library-row {
    padding: 0.58rem;
  }

  .student-card .entity-avatar,
  .student-profile-hero .entity-avatar,
  .contract-card .entity-avatar,
  .finance-record-card .entity-avatar,
  .diet-plan-head .entity-avatar,
  .update-card .entity-avatar {
    width: 3rem;
    height: 3rem;
  }

  .student-card-actions,
  .pattern-card-actions,
  .diet-plan-actions,
  .contract-card-actions,
  .finance-record-actions {
    grid-template-columns: 1fr 1fr;
  }

  .weekly-bars {
    min-height: 3.35rem;
  }

  .weekly-bar {
    height: 2.9rem;
  }
}

@media (max-width: 28rem) {
  .manager-workspace .workspace-layout,
  .student-workspace .workspace-layout {
    padding-inline: 0.5rem;
  }

  .student-filter-grid,
  .pattern-filter-grid,
  .update-filter-grid,
  .diet-plan-grid,
  .student-card-info,
  .diet-plan-actions,
  .student-card-actions,
  .pattern-card-actions,
  .contract-card-actions,
  .finance-record-actions {
    grid-template-columns: 1fr;
  }

  .dashboard-metrics,
  .patterns-summary-grid,
  .updates-summary-grid,
  .contracts-summary-grid,
  .finance-summary-grid,
  .diet-summary-grid,
  .student-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .nav-button {
    font-size: 0.62rem;
  }

  .nav-button svg {
    width: 1.22rem;
    height: 1.22rem;
  }
}

/* Dashboard premium refactor v41 */
:root {
  --elite-bg: #050505;
  --elite-surface: rgba(255, 255, 255, 0.055);
  --elite-border: rgba(255, 255, 255, 0.105);
  --elite-gold:   var(--brand);
  --elite-gold-2: var(--brand);
  --elite-gold-3: var(--brand-strong);
  --elite-ink: #f4f1ea;
  --elite-muted: #aaa49a;
  --bottom-nav-height: 4.55rem;
}

.manager-workspace {
  /* Fundo sólido, sem a faixa/vinco diagonal no canto superior esquerdo. */
  background: var(--elite-bg) !important;
}

.manager-header {
  min-height: 5.85rem !important;
  padding: 1.05rem clamp(1rem, 4vw, 2rem) 0.95rem !important;
  background:
    linear-gradient(116deg, rgba(255, 255, 255, 0.07) 0 30%, transparent 30%),
    rgba(2, 2, 2, 0.96) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09) !important;
}

.manager-header .menu-trigger {
  min-width: 44px;
  min-height: 44px;
  color: var(--elite-ink);
}

.manager-header .brand-inline {
  gap: 0.72rem;
  min-width: 0;
}

.manager-header .brand-inline h2 {
  color: #f7f4ed;
  font-size: clamp(1.35rem, 5vw, 1.85rem) !important;
  font-weight: 780;
  line-height: 1;
}

.manager-header .manager-subtitle {
  display: inline-flex;
  gap: 0.28rem;
  align-items: center;
  margin-top: 0.18rem;
  color: var(--elite-gold) !important;
  font-size: 0.72rem !important;
  font-weight: 850;
  letter-spacing: 0.12em !important;
}

.manager-header .manager-subtitle strong {
  color: rgba(247, 244, 237, 0.72);
  font-weight: 760;
  letter-spacing: 0.02em;
}

.manager-header .header-actions {
  gap: 0.52rem;
}

.manager-header .header-actions .pill-button {
  display: none !important;
}

.manager-header .notification-button {
  position: relative;
  width: 2.75rem;
  height: 2.75rem;
  color: #f7f4ed;
}

.manager-header .notification-button::after {
  content: "";
  position: absolute;
  top: 0.54rem;
  right: 0.54rem;
  width: 0.54rem;
  height: 0.54rem;
  border-radius: 999px;
  background: var(--elite-gold);
  box-shadow: none;
}

.manager-header .avatar-button {
  width: 2.85rem !important;
  height: 2.85rem !important;
  border: 1px solid rgba(var(--brand-rgb), 0.72) !important;
  color: var(--brand);
  font-weight: 860;
}

/* Header do aluno — mesma régua visual do gestor (uma linha) */







@media (max-width: 28rem) {
      }

.dashboard-home {
  max-width: 54.5rem !important;
  gap: 0.78rem !important;
  padding-bottom: calc(var(--bottom-nav-height) + 1.65rem + var(--safe-bottom));
}

.dashboard-hero {
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: end !important;
  gap: 0.8rem !important;
  padding-top: 0.2rem !important;
}

.dashboard-hero .eyebrow {
  color: var(--elite-gold);
  font-size: 0.72rem;
  font-weight: 880;
  letter-spacing: 0.13em;
}

.dashboard-hero h3 {
  margin-top: 0.34rem !important;
  color: var(--elite-ink);
  font-size: var(--t-h1) !important;
  font-weight: var(--t-h1-w) !important;
  line-height: 1 !important;
}

.dashboard-hero p {
  max-width: 30rem;
  color: rgba(244, 241, 234, 0.68) !important;
  font-size: var(--t-sub) !important;
}

.dashboard-hero .primary-action {
  min-height: 3rem !important;
  padding: 0.66rem 1.05rem !important;
  border-radius: 0.84rem !important;
  font-size: 0.9rem !important;
  font-weight: 830;
  white-space: nowrap;
  background: var(--brand) !important;
  box-shadow: none !important;
}

.dashboard-hero .primary-action svg {
  width: 1.2rem;
  height: 1.2rem;
}

.dashboard-metrics {
  gap: 0.62rem !important;
}

.dashboard-metric {
  position: relative;
  isolation: isolate;
  min-height: 6.1rem !important;
  padding: 0.7rem 0.72rem 0.68rem !important;
  border: 1px solid var(--elite-border) !important;
  border-radius: 0.9rem !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.064), rgba(255, 255, 255, 0.018)),
    rgba(9, 9, 9, 0.9) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.052), 0 0.9rem 1.8rem rgba(0, 0, 0, 0.2) !important;
}

.dashboard-metric::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: -1;
  width: 3.1rem;
  height: 3.1rem;
  border-radius: 999px;
  background: rgba(var(--brand-rgb), 0.055);
}

.dashboard-metric .metric-icon {
  width: 1.45rem !important;
  height: 1.45rem !important;
  margin-bottom: 0.28rem;
  color: var(--elite-gold);
}

.dashboard-metric .metric-icon svg {
  width: 1.12rem !important;
  height: 1.12rem !important;
}

.dashboard-metric .metric-label {
  color: rgba(244, 241, 234, 0.73) !important;
  font-size: 0.72rem !important;
  font-weight: 770 !important;
  line-height: 1.15 !important;
}

.dashboard-metric strong {
  margin-top: 0.18rem;
  color: #fffaf1;
  font-size: var(--t-num-md) !important;
  font-weight: var(--t-num-w) !important;
  line-height: 0.95 !important;
}

.dashboard-metric small {
  margin-top: 0.2rem;
  color: rgba(244, 241, 234, 0.72) !important;
  font-size: 0.66rem !important;
  line-height: 1.16 !important;
}

.dashboard-metric.is-success .metric-icon,
.dashboard-metric.is-success small {
  color: #45d66b !important;
}

.dashboard-metric.is-warning small {
  color: #ffbf3f !important;
}

.dashboard-panel {
  padding: 0.72rem !important;
  border-radius: 0.92rem !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.058), rgba(255, 255, 255, 0.018)),
    rgba(9, 9, 9, 0.92) !important;
}

.dashboard-panel .section-title {
  margin-bottom: 0.54rem;
}

.dashboard-panel .section-title h3 {
  font-size: clamp(1.02rem, 4vw, 1.28rem) !important;
  font-weight: 760 !important;
}

.dashboard-panel .section-title .small-text {
  font-size: 0.68rem !important;
}

.dashboard-pending-list,
.dashboard-agenda-list {
  gap: 0.44rem !important;
}

.dashboard-pending-item {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.54rem !important;
  align-items: center !important;
  min-height: 3.75rem !important;
  padding: 0.52rem !important;
  border-radius: 0.76rem !important;
}

/* [40.3 A] 34px também aqui. */
.dashboard-pending-icon {
  width: 34px !important;
  height: 34px !important;
}

.dashboard-pending-icon svg {
  width: 16px !important;
  height: 16px !important;
}

.dashboard-pending-item .entity-main strong {
  font-size: 0.82rem !important;
  line-height: 1.15 !important;
}

.dashboard-pending-item .entity-main span,
.dashboard-pending-item .entity-main small {
  font-size: 0.68rem !important;
  line-height: 1.18 !important;
}

.dashboard-pending-actions {
  display: flex;
  gap: 0.34rem !important;
  align-items: center;
}

.dashboard-pending-actions .mini-button,
.dashboard-pending-actions .badge {
  min-height: 2.75rem !important;
  padding: 0.25rem 0.46rem !important;
  font-size: 0.62rem !important;
}

.dashboard-main-grid {
  gap: 0.7rem !important;
}

.dashboard-agenda-item {
  grid-template-columns: 3.1rem minmax(0, 1fr) auto !important;
  min-height: 3.2rem !important;
  padding: 0.48rem 0.52rem !important;
  gap: 0.48rem !important;
}

.dashboard-agenda-time {
  color: var(--elite-gold) !important;
  font-size: 0.8rem !important;
  font-weight: 820 !important;
}

.dashboard-agenda-main strong {
  font-size: 0.8rem !important;
  line-height: 1.14 !important;
}

.dashboard-agenda-main span,
.dashboard-agenda-main small {
  font-size: 0.66rem !important;
  line-height: 1.16 !important;
}

.dashboard-agenda-main small {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.dashboard-agenda-status {
  display: none !important;
}

#managerBottomNav,
#studentBottomNav,
.bottom-nav {
  bottom: calc(0.6rem + var(--safe-bottom)) !important;
  height: var(--bottom-nav-height) !important;
  padding: 0.26rem !important;
  border-radius: 1rem !important;
}

.nav-button {
  min-height: 3.72rem !important;
  border-radius: 0.84rem !important;
  font-size: 0.67rem !important;
}

.nav-button svg {
  width: 1.28rem !important;
  height: 1.28rem !important;
}

.nav-button.is-active {
  background:
    rgba(var(--brand-rgb), 0.075) !important;
}

@media (max-width: 32.5rem) {
  /* [12.1] A GOTEIRA DO PROFESSOR É A MESMA LEI DO APP INTEIRO.
     Esta regra é a que vence em 390, e era ela que cravava 0.64rem (10,24px)
     — a razão de "tudo colado no vidro" do lado do professor. O número à mão
     saiu; quem manda é `--goteira`, do [E0]. */
  .manager-workspace .workspace-layout {
    padding: 0.62rem var(--goteira, 20px) calc(var(--bottom-nav-height) + 1.15rem + var(--safe-bottom)) !important;
  }

  .manager-header {
    min-height: 5.15rem !important;
    padding: 0.78rem 0.72rem 0.72rem !important;
  }

  .manager-header .menu-trigger,
  .manager-header .notification-button {
    min-width: 44px;
    min-height: 44px;
  }

  .manager-header .brand-inline {
    gap: 0.5rem;
  }

  .manager-header .brand-inline h2 {
    font-size: clamp(1.12rem, 5vw, 1.42rem) !important;
  }

  .manager-header .manager-subtitle {
    font-size: 0.61rem !important;
    letter-spacing: 0.1em !important;
  }

  .manager-header .avatar-button {
    width: 2.28rem !important;
    height: 2.28rem !important;
    font-size: 0.78rem;
  }

  .dashboard-hero {
    grid-template-columns: 1fr !important;
    gap: 0.55rem !important;
  }

  .dashboard-hero h3 {
    font-size: clamp(1.92rem, 10vw, 2.38rem) !important;
  }

  .dashboard-hero .primary-action {
    width: 100%;
    min-height: 2.92rem !important;
  }

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

  .dashboard-metric {
    min-height: 5.9rem !important;
    padding: 0.66rem !important;
  }

  .dashboard-metric:nth-child(n) {
    grid-column: auto !important;
  }

  .dashboard-pending-item {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .dashboard-pending-actions {
    grid-column: 2;
    justify-content: flex-start;
  }

  .dashboard-agenda-item {
    grid-template-columns: 3rem minmax(0, 1fr) auto !important;
  }

  .dashboard-agenda-actions .mini-button {
    min-width: 0;
    padding-inline: 0.46rem !important;
  }

  #managerBottomNav,
  #studentBottomNav,
  .bottom-nav {
    right: max(0.74rem, env(safe-area-inset-right, 0px)) !important;
    left: max(0.74rem, env(safe-area-inset-left, 0px)) !important;
    height: 4.42rem !important;
  }

  .nav-button {
    min-height: 3.58rem !important;
    font-size: 0.62rem !important;
  }
}

@media (min-width: 58rem) {
  .dashboard-home {
    padding-top: 0.35rem;
  }

  .dashboard-hero {
    padding-top: 0.35rem !important;
  }

  .dashboard-metric {
    min-height: 6.65rem !important;
  }

  .dashboard-main-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

/* Dashboard density tune v42 */
:root {
  --bottom-nav-height: 4.22rem;
}

.dashboard-home {
  gap: 0.62rem !important;
  padding-bottom: calc(var(--bottom-nav-height) + 1.05rem + var(--safe-bottom)) !important;
}

.dashboard-hero {
  gap: 0.68rem !important;
}

.dashboard-hero .eyebrow {
  text-transform: uppercase;
}

.dashboard-hero h3 {
  margin-top: 0.22rem !important;
  font-size: var(--t-h1) !important;
  font-weight: var(--t-h1-w) !important;
}

.dashboard-hero p {
  margin-top: 0.28rem !important;
  font-size: var(--t-sub) !important;
  line-height: var(--t-sub-lh) !important;
}

.dashboard-hero .primary-action {
  min-height: 2.75rem !important;
  padding: 0.55rem 0.88rem !important;
  border-radius: 0.78rem !important;
  font-size: 0.8rem !important;
}

.dashboard-metrics {
  gap: 0.5rem !important;
}

.dashboard-metric {
  min-height: 5.12rem !important;
  padding: 0.5rem 0.54rem 0.48rem !important;
  border-radius: 0.76rem !important;
}

.dashboard-metric::after {
  width: 2.25rem;
  height: 2.25rem;
}

.dashboard-metric .metric-icon {
  width: 1.16rem !important;
  height: 1.16rem !important;
  margin-bottom: 0.16rem !important;
}

.dashboard-metric .metric-icon svg {
  width: 0.94rem !important;
  height: 0.94rem !important;
}

.dashboard-metric .metric-label {
  font-size: 0.63rem !important;
  line-height: 1.1 !important;
}

.dashboard-metric strong {
  margin-top: 0.12rem !important;
  font-size: var(--t-num-md) !important;
  font-weight: var(--t-num-w) !important;
}

.dashboard-metric small {
  margin-top: 0.14rem !important;
  font-size: 0.58rem !important;
  line-height: 1.1 !important;
}

.dashboard-panel {
  padding: 0.56rem !important;
  border-radius: 0.82rem !important;
}

.dashboard-panel .section-title {
  margin-bottom: 0.36rem !important;
  gap: 0.5rem !important;
}

.dashboard-panel .section-title h3 {
  font-size: var(--t-section) !important;
  font-weight: var(--t-section-w) !important;
  line-height: 1.1 !important;
}

.dashboard-panel .section-title .small-text {
  font-size: 0.6rem !important;
  line-height: 1.14 !important;
}

.dashboard-pending-list,
.dashboard-agenda-list {
  gap: 0.32rem !important;
}

.dashboard-pending-item {
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  min-height: 3.02rem !important;
  padding: 0.36rem !important;
  gap: 0.42rem !important;
  border-radius: 0.66rem !important;
}

/* [40.3 A] 34px também aqui. */
.dashboard-pending-icon {
  width: 34px !important;
  height: 34px !important;
}

.dashboard-pending-icon svg {
  width: 16px !important;
  height: 16px !important;
}

.dashboard-pending-item .entity-main {
  min-width: 0;
}

.dashboard-pending-item .entity-main strong {
  font-size: 0.72rem !important;
  line-height: 1.08 !important;
}

.dashboard-pending-item .entity-main span,
.dashboard-pending-item .entity-main small {
  display: -webkit-box;
  overflow: hidden;
  font-size: 0.59rem !important;
  line-height: 1.08 !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.dashboard-pending-actions {
  grid-column: auto !important;
  justify-content: flex-end !important;
  align-self: center;
  flex-wrap: nowrap;
}

.dashboard-pending-actions .mini-button {
  min-height: 2.75rem !important;
  max-width: 5.9rem;
  padding: 0.18rem 0.36rem !important;
  overflow: hidden;
  font-size: 0.55rem !important;
  line-height: 1 !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* [21.4] O SELO DE PRIORIDADE NÃO SE CORTA. Ele tinha `max-width: 5.9rem`
   com reticências — e "Média prioridade" (a mais comprida das três palavras:
   Alta / Média / Baixa) não cabe em 5.9rem, então saía cortado nos dois
   tamanhos. O selo mede o que a palavra pede; quem cede é o texto do meio
   da linha (`.entity-main`, que já corta com reticências). */
.dashboard-pending-actions .badge {
  min-height: 1.42rem !important;
  padding: 0.18rem 0.36rem !important;
  font-size: 0.55rem !important;
  line-height: 1 !important;
  white-space: nowrap;
}

.dashboard-main-grid {
  gap: 0.56rem !important;
}

.dashboard-agenda-item {
  min-height: 2.78rem !important;
  padding: 0.36rem 0.42rem !important;
  border-radius: 0.64rem !important;
  grid-template-columns: 2.78rem minmax(0, 1fr) auto !important;
}

.dashboard-agenda-time {
  font-size: 0.72rem !important;
}

.dashboard-agenda-main strong {
  font-size: 0.72rem !important;
}

.dashboard-agenda-main span,
.dashboard-agenda-main small {
  font-size: 0.58rem !important;
}

.dashboard-agenda-actions .mini-button {
  min-height: 1.86rem !important;
  padding: 0.25rem 0.48rem !important;
  font-size: 0.62rem !important;
}

#managerBottomNav,
#studentBottomNav,
.bottom-nav {
  height: var(--bottom-nav-height) !important;
  border-radius: 0.86rem !important;
}

.nav-button {
  min-height: 3.24rem !important;
  border-radius: 0.72rem !important;
  font-size: 0.58rem !important;
}

.nav-button svg {
  width: 1.08rem !important;
  height: 1.08rem !important;
}

@media (max-width: 32.5rem) {
  .manager-workspace .workspace-layout {
    padding: 0.54rem 0.55rem calc(var(--bottom-nav-height) + 0.82rem + var(--safe-bottom)) !important;
  }

  .manager-header {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    min-height: 4.92rem !important;
  }

  .manager-header .header-actions {
    display: flex !important;
    gap: 0.32rem !important;
  }

  .manager-header .notification-button {
    display: grid !important;
    width: 2.75rem !important;
    height: 2.75rem !important;
  }

  .manager-header .notification-button::after {
    top: 0.38rem !important;
    right: 0.38rem !important;
    width: 0.42rem !important;
    height: 0.42rem !important;
  }

  .manager-header .avatar-button {
    width: 2.75rem !important;
    height: 2.75rem !important;
  }

  .dashboard-hero {
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: end !important;
    gap: 0.5rem !important;
  }

  .dashboard-hero .primary-action {
    width: auto !important;
    min-width: 9.2rem;
    min-height: 2.48rem !important;
    padding-inline: 0.68rem !important;
  }

  .dashboard-hero .primary-action span {
    display: inline;
  }

  .dashboard-pending-actions {
    grid-column: auto !important;
  }

  #managerBottomNav,
  #studentBottomNav,
  .bottom-nav {
    height: 4.08rem !important;
    bottom: calc(0.46rem + var(--safe-bottom)) !important;
  }

  .nav-button {
    min-height: 3.12rem !important;
    font-size: 0.56rem !important;
  }
}

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

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

@media (min-width: 46rem) {
  .dashboard-metrics {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }

  .dashboard-metrics .dashboard-metric:nth-child(-n + 3) {
    grid-column: span 2 !important;
  }

  .dashboard-metrics .dashboard-metric:nth-child(n + 4) {
    grid-column: span 3 !important;
  }

  .dashboard-main-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }

  .dashboard-home {
    gap: 0.7rem !important;
  }
}

/* =============================================
   Design System — Classes reutilizáveis globais
   ============================================= */

/* Botão primário de topo — unificado em todas as abas */
.btn-action-header {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: auto !important;
  min-height: 2.8rem;
  padding: 0 1.1rem;
  background: var(--brand);
  color: var(--brand-ink);
  font-weight: 800;
  font-size: clamp(0.82rem, 3vw, 0.92rem);
  border-radius: 0.82rem;
  border: none;
  white-space: nowrap;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: none;
}

.btn-action-header:hover {
  background: var(--brand-strong);
}

.btn-action-header svg {
  width: 1.1rem;
  height: 1.1rem;
  stroke: currentColor;
  fill: none;
  flex-shrink: 0;
}

/* Faixa de métricas em linha horizontal */
.metrics-row {
  display: flex;
  flex-direction: row;
  gap: 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
  scrollbar-width: none;
}

.metrics-row::-webkit-scrollbar {
  display: none;
}

.metrics-row .metric-card {
  flex: 1;
  min-width: 105px;
  padding: 14px;
  background: var(--card);
  border-radius: 14px;
  border: 1px solid var(--borda);
  display: flex;
  flex-direction: column;
  gap: 0;
}

.metrics-row .metric-card.is-success { border-color: rgba(16, 185, 129, 0.25); }
.metrics-row .metric-card.is-warning { border-color: rgba(var(--brand-rgb), 0.25); }
.metrics-row .metric-card.is-danger  { border-color: rgba(239, 68, 68, 0.25); }

.metric-card .mc-label {
  font-size: 11px;
  color: var(--txt2);
  margin-bottom: 6px;
  line-height: 1.3;
}

.metric-card .mc-value {
  font-size: 26px;
  font-weight: 700;
  color: #fff;
  line-height: 1.1;
}

.metric-card .mc-sub {
  font-size: 11px;
  color: var(--txt2);
  margin-top: 4px;
}

.metric-card.is-success .mc-value { color: var(--success); }
.metric-card.is-warning .mc-value { color: var(--dourado); }
.metric-card.is-danger  .mc-value { color: var(--danger); }

/* Linha de busca + filtro inline */
.search-filter-row {
  display: flex;
  gap: 10px;
  align-items: center;
}

.search-filter-row .search-input-wrap {
  flex: 1;
  min-width: 0;
}

.filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 11px 16px;
  white-space: nowrap;
  background: var(--card);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  color: var(--dourado);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
}

.filter-btn:hover {
  background: #222;
  border-color: rgba(var(--brand-rgb), 0.3);
}

.filter-btn svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  flex-shrink: 0;
}

/* ─── Transições e Feedback Tátil ──────────────────────────────── */

/* Remove o flash azul/cinza do tap nativo em mobile */
* {
  -webkit-tap-highlight-color: transparent;
}

/* ── Entrada de views e conteúdo de abas ── */
@keyframes view-enter {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.view.is-entering,
.content-area.is-entering {
  animation: view-enter 200ms ease both;
}

/* ── Modal: fade + scale ── */
@keyframes modal-backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes modal-backdrop-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes modal-panel-in {
  from { opacity: 0; transform: scale(0.95) translateY(6px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes modal-panel-out {
  from { opacity: 1; transform: scale(1) translateY(0); }
  to   { opacity: 0; transform: scale(0.95) translateY(6px); }
}

.modal.is-open .modal-backdrop {
  animation: modal-backdrop-in 200ms ease both;
}

.modal.is-open .modal-panel {
  animation: modal-panel-in 220ms cubic-bezier(0.34, 1.26, 0.64, 1) both;
}

.modal.is-closing .modal-backdrop {
  animation: modal-backdrop-out 160ms ease both;
}

.modal.is-closing .modal-panel {
  animation: modal-panel-out 160ms ease both;
}

/* ── Sheet (install): slide de baixo para cima ── */
@keyframes sheet-panel-in {
  from { opacity: 0.4; transform: translateY(100%); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes sheet-panel-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0.4; transform: translateY(100%); }
}

.install-sheet.is-open .sheet-backdrop {
  animation: modal-backdrop-in 200ms ease both;
}

.install-sheet.is-open .sheet-panel {
  animation: sheet-panel-in 300ms cubic-bezier(0.34, 1.26, 0.64, 1) both;
}

.install-sheet.is-closing .sheet-backdrop {
  animation: modal-backdrop-out 200ms ease both;
}

.install-sheet.is-closing .sheet-panel {
  animation: sheet-panel-out 220ms ease both;
}

/* ── Sheets secundários: slide de baixo para cima ── */
.ag-sheet.is-open .ag-backdrop,
.det-sheet.is-open .det-backdrop,
.workout-sheet.is-open .workout-sheet-backdrop,
.video-modal.is-open .video-modal-backdrop {
  animation: modal-backdrop-in 200ms ease both;
}

.ag-sheet.is-closing .ag-backdrop,
.det-sheet.is-closing .det-backdrop,
.workout-sheet.is-closing .workout-sheet-backdrop,
.video-modal.is-closing .video-modal-backdrop {
  animation: modal-backdrop-out 160ms ease both;
}

.ag-sheet.is-open .ag-panel,
.det-sheet.is-open .det-panel,
.workout-sheet.is-open .workout-sheet-panel,
.video-modal.is-open .video-modal-panel {
  animation: sheet-panel-in 300ms cubic-bezier(0.34, 1.26, 0.64, 1) both;
}

.ag-sheet.is-closing .ag-panel,
.det-sheet.is-closing .det-panel,
.workout-sheet.is-closing .workout-sheet-panel,
.video-modal.is-closing .video-modal-panel {
  animation: sheet-panel-out 160ms ease both;
}

/* ── Thread sheet (tela cheia): slide da direita ── */
@keyframes thread-sheet-in {
  from { opacity: 0; transform: translateX(6%); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes thread-sheet-out {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(6%); }
}

/* ── :active tátil em elementos clicáveis ── */
.primary-action,
.secondary-action,
.danger-action,
.ghost-button,
.pill-button,
.icon-button,
.mini-button,
.nav-button,
.text-action,
.filter-btn,
.entity-row,
.workout-row,
.agenda-item,
.quick-row,
.metric-card,
.library-card {
  transition: transform 100ms ease;
}

.primary-action:active,
.secondary-action:active,
.danger-action:active,
.ghost-button:active,
.pill-button:active,
.icon-button:active,
.mini-button:active,
.nav-button:active,
.text-action:active,
.filter-btn:active,
.entity-row:active,
.workout-row:active,
.agenda-item:active,
.quick-row:active,
.metric-card:active,
.library-card:active {
  transform: scale(0.98);
}

/* ═══════════════════════════════════════════════════════════════
   CORREÇÕES GLOBAIS E DASHBOARD v54
   A1 safe-area header · A2 body gradient · A3 glow/glass
   A4 bottom-nav edge-to-edge · A5 boot splash
   B2-B8 dashboard reestruturado
   ═══════════════════════════════════════════════════════════════ */

/* A1 — Header: safe-area real acima dos elementos clicáveis.
   O respiro do topo = APENAS o safe-area-inset + um respiro fixo enxuto;
   a min-height soma o inset a uma barra compacta (sem o antigo "5rem + inset"
   que criava vácuo morto abaixo do notch). Assim a faixa do topo encosta no
   conteúdo, sem espaço excessivo. O fundo dessa faixa vem do bloco A2. */
/* [27.2] O recuo do topo vem do lugar único (:root): área segura + folga. */
.manager-header,
.student-header {
  padding-top: var(--recuo-topo) !important;
  padding-bottom: var(--respiro) !important;
  min-height: calc(var(--recuo-topo) + 2.75rem + var(--respiro)) !important;
  overflow: visible !important;
}

.menu-trigger,
.notification-button,
.avatar-button,
.icon-button {
  min-width: 44px !important;
  min-height: 44px !important;
}

/* A2 — Fundo sólido, sem gradiente nem vinheta lateral */
body {
  background: var(--bg) !important;
}

body::before {
  display: none !important;
}

.workspace-header,
.manager-header,
.student-header {
  /* Fundo IDÊNTICO ao corpo do app (--bg), sólido e nunca a cor de destaque
     do tema: a faixa do safe-area no topo some visualmente contra o body,
     em qualquer tom/tema escolhido. */
  background: var(--bg) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* A3 — Remover todos os orbs/brilhos/liquid-glass */

/* Orb amarelo e gradiente glass nos metric cards */
.dashboard-metric {
  background: var(--card) !important;
  box-shadow: none !important;
}

.dashboard-metric::after {
  display: none !important;
}

/* Gradiente glass nos painéis do dashboard */
.dashboard-panel {
  background: var(--card) !important;
  box-shadow: none !important;
}

/* Glass em todos os cards gerais */
.panel,
.metric-card,
.entity-row,
.agenda-item,
.workout-row,
.empty-state,
.profile-card,
.toolbar,
.library-card,
.preview-box,
.workout-builder,
.workout-builder-row,
.media-note,
.day-cell,
.segmented,
.rest-banner,
.action-panel {
  background: var(--card) !important;
  box-shadow: none !important;
}

.modal-panel,
.sheet-panel {
  background: rgba(9, 9, 9, 0.98) !important;
  box-shadow: none !important;
}

/* Card do login: fixo Corefy #1A1F27 (combina com o grafite azulado da
   entrada). Fica fora do grupo modal/sheet acima para nao herdar o
   rgba(9,9,9,.98) !important do interior do app. */
.login-card {
  background: #1A1F27 !important;
  box-shadow: none !important;
}

/* Remover box-shadow de glow de elementos gerais */
.contracts-list-panel,
.updates-filter-panel,
.updates-list-panel,
.patterns-toolbar,
.patterns-list-panel,
.diet-toolbar,
.diet-list-panel,
.diet-insights-panel,
.finance-toolbar,
.finance-month-panel,
.finance-list-panel,
.finance-insights-panel,
.student-search-panel,
.students-list-panel,
.agenda-control-panel,
.agenda-calendar-panel,
.agenda-day-panel {
  background: var(--card) !important;
  box-shadow: none !important;
}

/* A4 — Barra inferior: borda até a borda, sólida, sem flutuação */
#managerBottomNav,
#studentBottomNav,
.bottom-nav {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: auto !important;
  max-width: 100% !important;
  margin-inline: 0 !important;
  /* [27.2] a folga acima dos ícones e, abaixo, a folga + a área segura:
     a barra estende o próprio fundo até a borda (lugar único em :root) */
  padding: var(--respiro) 8px var(--recuo-rodape) !important;
  border-radius: 0 !important;
  border: none !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: #111111 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  z-index: 200 !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  overflow: hidden !important;
}

.nav-button {
  min-width: 0 !important;
  min-height: 52px !important;
  padding: 6px 4px !important;
  border-radius: 10px !important;
  font-size: 11px !important;
  gap: 4px !important;
  color: var(--txt2) !important;
  background: transparent !important;
  box-shadow: none !important;
}

.nav-button svg {
  width: 22px !important;
  height: 22px !important;
}

.nav-button.is-active {
  color: var(--dourado) !important;
  background: rgba(var(--brand-rgb), 0.1) !important;
  box-shadow: none !important;
}

/* Padding-bottom do conteúdo para não sobrepor barra ([27.2]: lê o recuo do rodapé) */
.manager-workspace,
.student-workspace {
  padding-bottom: calc(5rem + var(--recuo-rodape)) !important;
}

.manager-workspace .workspace-layout,
.student-workspace .workspace-layout {
  padding-bottom: 0 !important;
}

.dashboard-home {
  padding-bottom: 0 !important;
}

/* B3 — Metric cards: ícone + label na mesma linha, número grande abaixo */
.dashboard-metric {
  display: grid !important;
  grid-template-columns: 1fr !important;
  align-content: start !important;
  gap: 4px !important;
  min-height: 0 !important;
  padding: 14px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
}

.metric-top-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.metric-top-row .metric-icon {
  flex: 0 0 auto !important;
  grid-row: auto !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 6px !important;
  background: rgba(var(--brand-rgb), 0.1) !important;
  color: var(--dourado) !important;
  display: grid !important;
  place-items: center !important;
  margin-top: 0 !important;
  align-self: center !important;
}

.metric-top-row .metric-icon svg {
  width: 14px !important;
  height: 14px !important;
}

.metric-top-row .metric-label {
  color: var(--txt2) !important;
  font-size: 11px !important;
  line-height: 1.3 !important;
  font-weight: 500 !important;
  min-height: 0 !important;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-metric strong {
  color: #ffffff !important;
  font-size: clamp(22px, 6vw, 28px) !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  margin-top: 0 !important;
  grid-column: auto !important;
}

.dashboard-metric small {
  color: var(--txt2) !important;
  font-size: 11px !important;
  line-height: 1.3 !important;
  max-width: 100% !important;
  grid-column: auto !important;
}

.dashboard-metric.is-success small { color: #48d764 !important; }
.dashboard-metric.is-warning small { color: var(--dourado) !important; }
.dashboard-metric.is-danger small  { color: #ff5a4f !important; }

/* B4 — Pendências: badges de prioridade e link "Ver todas ›" */
.section-link {
  border: none;
  background: transparent;
  color: var(--dourado);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0;
  cursor: pointer;
  white-space: nowrap;
}

.section-link:hover {
  text-decoration: underline;
}

/* B5 — Agenda: itens em formato timeline */
.dashboard-timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 1fr);
  align-items: center;
  gap: 0.5rem;
  min-height: 2.8rem;
  padding: 0.5rem 0.6rem 0.5rem 0.9rem;
  border: 1px solid var(--borda);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  width: 100%;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: background 120ms ease;
}

/* Faixa lateral colorida pelo tipo de atividade (--activity-color por item). */
.dashboard-timeline-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--activity-color, var(--borda));
}

.dashboard-timeline-item:hover {
  background: var(--borda);
}

.dashboard-timeline-item:active {
  transform: scale(0.98);
}

.dashboard-timeline-item .timeline-time {
  color: var(--dourado);
  font-size: 0.76rem;
  font-weight: 700;
  white-space: nowrap;
}

.dashboard-timeline-item .timeline-body strong {
  display: block;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-timeline-item .timeline-body span {
  display: block;
  color: var(--txt2);
  font-size: 0.7rem;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-agenda-list {
  display: grid !important;
  gap: 0.38rem !important;
}

/* B7 — Resumo semanal: percentual grande em destaque */
/* B8 — Espaçamento entre seções do dashboard */
.dashboard-home {
  gap: 16px !important;
}

.dashboard-home > section,
.dashboard-home > div {
  border-radius: 16px !important;
}

/* B2 — Dashboard hero: layout lado a lado em telas grandes */
@media (min-width: 58rem) {
  .dashboard-hero {
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
  }
}

/* Métrica rows em mobile: garantir 3 + 2 */
@media (max-width: 57.99rem) {
  .metrics-row {
    overflow-x: auto;
  }

  .metrics-row .metric-card {
    min-width: 120px;
  }
}

/* ── Eyebrow brand text: remove from all screens ── */
.eyebrow {
  display: none !important;
}

/* ── Dashboard metric cards: label wrapping, height uniformity, icon glow fix ── */

/* Cards in same row: equal height via stretch */
.metrics-row {
  align-items: stretch !important;
}

/* Card itself: single-column grid, min-height so short-label cards match tall ones */
.dashboard-metric {
  min-height: 90px !important;
}

/* metric-top-row: align items to top so icon stays at top when label wraps */
.metric-top-row {
  align-items: flex-start !important;
  gap: 8px !important;
}

/* Icon: chip dourado em fundo escuro arredondado (mesmo padrão dos summary cards) */
.metric-top-row .metric-icon {
  flex: 0 0 32px !important;
  width: 32px !important;
  height: 32px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 9px !important;
  background: rgba(var(--brand-rgb), 0.12) !important;
  color: var(--dourado) !important;
  box-shadow: none !important;
  align-self: flex-start !important;
  margin-top: 0 !important;
}
.metric-top-row .metric-icon svg {
  width: 18px !important;
  height: 18px !important;
}
.dashboard-metric.is-success .metric-icon { background: rgba(72, 215, 100, 0.12) !important; color: #48d764 !important; }
.dashboard-metric.is-warning .metric-icon { background: rgba(var(--brand-rgb), 0.12) !important; color: var(--dourado) !important; }
.dashboard-metric.is-danger  .metric-icon { background: rgba(255, 90, 79, 0.12) !important; color: #ff5a4f !important; }

/* Label: allow wrapping, max 2 lines, no horizontal cut */
.metric-top-row .metric-label {
  white-space: normal !important;
  overflow: hidden !important;
  text-overflow: unset !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  line-height: 1.25 !important;
  font-size: 11px !important;
  color: var(--txt2) !important;
  font-weight: 500 !important;
  flex: 1 !important;
}

/* Value and subtext: aligned left below the top row */
.dashboard-metric strong {
  font-size: clamp(22px, 6vw, 28px) !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  color: #fff !important;
}

.dashboard-metric small {
  font-size: 11px !important;
  line-height: 1.3 !important;
  color: var(--txt2) !important;
}

.dashboard-metric.is-success small { color: #48d764 !important; }
.dashboard-metric.is-warning small { color: var(--dourado) !important; }
.dashboard-metric.is-danger  small { color: #ff5a4f !important; }

/* Second row: 2 cards alinhados à esquerda, espaçamento consistente */
.metrics-row + .metrics-row .dashboard-metric {
  max-width: calc(50% - 5px);
}

/* ═══════════════════════════════════════════════════════════════
   BUG FIXES — barra inferior, métricas, glow residual
   ═══════════════════════════════════════════════════════════════ */

/* ── Bug #1: .view.is-entering NÃO pode usar transform
   (transform no ancestral quebra position:fixed do bottom nav)
   Apenas .content-area.is-entering usa translateY — ela não
   contém o nav, portanto está seguro.                          ── */
@keyframes view-fade-only {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.view.is-entering {
  animation: view-fade-only 200ms ease both !important;
}

/* ── Bug #1b [32.2]: .content-area.is-entering TAMBÉM não podia usar transform.
   O bilhete acima dizia "ela não contém o nav, portanto está seguro" — e o nav
   está mesmo a salvo. O que ela contém é TODA a tela do professor, e ali dentro
   moram barras de ação `position: fixed` (a do plano alimentar, a da
   atualização). Um `position: fixed` dentro de um elemento transformado deixa
   de se prender à TELA e passa a se prender ao ELEMENTO: a barra ia parar no
   fim do CONTEÚDO, no meio da tela, com o conteúdo rolando por baixo dela.
   E não era só durante a animação: ela é declarada com `both`, então o último
   quadro (`transform: translateY(0)`) FICA aplicado, e a classe nunca sai.
   O micro-slide de 4–8px sai; o conteúdo continua sempre opaco (nada de fade,
   que no tema escuro pisca preto — é o que o bilhete de styles.css pedia). ── */
.content-area.is-entering {
  animation: none !important;
}

/* ── Bug #2: métricas do Dashboard usam CSS Grid, não flex
   metrics-row--3: 3 colunas iguais
   metrics-row--2: 2 colunas iguais                            ── */
.metrics-row.metrics-row--3,
.metrics-row.metrics-row--2 {
  display: grid !important;
  overflow-x: visible !important;
  overflow: visible !important;
}
.metrics-row.metrics-row--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.metrics-row.metrics-row--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
/* Remove min-width que causava overflow em flex */
.metrics-row--3 .metric-card,
.metrics-row--3 .dashboard-metric,
.metrics-row--2 .metric-card,
.metrics-row--2 .dashboard-metric {
  min-width: 0 !important;
  max-width: 100% !important;
  flex: none !important;
}
/* Padding compacto em --3 para caber em 360px */
.metrics-row--3 .metric-card {
  padding: 10px !important;
}
.metrics-row--3 .mc-label {
  font-size: 10px !important;
}
.metrics-row--3 .mc-value {
  font-size: clamp(18px, 5vw, 26px) !important;
}
.metrics-row--3 .mc-sub {
  font-size: 10px !important;
}
/* Remove a regra 50% anterior */
.metrics-row + .metrics-row .dashboard-metric {
  max-width: 100% !important;
}

/* ── Bug #5: Remove glow dourado residual de cards e botões  ── */
/* Primary / secondary actions: sem halo */
.primary-action,
.primary-action:hover,
.primary-action:active,
.primary-action:focus-visible,
.secondary-action,
.secondary-action:hover {
  box-shadow: none !important;
  text-shadow: none !important;
}

/* Panels e cards: sem glow dourado nas bordas */
.panel,
.metric-card,
.dashboard-metric,
.entity-card {
  box-shadow: none !important;
}

/* Remove pseudo-element radial-gradient glow */
.panel::before,
.panel::after,
.metric-card::before,
.metric-card::after,
.dashboard-metric::before,
.dashboard-metric::after,
.dashboard-hero::before,
.dashboard-hero::after,
.students-hero::before,
.students-hero::after,
.primary-action::before,
.primary-action::after {
  background: none !important;
  opacity: 0 !important;
  display: none !important;
}

/* ── Widget Peso corporal (Início do aluno) ── */
.weight-widget-body {
  display: flex;
  align-items: center;
  gap: 12px;
}

.weight-widget-left {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}

.weight-widget-value {
  font-size: 34px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--dourado);
}

.weight-widget-value small {
  font-size: 14px;
  font-weight: 600;
  color: rgba(var(--brand-rgb), 0.7);
  margin-left: 3px;
}

.weight-date {
  font-size: 11px;
  color: var(--txt2);
}

.weight-first-register {
  font-size: 12px;
  font-style: italic;
  color: var(--txt2);
}

.weight-widget-chart {
  flex-shrink: 0;
  width: 96px;
}

.weight-spark-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* Mini gráfico do widget de peso — cor do tema (sem cor fixa) */
.weight-spark-area {
  fill: rgba(var(--brand-rgb), 0.12);
}

.weight-spark-line {
  fill: none;
  stroke: var(--brand);
  stroke-width: 2.2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.weight-spark-dot {
  fill: var(--brand);
  stroke: var(--card, #fff);
  stroke-width: 2;
}

/* Lista de registros do widget de peso */
.weight-widget-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 10px 0 0;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.weight-record {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 2px;
  font-size: 13px;
}

.weight-record + .weight-record {
  border-top: 1px solid rgba(var(--brand-rgb), 0.07);
}

.weight-record-date {
  color: var(--txt2);
}

.weight-record-value {
  font-weight: 700;
  color: var(--ink);
}

.weight-record.is-latest .weight-record-value {
  color: var(--brand);
}

.weight-trend {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.weight-trend svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* [41.8-4] A SETA INFORMA; QUEM JULGA É O PROFESSOR.
   Estava aqui o julgamento por escrito: descer era `--success` (verde, "bom") e
   subir era `--danger` (vermelho, "ruim"). Isso julga o aluno pelo objetivo
   errado — perder peso é bom para quem emagrece e ruim para quem faz
   hipertrofia, e o gráfico não sabe qual dos dois está olhando.
   As duas direções passam a usar a MESMA cor neutra do [41.3]. */
.weight-trend.is-down,
.weight-trend.is-up {
  color: var(--estado-neutro, #9C978C);
}

.weight-trend.is-flat {
  color: var(--estado-apagado, #4A463F);
}

/* [41.8-4] "a variação aparece na segunda medida" e "sem mudança": ausência de
   informação, na cor de ausência — nunca um "0%" com seta para cima. */
.var-sem-base,
.var-neutra {
  display: block;
  font-size: 13px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.25;
}

/* [41.22] FRASE: "a variação aparece na segunda medida". Sobe para --dim. */
.var-sem-base {
  color: var(--dim, #6B665D);
}

.var-neutra {
  color: var(--estado-neutro, #9C978C);
}

/* [41.8-2] A frase que substitui a linha inventada a partir de um ponto só.
   [41.22] Ela EXPLICA UMA AUSÊNCIA para o professor — "o gráfico aparece a
   partir da segunda medida" — e por isso é informação e fica. Mas informação
   que fica tem de ser legível: --dim, nunca o tom mais apagado. */
.grafico-um-ponto {
  margin: 8px 0 0;
  color: var(--dim, #6B665D);
  font-size: 12px;
  line-height: 1.35;
}

/* ── Card Próxima atividade (Início do aluno) — autônomo fora da grade ── */
.next-activity-card {
  padding: 14px;
  padding-left: 18px;
  overflow: hidden;
}

.next-activity-stripe {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  background: var(--activity-color, var(--dourado));
  pointer-events: none;
}

.next-activity-card .next-activity-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
  font-size: 15px !important;
  line-height: 1.25;
}

.next-activity-card small {
  margin-top: 2px;
  margin-bottom: 8px;
}

.next-activity-card .next-activity-open {
  align-self: flex-start;
  margin-top: auto;
  min-height: 2rem;
  padding: 0 14px;
  font-size: 12px;
}

/* ════════════════════════════════════════════════════════════════
   SAFE-AREA TOP — correção GLOBAL do topo cortado em sheets/modais
   ────────────────────────────────────────────────────────────────
   Todas as folhas que sobem de baixo, modais e telas full-page
   (agendar, novo aluno, notificações, cobrar, registrar pagamento,
   montador de treino, contrato, etc.) recebem padding-top central:
       padding-top: max(espaço-base, env(safe-area-inset-top));
   Assim o handle/cabeçalho de cada sheet nunca fica colado no topo
   nem escondido sob o status bar / notch. Centralizado: vale para
   TODAS as sheets de uma vez (não tela por tela). Os seletores usam
   o contêiner > painel (especificidade 0,2,0) para vencer o cascade
   sem depender da ordem dos arquivos por seção.
   ════════════════════════════════════════════════════════════════ */
.ag-sheet > .ag-panel,
.det-sheet > .det-panel,
.workout-sheet > .workout-sheet-panel,
.ex-picker > .ex-picker-panel,
.video-modal > .video-modal-panel {
  padding-top: max(0.5rem, env(safe-area-inset-top, 0px));
}

.install-sheet > .sheet-panel {
  padding-top: max(0.8rem, env(safe-area-inset-top, 0px));
}

.modal > .modal-panel {
  padding-top: max(1rem, env(safe-area-inset-top, 0px));
}

/* ─── Modal em 3 partes (cabeçalho fixo / conteúdo rolável / rodapé fixo) ────
   Ativado por .has-foot quando openModal recebe opts.footer. O painel vira
   coluna flex: o cabeçalho e o rodapé não rolam e o miolo rola sozinho, de
   modo que os botões (Cancelar/Salvar) ficam sempre visíveis e clicáveis,
   acima da navegação inferior e respeitando a safe-area do iOS. */
/* A barra inferior fixa (#managerBottomNav) usa z-index 1000 no override v54;
   o modal sobe acima dela para que o backdrop a escureça/desabilite e o rodapé
   com Cancelar/Salvar fique sempre por cima e clicável. */
.modal.has-foot {
  z-index: 1001;
}

.modal.has-foot > .modal-panel {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.modal.has-foot .modal-head {
  flex: 0 0 auto;
  padding: max(0.9rem, env(safe-area-inset-top, 0px)) 1rem 0.6rem;
  border-bottom: 1px solid var(--line);
}

.modal.has-foot #modalBody {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0.9rem 1rem;
}

.modal-foot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1rem calc(0.8rem + var(--safe-bottom, 0px));
  border-top: 1px solid var(--line);
  background: var(--card);
}

.modal-foot[hidden] { display: none; }

.modal-foot .secondary-action {
  width: auto;
  min-width: 6rem;
  flex: 0 0 auto;
}

.modal-foot .primary-action {
  flex: 1 1 auto;
}

/* ─── ABA PLANOS (planos do personal) ──────────────────────────────────────
   [19.1] O CARTÃO VIROU LINHA. Saíram: o cartão "Seus planos" em volta, o
   preço grande em cor do tema, a fidelidade em cor do tema, a pílula de
   modalidade, as pílulas do incluído e os dois botões do rodapé. Ficou uma
   linha de 68px separada por fio: nome 15px/600 (+ a etiqueta da Agenda no
   desativado), uma linha de fatos 13px apagada, e o "…" na ponta. Nenhum
   valor em cor do tema: cor do tema é AÇÃO, e um preço não se toca. */
/* A especificidade dobrada vence o `.library-hero h2 { !important }` do
   treinos.css, que carrega depois deste arquivo. */
.library-hero.planos-hero h2 {
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
}

.planos-lista {
  display: grid;
  gap: 0;
}

.plano-linha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.7rem;
  min-height: 68px;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--borda);
}

.planos-lista .plano-linha:last-child { border-bottom: 0; }

.plano-linha-texto {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.plano-linha-nome {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.plano-linha-nome strong {
  overflow: hidden;
  color: var(--ink);
  font-size: var(--t-corpo);
  font-weight: 600;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plano-linha-fatos {
  overflow: hidden;
  color: var(--dim);
  font-size: var(--t-fato);
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* [19.1 D] O plano desativado: nome e fatos mais apagados que os dos vivos —
   a etiqueta diz a palavra, o tom diz de longe. */
.plano-linha.is-desativado .plano-linha-nome strong {
  color: var(--muted);
}

.plano-linha.is-desativado .plano-linha-fatos {
  opacity: 0.7;
}

/* Formulário de plano premium: cabeçalho com ícone + título + subtítulo e
   seções com títulos discretos ("Informações" / "O que está incluso"). O título
   do plano vem do cabeçalho do corpo; o título do modal-head (único modal com
   rodapé fixo) é ocultado para não duplicar. */
.modal.has-foot .modal-head h2 {
  display: none;
}

.plan-form {
  gap: 1.15rem;
}

.plan-form-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.plan-form-header-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 0.9rem;
  border: 1px solid rgb(from var(--brand) r g b / 0.22);
  background: var(--brand-soft);
  color: var(--brand-strong);
}

.plan-form-header-icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

.plan-form-header-text {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.plan-form-header-text strong {
  font-size: 1.16rem;
  line-height: 1.2;
}

.plan-form-header-text span {
  font-size: 0.84rem;
  line-height: 1.35;
  color: var(--muted);
}

.plan-form-section {
  display: grid;
  gap: 0.7rem;
}

.plan-form-section-title {
  margin: 0;
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

/* Campo de valor: prefixo "R$" embutido dentro do input */
.field-prefix {
  position: relative;
  display: block;
}

.field-prefix-symbol {
  position: absolute;
  left: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 750;
  font-size: 0.92rem;
  color: var(--muted);
  pointer-events: none;
}

.field-prefix input.has-prefix {
  padding-left: 2.55rem;
}

/* Formulário de plano: aviso de fidelidade + tópicos livres */
.plan-form-note {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  padding: 0.65rem 0.8rem;
  border-radius: 0.7rem;
  border: 1px solid rgb(from var(--brand) r g b / 0.25);
  background: var(--brand-soft);
  color: var(--brand-strong);
  font-size: 0.82rem;
  font-weight: 650;
  line-height: 1.4;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}

.plan-form-note-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.55rem;
  background: rgb(from currentColor r g b / 0.12);
}

.plan-form-note-icon svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.plan-form-note-text {
  min-width: 0;
}

/* Sem fidelidade: renova sozinho todo mês (tom informativo, azul) */
.plan-form-note[data-state="monthly"] {
  border-color: rgb(from var(--info) r g b / 0.3);
  background: var(--info-soft);
  color: var(--info);
}

/* Com fidelidade: prazo fixo que encerra ao fim (tom de destaque, âmbar) */
.plan-form-note[data-state="fidelity"] {
  border-color: rgb(from var(--accent) r g b / 0.4);
  background: var(--accent-soft);
  color: var(--brand-strong);
}

/* Modalidade: controle segmentado (Presencial/Online/Domiciliar). Opção ativa
   recebe a cor do tema; o radio real fica oculto e a seleção é via :has(). */
.plan-segment {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.35rem;
  padding: 0.3rem;
  border: 1px solid var(--line);
  border-radius: 0.8rem;
  background: rgb(from var(--brand) r g b / 0.04);
}

.plan-segment-option {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.45rem;
  border-radius: 0.6rem;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.plan-segment-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.plan-segment-option:has(input:checked) {
  background: var(--brand);
  color: var(--brand-ink);
  box-shadow: 0 0.3rem 0.7rem rgb(from var(--brand) r g b / 0.28);
}

.plan-segment-option:has(input:focus-visible) {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* [19.1 F] A pílula de modalidade e o texto de frequência do cartão SAÍRAM:
   os dois entram na linha de fatos da linha, se couberem. */

/* Tópicos fixos: cartões clicáveis em 2 colunas. Marcado = cor do tema;
   desmarcado = apagado (texto/contorno suaves). O checkbox real fica oculto. */
.plan-topic-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.plan-topic-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 3rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 0.7rem;
  background: rgb(from var(--brand) r g b / 0.04);
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease,
    color 160ms ease;
}

.plan-topic-card input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.plan-topic-card-mark {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  border: 1px solid var(--line);
  border-radius: 0.45rem;
  background: rgb(from var(--brand) r g b / 0.04);
  transition: border-color 160ms ease, background-color 160ms ease;
}

.plan-topic-card-mark svg {
  width: 0.85rem;
  height: 0.85rem;
  fill: none;
  stroke: var(--brand-ink);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transition: opacity 160ms ease;
}

.plan-topic-card-label {
  min-width: 0;
}

.plan-topic-card:has(input:checked) {
  border-color: var(--brand);
  background: var(--brand-soft);
  color: var(--brand-strong);
}

.plan-topic-card:has(input:checked) .plan-topic-card-mark {
  border-color: var(--brand);
  background: var(--brand);
}

.plan-topic-card:has(input:checked) .plan-topic-card-mark svg {
  opacity: 1;
}

.plan-topic-card:has(input:focus-visible) {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* Tópicos personalizados: itens com indicador + remover, e campo "Adicionar" */
.plan-free-list {
  display: grid;
  gap: 0.5rem;
}

.plan-free-list:empty {
  display: none;
}

.plan-free-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.9rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 0.7rem;
  background: var(--brand-soft);
}

.plan-free-dot {
  flex: 0 0 auto;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--brand);
}

.plan-free-text {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.86rem;
  font-weight: 650;
  color: var(--ink);
  word-break: break-word;
}

.plan-free-remove {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: 0.55rem;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease;
}

.plan-free-remove:hover {
  background: rgb(from var(--danger) r g b / 0.12);
  color: var(--danger);
}

.plan-free-remove svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.plan-free-add-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.plan-free-add-input {
  flex: 1 1 auto;
  min-width: 0;
}

.plan-free-add {
  flex: 0 0 auto;
  width: auto;
  min-height: 2.8rem;
  padding: 0 1.1rem;
}

/* =========================================================================
   BLOCO 7 / [P2] e [P3] — A TELA "HOJE" DO ALUNO
   -------------------------------------------------------------------------
   MENOS CAIXA: as seções se separam por FIO e por espaço, não por cartão
   dentro de cartão. Cartão só onde há um objeto — um recado, um plano —
   nunca em volta de uma lista inteira.
   Toque mínimo de 44px em tudo que é clicável. Nenhum texto cortado com
   reticências em botão ou rótulo: se não couber, o conteúdo sai.
   ========================================================================= */




/* a) a saudação — sem borda, sem barra */


/* o rótulo de seção, igual em todos os blocos */




/* b) SUA SEMANA — sete colunas iguais */




/* passado sem treino: um pouco mais presente que o futuro */


/* hoje: borda âmbar de 2px — e ela FICA mesmo depois de preencher, senão o
   dia de hoje some da semana no instante em que ele passa a contar. */




/* c) TREINAR / FEITO POR HOJE */






/* os links em texto: alvo de 44px sem virar botão de largura total */


/* o recado do professor — aqui SIM é cartão: há um objeto, um recado */




/* d) VOCÊ ESTÁ MAIS FORTE */






/* No tablet a tela não vira uma coluna de 880px de largura: o conteúdo é o
   mesmo do celular, só respira mais. */
@media (min-width: 720px) {
  }

/* =========================================================================
   BLOCO 7 / [P4] — A TELA "TREINOS" DO ALUNO
   -------------------------------------------------------------------------
   Lista com FIO entre os itens, sem cartão e sem busca. A linha inteira é o
   toque: nunca um botão "Abrir" de largura total por item.
   ========================================================================= */

.tela-treinos {
  --hoje-fio: #1A1A1A;
  --hoje-ambar: #F59E0B;
  --hoje-ambar-texto: #F0B95C;
  --hoje-verde: #4BD566;
  --hoje-apagado: #6B665D;
  --hoje-secundario: #9C978C;
  gap: 0;
}

.tela-treinos .treinos-topo {
  padding: 0.25rem 0 1.1rem;
}

.tela-treinos .treinos-topo h2 {
  margin: 0;
  font-size: var(--t-titulo);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.tela-treinos .treinos-topo p {
  margin: 0.35rem 0 0;
  font-size: var(--t-fato);
  color: var(--hoje-secundario);
}

.tela-treinos .treino-linha,
.tela-treinos .treino-guardado {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  min-height: 44px;
  padding: 0.9rem 0;
  border: 0;
  border-top: 1px solid var(--hoje-fio);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.tela-treinos .treino-guardado {
  cursor: default;
  opacity: 0.5;
}

.tela-treinos .treino-letra {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: #161616;
  color: var(--hoje-secundario);
  font-size: var(--t-objeto);
  font-weight: 800;
}

/* o próximo da sequência: a letra em âmbar sobre âmbar 14% */
.tela-treinos .treino-linha.is-proximo .treino-letra {
  background: rgba(245, 158, 11, 0.14);
  color: var(--hoje-ambar-texto);
}

.tela-treinos .treino-corpo {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  gap: 0.2rem;
}

.tela-treinos .treino-nome {
  font-size: var(--t-objeto);
  font-weight: 700;
  line-height: 1.2;
  /* Nenhum texto cortado com reticências: se não couber, quebra. */
  overflow-wrap: anywhere;
}

.tela-treinos .treino-fatos {
  font-size: var(--t-fato);
  color: var(--hoje-secundario);
}

.tela-treinos .treino-estado {
  flex: 0 0 auto;
  display: grid;
  gap: 0.2rem;
  justify-items: end;
  text-align: right;
}

.tela-treinos .treino-pilula {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: rgba(245, 158, 11, 0.14);
  color: var(--hoje-ambar-texto);
  font-size: var(--t-rotulo);
  font-weight: 700;
  letter-spacing: 0.08em;
}

.tela-treinos .treino-quando {
  font-size: var(--t-fato);
  color: var(--hoje-secundario);
}

.tela-treinos .treino-quando.is-feito {
  color: var(--hoje-verde);
}

.tela-treinos .treino-vezes {
  font-size: var(--t-fato);
  color: var(--hoje-apagado);
}

.tela-treinos .treinos-guardados {
  margin-top: 1.75rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--hoje-fio);
}

.tela-treinos .treinos-guardados .hoje-rotulo {
  display: block;
  margin-bottom: 0.35rem;
  font-size: var(--t-rotulo);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--hoje-apagado);
}

@media (min-width: 720px) {
  .tela-treinos {
    max-width: 620px;
  }
}

/* =========================================================================
   BLOCO 7 / [P5] — A TELA DO TREINO E A TELA DA SÉRIE
   -------------------------------------------------------------------------
   Durante o treino a tela é do treino: sem sino, sem menu, sem avatar, sem
   barra de abas. A zona do polegar fica embaixo, onde o dedo alcança sem
   soltar a barra.
   ========================================================================= */


/* ── a tela do treino (o plano) ───────────────────────────────────────── */
















/* ── o topo da execução ───────────────────────────────────────────────── */





/* a confirmação de saída, dentro da própria tela */





/* ── b) os segmentos, um por série ────────────────────────────────────── */




/* ── d) o exercício ───────────────────────────────────────────────────── */
/* [E2] O nome do exercício em UMA LINHA. Se um nome do catálogo não couber
   nem assim, ele encolhe um degrau — não quebra e não corta. */
/* o degrau abaixo — --t-objeto (20) vira --t-corpo (15) */

/* e mais um, só para o nome que nem assim cabe: ler menor é melhor que ler
   pela metade. Abaixo daqui não desce — este é o último degrau da escala. */

/* [E2] O vídeo virou uma LINHA de 44px, não uma caixa que come um quarto da
   tela. Sem vídeo a linha não existe — e nunca se escreve "sem vídeo". */




/* ── e) da última vez ─────────────────────────────────────────────────── */



/* primeira vez: uma linha em cinza, nunca um cartão vazio */

/* ── f) já feitas hoje ────────────────────────────────────────────────── */






/* ── g) a zona do polegar ─────────────────────────────────────────────── */








/* o segundo par (repetições) é um pouco menor, como no desenho */





@media (min-width: 720px) {
  }

/* =========================================================================
   BLOCO 7 / [P6] — O DESCANSO
   -------------------------------------------------------------------------
   A confirmação do que acabou (com o Desfazer), quanto falta, e o que vem
   depois. Nesta ordem.
   ========================================================================= */


/* a faixa verde escura que confirma a série, com o Desfazer ao lado */








/* dois botões lado a lado: "+ 15s" e "Pular" */




/* A SEGUIR, no rodapé, acima de um fio */






/* =========================================================================
   BLOCO 7 / [P7] — O FIM DO TREINO
   -------------------------------------------------------------------------
   Três números entre dois fios, sem caixa. A terceira coluna e o bloco de
   recorde só existem quando há o que dizer.
   ========================================================================= */





/* Duas colunas dividem a largura; com a terceira, dividem em três. */





















/* =========================================================================
   BLOCO 7 / [P8] — A TELA "EVOLUÇÃO" DO ALUNO
   -------------------------------------------------------------------------
   Responde uma pergunta só: eu estou melhorando? O exercício que NÃO subiu
   também aparece, em cinza — é o dado mais útil da tela.
   ========================================================================= */







/* o calendário de hábito */








/* suas cargas */







/* o exercício parado fala baixo, mas fala */

/* seu peso */



@media (min-width: 720px) {
  }

/* =========================================================================
   [E1] A GOTEIRA DO APP DO ALUNO — uma só, e ela vence
   -------------------------------------------------------------------------
   O conteúdo começava a 8px da borda no iPhone. A causa não estava no
   markup: eram duas regras de media query que apertavam o layout inteiro
   junto com o do professor —
     src/styles/base.css  @media (max-width: 28rem)  padding-inline: 0.5rem
     src/styles/base.css  @media                     padding: 0.62rem
   Elas continuam valendo para o lado do professor, que tem escala própria.
   Do lado do ALUNO a goteira é --goteira (20px), em qualquer largura.
   ========================================================================= */



/* As telas do aluno já vivem dentro da goteira: nenhuma delas repete margem
   lateral própria, senão o conteúdo afunda mais a cada bloco aninhado. */
.tela-hoje,
.tela-treinos,
.tela-antes,
.tela-evolucao,
.execution-screen,
.tela-fim {
  padding-inline: 0;
}

/* Nada do aluno pode ser mais largo que a área: é o que rasgava a tela de
   contrato, com "Versã" cortado no meio da palavra. */


/* =========================================================================
   [E2] e [E3] — A TELA DA SÉRIE CABE SEM ROLAR
   -------------------------------------------------------------------------
   A aluna está DE PÉ, com a barra nas costas ou o halter na mão. Rolar a
   tela no meio de uma série é o pior defeito possível deste app. Tudo aqui
   existe para caber em 844 sem rolagem.
   ========================================================================= */

/* a faixa fixa do treino: ela não rola */

/* [E2] a tela é a tela: sem moldura âmbar em volta de tudo. Cartão é para
   objeto isolado dentro de uma lista, não para a página. */





/* [E4] "+" e "−" são a MESMA ação em espelho: mesma cor, mesmo peso, mesmo
   tamanho. O âmbar preenchido da tela é um só, e é o "Concluir série". */




/* [E6] a linha do bi-set é um FATO em cima do nome, não uma tarja âmbar de
   largura total mais gritante que o próprio exercício. */



/* [E9] A linha da atualização de progresso — discreta, no fim da tela Hoje. */


/* =========================================================================
   [E14] A TELA DE CONTRATO DO ALUNO — lista, sem cartão
   ========================================================================= */




/* Nenhuma data ou texto cortado, em nenhuma largura: era "Versã" e
   "Assinado em d" cortados no meio da palavra. */




/* [E6] O bi-set agrupado na tela do plano: um fio ligando os dois exercícios
   e o rótulo à esquerda. É onde a aluna decide se vai treinar — esconder que
   dois exercícios se emendam era esconder o esforço real do treino. */




/* [E4] "Começar" FIXO no rodapé, não solto no meio de uma tela vazia. */

/* [E12] As duas colunas da aba Treinos param de brigar: a esquerda manda no
   espaço e a linha de fatos NÃO QUEBRA (o bi-set sai antes, por medida); a
   direita é --t-fato e ocupa só o que precisa. */
.tela-treinos .treino-fatos {
  white-space: nowrap;
}

.tela-treinos .treino-estado {
  max-width: 40%;
}

.tela-treinos .treino-quando,
.tela-treinos .treino-vezes {
  white-space: nowrap;
}

/* [E12] A coluna da direita INTEIRA é --t-fato, não só os filhos: era o
   container herdando 16px e empurrando a linha de fatos. */
.tela-treinos .treino-estado {
  font-size: var(--t-fato);
}

/* [E2] O rótulo do vídeo cede a largura antes de o NOME do exercício
   encolher: ele ocupava quase um terço da linha para dizer o que o ícone já
   diz. O alvo de toque continua com 44px. */


/* =========================================================================
   [A1] O CONTADOR — TRÊS LADO A LADO, e o miolo em DUAS linhas
   -------------------------------------------------------------------------
   O [8.1] acertou o diagnóstico e errou o remédio: empilhou os três em
   barras de largura total e o Dashboard virou uma escada de 150px para
   dizer três números. O defeito nunca foi estarem lado a lado — era o
   MIOLO de cada um: o ícone tinha uma linha só para ele, o número outra, e
   o rótulo quebrava numa terceira e numa quarta.

   ANATOMIA: linha 1 é o ícone (16px) e o número (20px/700) juntos, à
   esquerda; linha 2 é o rótulo (11px/500), em no máximo duas linhas.

   OS TRÊS TÊM A MESMA ALTURA, SEMPRE — o rótulo reserva a altura de duas
   linhas mesmo quando usa uma. Sem isso, um rótulo curto ao lado de um
   longo faz a quebra parecer acidente em vez de decisão.

   O RÓTULO NÃO ENCURTA e não é cortado: em 390 alguns ocupam duas linhas,
   e está certo que ocupem.
   ========================================================================= */
.contadores {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-items: stretch;
}

/* Quatro contadores (Relatórios e a ficha do aluno) não cabem em quatro
   colunas num aparelho de 390: dois por linha mantêm o número legível. */
.contadores[data-contadores="4"] {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.contadores[data-contadores="2"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.contadores[data-contadores="1"] {
  grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 30rem) {
  .contadores[data-contadores="4"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.contador-cartao {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--borda);
  border-radius: 10px;
  background: var(--surface, transparent);
  color: var(--ink);
  font: inherit;
  text-align: left;
}

button.contador-cartao {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.contador-topo {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

/* [10.3] O ÍCONE USA A COR DE DESTAQUE DO TEMA, nunca um valor escrito à
   mão: `--brand-strong` é a variável que o resto do app já usa para
   destaque, e ela troca quando o professor troca o tema. Em cinza
   (`--muted`) o ícone tinha a mesma cor do texto de apoio e simplesmente
   desaparecia ao lado do número. */
.contador-icone {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  color: var(--brand-strong, var(--brand));
}

.contador-icone svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.contador-numero {
  min-width: 0;
  color: var(--ink);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.contador-rotulo {
  /* A ALTURA DE DUAS LINHAS, SEMPRE — é ela que mantém os três iguais. */
  min-height: 27.5px;
  color: var(--ink);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

/* O apoio ("Aguardando assinatura", "+12% vs. período anterior") existe em
   cinco das sete telas e É informação — não desenho. Fica numa terceira
   linha, apagado, e some onde não existe. */
.contador-apoio {
  color: var(--muted);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

/* CONTADOR EM ZERO RECUA. O cartão inteiro a 45% — ícone, número e rótulo
   juntos, porque apagar só o número deixaria um rótulo aceso apontando para
   nada. Nada sai da tela: quem tem zero continua lá, só para de disputar o
   olho com quem tem dois. */
.contador-cartao.is-zero {
  opacity: 0.45;
}

/* O TOM colore o NÚMERO, não o cartão inteiro: o que muda de estado é o
   valor, e um cartão inteiro pintado de vermelho vira alarme onde só há
   informação. */
.contador-cartao.is-success .contador-numero { color: var(--success, #10b981); }
.contador-cartao.is-warning .contador-numero { color: var(--brand-strong, var(--brand)); }
.contador-cartao.is-danger  .contador-numero { color: var(--danger, #ef4444); }

/* =========================================================================
   [B8.2] TÍTULO E BOTÃO PRIMÁRIO — NO CELULAR, UM EM CIMA DO OUTRO
   -------------------------------------------------------------------------
   Todo cabeçalho de tela do professor tem a mesma forma: um bloco de texto
   (título + subtítulo) e um botão primário ao lado. Em 880 isso cabe. Em
   390 o botão fica com a largura que precisa e o título com o resto — e o
   resto não dá: "Bom dia, / Personal" virava TRÊS linhas, "Padrões de /
   treino" virava duas, e na Agenda a data embaixo saía cortada.

   A REGRA: no celular o botão primário desce para baixo do título, em
   largura total. No tablet nada muda.

   POR QUE UMA LISTA DE SELETORES E NÃO UMA CLASSE: são dezenove cabeçalhos
   escritos ao longo do tempo, cada um com a sua classe. Trocar todos por
   uma classe comum é mudança boa e é MAIOR que este item — a lista fica
   aqui, num lugar só, e quem criar um cabeçalho novo o acrescenta aqui.

   POR QUE A CLASSE VEM DOBRADA (`.patterns-hero.patterns-hero`): o
   `base.css` é carregado ANTES das folhas por tela, e `treinos.css` redefine
   `.patterns-hero` como grid de duas colunas. Sem dobrar, a folha de depois
   ganha e a regra do celular não vale para a única tela que mais precisava
   dela. Dobrar o nome sobe a especificidade sem inventar um seletor novo.

   [A3] E POR QUE AS DECLARAÇÕES VÊM COM `!important`: dobrar a classe não
   bastou. As folhas por tela cravam `align-items: end !important` e, na
   Alunos, `display: grid !important` — e `!important` não se vence com
   especificidade. Era isso que fazia a saudação do Dashboard nascer colada
   na direita e o botão continuar do tamanho do texto: metade do [8.2]
   nunca chegou a valer. Aqui o `!important` não é preguiça, é a única
   forma de empatar com quem já usou a mesma arma.
   ========================================================================= */
@media (max-width: 30rem) {
  .page-head.page-head,
  .dashboard-hero.dashboard-hero,
  .students-hero.students-hero,
  .patterns-hero.patterns-hero,
  .agenda-hero.agenda-hero,
  .contracts-hero.contracts-hero,
  .diet-hero.diet-hero,
  .library-hero.library-hero,
  .updates-hero.updates-hero,
  .reports-hero.reports-hero,
  .finance-hero.finance-hero,
  .ev-hero.ev-hero {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.6rem !important;
  }

  /* [12.1] A SAUDAÇÃO PASSA A CABER COM QUALQUER NOME.
     Com a goteira em 20 ela deixou de caber — por 0,3px: "Boa noite,
     Guilherme" mede 350,3 numa faixa de 350. E só cabia antes por sorte:
     com a goteira antiga, um nome UMA letra maior já quebrava igual.
     O teto continua sendo a escala (`--t-h1`); o que entra é um limite
     ligado à largura da tela, para o nome mandar no tamanho da saudação, e
     não o tamanho mandar em quem pode ser cumprimentado. */
  .dashboard-hero.dashboard-hero h3 {
    font-size: min(var(--t-h1), 6.8vw) !important;
  }

  /* O botão ocupa a linha inteira — e o alvo de toque cresce junto. */
  .page-head.page-head .btn-action-header,
  .page-head.page-head .page-actions,
  .page-head.page-head .page-actions > *,
  .dashboard-hero.dashboard-hero .btn-action-header,
  .students-hero.students-hero .btn-action-header,
  .patterns-hero.patterns-hero .btn-action-header,
  .agenda-hero.agenda-hero .btn-action-header,
  .contracts-hero.contracts-hero .btn-action-header,
  .diet-hero.diet-hero .btn-action-header,
  .library-hero.library-hero .btn-action-header,
  .updates-hero.updates-hero .btn-action-header,
  .reports-hero.reports-hero .btn-action-header,
  .finance-hero.finance-hero .btn-action-header,
  .ev-hero.ev-hero .btn-action-header {
    width: 100% !important;
    align-self: stretch !important;
    justify-content: center !important;
  }

  /* A Alunos embrulha o botão num div com `justify-content: flex-end` no
     próprio atributo style; sem esticar o embrulho, o botão continuaria
     encolhido no canto direito. */
  .students-hero.students-hero > div:last-child {
    width: 100%;
  }
}

/* =========================================================================
   [A2] NENHUM BLOCO FICA MAIS LARGO QUE A TELA
   -------------------------------------------------------------------------
   Todo filho direto de `.content-stack` é item de grid, e item de grid nasce
   com `min-width: auto`: ele NÃO encolhe abaixo do próprio conteúdo — ele
   empurra o pai. Foi assim que a lista de alunos ficou com 400px dentro de
   uma área de 370: o cartão pedia espaço, um `<div>` sem classe no meio do
   caminho repassou o pedido, e a coluna cresceu.

   Com `min-width: 0` quem tem de ceder é o conteúdo, e a tela manda na
   largura — que é o certo num aparelho de 390.
   ========================================================================= */
.content-stack > * {
  min-width: 0;
}

/* =========================================================================
   [B1] A REGRA DO TECLADO
   -------------------------------------------------------------------------
   O teclado do celular NÃO empurra a página: ele cobre. Uma folha de 498px
   num aparelho de 844 vira 498px com 340 deles debaixo do teclado — e o
   professor digita um nome que não vê, com o rodapé de ação escondido.

   `--teclado` é escrito pelo app a partir do `visualViewport` (a única
   fonte honesta da altura do teclado) e vale 0 quando ele está fechado.
   As folhas encolhem por cima dele em vez de ficarem debaixo dele.

   O QUE CONTINUA VISÍVEL com o teclado aberto: o cabeçalho da folha (ele é
   `sticky` no topo), o campo em foco (o navegador rola até ele dentro da
   área que sobrou) e o rodapé de ação (`sticky` na base da folha, que agora
   termina na borda do teclado).
   ========================================================================= */
:root {
  --teclado: 0px;
}

/* A folha inteira termina na borda de cima do teclado. Vale para o modal
   genérico, para as folhas de baixo e para as de tela cheia — todas são
   `position: fixed; inset: 0`. */
body.teclado-aberto .modal,
body.teclado-aberto .install-sheet,
body.teclado-aberto [role="dialog"] {
  bottom: var(--teclado, 0px);
}

/* E o painel encolhe junto, senão ele mantém a altura antiga e o conteúdo
   volta a passar por baixo. */
body.teclado-aberto .modal-panel,
body.teclado-aberto .sheet-panel,
body.teclado-aberto .workout-sheet-panel,
body.teclado-aberto .presc-panel,
body.teclado-aberto .ex-picker-panel,
body.teclado-aberto .wb-opcoes-folha .wb-menu-corpo {
  max-height: calc(100dvh - var(--teclado, 0px) - 1.5rem);
}

/* O "Pronto" mora ao lado do X, nunca no lugar dele — o canto direito tem
   um dono só. Ele não fecha a folha: só devolve a tela inteira. */
.folha-pronto {
  min-height: var(--alvo, 44px);
  padding: 0 0.6rem;
  border: 0;
  border-radius: 0.6rem;
  background: transparent;
  color: var(--brand-strong, var(--brand));
  font-size: var(--t-corpo, 15px);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

/* =========================================================================
   [12.2] A FOLHA DE AÇÕES — um desenho só para todo menu "…"
   -------------------------------------------------------------------------
   Nasceu no [11.2], na ficha do aluno, e agora vale para todos: Dieta,
   Biblioteca, Atualizações, Contratos, refeição do plano e Padrões.

   Por que `position: fixed` no `body` e z acima de tudo: o balão do
   `<details>` nascia ancorado no botão e, numa linha perto do rodapé,
   passava POR CIMA da barra de abas e era cortado pela borda de baixo — as
   ações debaixo ficavam inalcançáveis. A folha sobe do chão da tela, tem
   altura própria e rola sozinha se precisar.
   ========================================================================= */
.folha-acoes {
  position: fixed;
  inset: 0;
  z-index: 1200;
}

.folha-acoes-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 25, 22, 0.45);
}

.folha-acoes-corpo {
  position: absolute;
  inset: auto 0 0 0;
  display: grid;
  align-content: start;
  gap: 0.35rem;
  max-height: calc(100dvh - 2rem);
  overflow: auto;
  padding: 0.8rem var(--goteira, 20px) calc(1rem + var(--safe-bottom, 0px));
  border-radius: 20px 20px 0 0;
  background: var(--card, #111);
  box-shadow: 0 -18px 44px rgba(0, 0, 0, 0.35);
}

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

/* Linhas de lista, separadas por fio — nenhuma é botão contornado. */
.acao-linha {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  min-height: 60px;
  padding: 0.5rem 0;
  border: 0;
  border-top: 1px solid var(--borda);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

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

.acao-icone {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(var(--brand-rgb), 0.12);
  color: var(--brand-strong, var(--brand));
}

.acao-icone svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.acao-texto {
  display: grid;
  flex: 1 1 auto;
  gap: 0.1rem;
  min-width: 0;
}

.acao-texto strong {
  color: var(--ink);
  font-size: var(--t-corpo, 15px);
  font-weight: 600;
}

/* [14B.4 C] A frase que explica a ação é 12px: ela apoia o nome da ação, e
   não divide o peso com ele. */
.acao-texto span {
  color: var(--dim);
  font-size: 12px;
}

/* [14B.4 C] O X DA FOLHA DE AÇÕES É REDONDO E DE 36 — o mesmo do "Partir de
   um padrão" do [13.1]. Ele vinha com 44 quadrados, herdados do `.icon-button`
   genérico. O ALVO continua sendo 44: ele é um `::after` invisível em volta,
   como no "…" da linha. */
/* O `!important` AQUI NÃO É PREGUIÇA: a regra de alvo de toque global
   (`.icon-button { min-width/min-height: 44px !important }`, base.css:6269)
   não se vence com especificidade. O ALVO continua 44 — ele só deixa de ser o
   desenho e vira o `::after` invisível logo abaixo. */
.wb-menu-fechar.icon-button {
  position: relative;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  border-radius: 999px;
  padding: 0;
}

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

/* [14B.4 C] NENHUM ÂMBAR NA FOLHA DE UM OBJETO. Quando a folha traz o nome do
   objeto no título (subtítulo presente), nenhuma das ações é "a" ação — então
   os ícones não vêm na cor do tema. */
.folha-acoes.is-de-objeto .acao-icone {
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted);
}

/* O destrutivo não é âmbar nem vermelho: o ícone apaga, e a pergunta é que
   carrega o peso. Não existe vermelho na nossa paleta. */
.acao-linha.is-perigo .acao-icone {
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted);
}

/* [15.4] A AÇÃO QUE ACABOU DE ACONTECER. Ela não some — sumir deixaria quem
   tocou sem saber se pegou. Ela fica no lugar, apagada e sem toque, até a
   trava de 10 minutos abrir. */
.acao-linha.is-apagada {
  cursor: default;
  opacity: 0.5;
}

.acao-linha.is-apagada .acao-icone {
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted);
}

/* [15.4/15.7 A] O ÂMBAR QUE ACABOU DE SER TOCADO PERDE O ÂMBAR. Ele fica no
   lugar, do mesmo tamanho, para não empurrar o resto da folha — mas em
   superfície, não em cor de ação: âmbar que não se pode tocar é uma promessa
   quebrada. */
.primary-action.det-principal.is-apagada,
.primary-action.det-principal.is-apagada:hover {
  border: 1px solid var(--borda);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: none;
  color: var(--dim);
  cursor: default;
}

/* [15.4] A EXPLICAÇÃO DA AÇÃO PRINCIPAL. Ela não cabe dentro do âmbar, que
   tem uma linha só — então fica logo abaixo dele, no mesmo 12px apagado das
   explicações das linhas de ação. */
.det-principal-nota {
  margin: 0.35rem 0 0;
  color: var(--dim);
  font-size: 12px;
  line-height: 1.3;
  text-align: center;
}

/* [15.4] E SE O AVISO NÃO SAIR, A FOLHA DIZ EM UMA LINHA — aqui, ao lado da
   ação que falhou, e não num toast que some antes de ser lido. */
.det-erro {
  margin: 0 0 0.6rem;
  color: var(--ink);
  font-size: var(--t-fato);
  line-height: 1.35;
}

/* O gatilho: ícone de 24px com alvo de 44. É o mesmo da linha do treino
   ([11.1]), agora compartilhado por todas as listas que ganharam folha. */
.menu-de-linha {
  position: relative;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

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

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

/* =========================================================================
   [12.4] A LISTA DE LINHAS — o desenho do [11.1], agora compartilhado
   -------------------------------------------------------------------------
   Nasceu na ficha do aluno (`.treino-linha`, em alunos.css) e agora vale
   também para os Padrões. As classes de lá continuam, com a forma delas; o
   que mora aqui é a forma comum: quadrado de 40px à esquerda, três linhas de
   texto que não quebram, e o menu de 24px na ponta.
   ========================================================================= */
.lista-fatos {
  margin: 0;
  color: var(--muted);
  font-size: var(--t-fato, 13px);
  line-height: 1.3;
}

.lista-de-linhas {
  display: grid;
  gap: 0;
  margin-top: 0.35rem;
  min-width: 0;
}

.lista-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;
}

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

.lista-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;
}

/* O quadrado usa a cor de destaque do tema — nunca um valor escrito à mão. */
.lista-linha-icone {
  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));
}

.lista-linha-icone svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

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

.lista-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;
}

/* NOME COMPRIDO NÃO EMPURRA O MARCADOR PARA FORA DA TELA: quem cede é o
   nome, e o ponto (ou a palavra "RASCUNHO") fica sempre visível. O nome é
   texto livre, escrito pelo professor: não há como encurtá-lo por redação. */
.lista-linha-titulo {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* A LEI DO SELO: o normal é um ponto de 6px; a exceção é a palavra. */
.lista-linha-ponto {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--brand-strong, var(--brand));
}

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

.lista-linha-fatos {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
}

.lista-linha-historia {
  color: var(--dim, #6B665D);
  font-size: 12px;
  line-height: 1.25;
  white-space: nowrap;
}

.lista-linha .menu-de-linha { margin-top: 12px; }

/* ═══════════════════════════════════════════════════════════════════════
   [24.5] A FOLHA DE AÇÕES COM CABEÇALHO [G1]: avatar de 44, nome 20/700,
   linha de fato com ponto de estado, e o X redondo de 36 que já existia. E
   o âmbar contextual acima das linhas (uma folha, um âmbar).
   ═══════════════════════════════════════════════════════════════════════ */
.folha-cabeca {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.folha-cabeca-texto {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.folha-cabeca-nome {
  color: var(--ink);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.folha-cabeca .atz-avatar.is-44,
.atz-avatar.is-44 {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  font-size: 0.9rem;
}

.folha-acoes .folha-principal {
  width: 100%;
  min-height: 52px;
  margin: 0.35rem 0 0.25rem;
}