/* Padrões de treino - biblioteca premium Elite AS */
.patterns-workspace {
  gap: 1rem;
}

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

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

.patterns-hero-text p {
  margin-top: 0.42rem;
  color: var(--muted);
  font-size: var(--t-sub);
  line-height: var(--t-sub-lh);
}

.patterns-new-btn {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  min-height: 4.2rem;
  padding: 0 1.4rem;
  border-radius: 1rem;
  border: none;
  background: var(--brand);
  color: var(--brand-ink);
  font-size: clamp(1rem, 3.8vw, 1.1rem);
  font-weight: 800;
  cursor: pointer;
  box-shadow: none;
}

.patterns-new-btn span {
  flex: 1;
  text-align: left;
}

.patterns-new-btn svg {
  width: 1.3rem;
  height: 1.3rem;
  flex-shrink: 0;
}

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

.pattern-summary-card {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.32rem;
  min-height: 7.6rem;
  padding: 0.9rem;
  overflow: hidden;
  border: 1px solid var(--borda);
  border-radius: 1rem;
  background: var(--card);
}

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

.pattern-summary-icon {
  display: inline-grid;
  width: 1.6rem;
  height: 1.6rem;
  place-items: center;
  color: var(--brand-strong);
}

.pattern-summary-icon svg {
  width: 1.42rem;
  height: 1.42rem;
  stroke: currentColor;
}

.pattern-summary-card span:not(.pattern-summary-icon) {
  color: rgba(247, 244, 235, 0.74);
  font-size: 0.78rem;
  font-weight: 780;
  line-height: 1.2;
}

.pattern-summary-card strong {
  position: relative;
  z-index: 1;
  color: var(--ink);
  font-size: var(--t-num-md);
  font-weight: var(--t-num-w);
  line-height: 0.96;
}

.pattern-summary-card small {
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.24;
}

.patterns-workspace .filter-chevron {
  transition: transform 200ms ease;
}

.patterns-workspace .filter-chevron.is-open {
  transform: rotate(180deg);
}

.pattern-search-field {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.7rem;
  min-height: 3.25rem;
  padding: 0 0.86rem;
  border: 1px solid var(--line);
  border-radius: 0.86rem;
  background: rgba(255, 255, 255, 0.04);
}

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

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

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

.pattern-search-field input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgb(from var(--brand-soft) r g b / 0.5);
  border-radius: 3px;
}

.pattern-search-field input::placeholder {
  color: rgba(247, 244, 235, 0.65);
  overflow: hidden;
  text-overflow: ellipsis;
}

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

.pattern-filter {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.16rem 0.58rem;
  min-height: 3.25rem;
  padding: 0.62rem 0.68rem;
  border: 1px solid var(--line);
  border-radius: 0.86rem;
  background: rgba(255, 255, 255, 0.04);
}

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

.pattern-filter-icon svg {
  width: 1.18rem;
  height: 1.18rem;
  stroke: currentColor;
}

.pattern-filter-label {
  color: rgba(247, 244, 235, 0.7);
  font-size: 0.68rem;
  font-weight: 850;
  line-height: 1;
}

.pattern-filter select {
  width: 100%;
  min-height: 1.72rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  /* [F0.2] 16px e o piso: abaixo disso o iPhone AMPLIA a pagina sozinho ao
     focar o campo, e a tela salta na cara de quem so queria filtrar. Como esta
     barra agora e a de TODAS as abas, o piso vale para todas de uma vez. */
  font-size: 1rem;
  font-weight: 820;
  outline: none;
  box-shadow: none;
}

.pattern-filter select:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgb(from var(--brand-soft) r g b / 0.5);
  border-radius: 3px;
}

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

.patterns-list-panel {
  display: grid;
  gap: 0.85rem;
  padding: 1rem;
  border: 1px solid var(--borda);
  border-radius: 1rem;
  background: var(--card);
}

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

.patterns-list-panel .section-title > div {
  display: grid;
  gap: 0.16rem;
  min-width: 0;
}

/* [P6] O cartao do padrao cortava "Nenhum aluno usa ainda" com reticencias —
   e justamente a frase que responde se vale a pena manter aquele molde. Se nao
   couber, quebra a linha. */
.pattern-exercise-preview {
  margin: 0;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pattern-preview b {
  min-width: 0;
  color: var(--ink);
  font-size: 0.84rem;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pattern-preview small {
  color: var(--brand-strong);
  font-size: 0.72rem;
  font-weight: 780;
  line-height: 1.15;
  white-space: nowrap;
}

.pattern-preview .pattern-preview-extra,
.pattern-preview.is-empty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.32rem;
  width: fit-content;
  min-height: 2rem;
  color: var(--muted);
}

.pattern-preview.is-empty {
  display: grid;
  justify-content: start;
  width: 100%;
}

.pattern-preview.is-empty strong {
  color: var(--ink);
}

@media (max-width: 68rem) {
  .patterns-toolbar {
    grid-template-columns: 1fr;
  }

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

@media (max-width: 57.99rem) {
  .pattern-filter-grid {
    grid-template-columns: 1fr;
  }

  .pattern-preview span {
    grid-template-columns: 1fr;
    gap: 0.2rem;
  }

  .pattern-preview b,
  .pattern-preview small {
    white-space: normal;
  }
}

@media (max-width: 24.5rem) {
  .patterns-summary-grid,
  .pattern-meta-grid {
    grid-template-columns: 1fr;
  }
}


/* Biblioteca de exercícios premium refactor v49 */
.exercise-library-page {
  max-width: 56.5rem !important;
  margin-inline: auto !important;
  gap: 0.76rem !important;
  padding-bottom: calc(var(--bottom-nav-height) + 2.75rem + var(--safe-bottom)) !important;
  overflow-x: hidden !important;
}

.library-hero {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 0.8rem !important;
}

.library-hero .eyebrow {
  color: var(--brand-strong) !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

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

/* ═══════════════════════════════════════════════════════════════════════
   [14.5] A BIBLIOTECA: A LINHA DE FATOS E A LINHA DO EXERCÍCIO.

   Saíram: três cartões de contador na primeira tela, e um cartão por
   exercício com imagem de 130px, pílula de categoria, três fatos com ícone,
   um bloco "Envie seu vídeo de execução" e três botões no rodapé —
   noventa e cinco blocos de CSS que existiam para tudo isso caber.
   ═══════════════════════════════════════════════════════════════════════ */
.library-hero .bib-fatos,
.bib-fatos {
  margin: 0.34rem 0 0 !important;
  color: var(--dim) !important;
  font-size: var(--t-fato) !important;
  line-height: 1.35 !important;
}

/* A base da miniatura da Biblioteca — o tamanho e o play vêm do bloco do
   [10.5] logo abaixo, que os três lugares compartilham. */
.bib-thumb {
  position: relative;
  display: grid;
  place-items: center;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--borda);
  border-radius: 8px;
  background: var(--cartao, rgba(255, 255, 255, 0.04));
  cursor: pointer;
}

.bib-thumb img,
.bib-thumb video { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }

/* [14B.4 A] "Novo exercício" é a ação principal da tela, e agora tem a forma
   de uma: âmbar, largura total, 48px, logo abaixo da linha de fatos. */
.bib-novo {
  width: 100% !important;
  min-height: 48px !important;
}

/* [14B.4 B] A FILEIRA DE FILTROS. Ela rola na horizontal quando não cabe —
   uma pílula por grupo muscular, e a biblioteca tem doze. */
.bib-filtros {
  display: flex !important;
  gap: 0.4rem !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  padding-bottom: 0.15rem !important;
}

.bib-filtros::-webkit-scrollbar { display: none !important; }

.bib-filtro {
  flex: 0 0 auto !important;
  min-height: 34px !important;
  padding: 0 0.75rem !important;
  border: 1.5px solid var(--borda) !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--muted) !important;
  font: inherit !important;
  font-size: var(--t-fato) !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}

.bib-filtro.is-escolhida {
  border-color: var(--brand) !important;
  background: rgba(var(--brand-rgb, 245, 158, 11), 0.12) !important;
  color: var(--ink) !important;
  font-weight: 600 !important;
}

.bib-lista {
  display: grid !important;
  gap: 0 !important;
}

.bib-linha {
  display: grid !important;
  grid-template-columns: 40px minmax(0, 1fr) auto auto !important;
  align-items: center !important;
  gap: 0.7rem !important;
  min-height: 60px !important;
  padding: 0.5rem 0 !important;
  border-bottom: 1px solid var(--borda) !important;
}

.bib-lista .bib-linha:last-child { border-bottom: 0 !important; }

.bib-linha-texto {
  display: grid !important;
  gap: 0.08rem !important;
  min-width: 0 !important;
}

.bib-linha-texto strong {
  overflow: hidden !important;
  color: var(--ink) !important;
  font-size: var(--t-corpo) !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.bib-linha-texto span {
  overflow: hidden !important;
  color: var(--dim) !important;
  font-size: var(--t-fato) !important;
  line-height: 1.25 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.library-search-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 0.58rem !important;
  align-items: stretch !important;
}

.library-search-field {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 0.56rem !important;
  min-height: 3.08rem !important;
  padding: 0 0.78rem !important;
  border-radius: 0.82rem !important;
  background: rgba(255, 255, 255, 0.045) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

.library-search-field svg {
  width: 1.22rem !important;
  height: 1.22rem !important;
  color: rgba(247, 244, 235, 0.72) !important;
}

.library-search-field input {
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 2.2rem !important;
  padding: 0 !important;
  border: 0 !important;
  outline: none !important;
  color: var(--ink) !important;
  background: transparent !important;
  /* RODADA 2R7 (F2): >= 16px para nao disparar o zoom de foco do Android. */
  font-size: 1rem !important;
  box-shadow: none !important;
}

.library-search-field input:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px rgb(from var(--brand-soft) r g b / 0.5) !important;
  border-radius: 3px !important;
}

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

.library-filter-menu {
  position: relative !important;
  min-width: 7.2rem !important;
}

.library-filter-menu summary {
  height: 100% !important;
  min-height: 3.08rem !important;
  display: inline-grid !important;
  grid-template-columns: auto auto auto !important;
  align-items: center !important;
  gap: 0.48rem !important;
  padding: 0 0.78rem !important;
  border-radius: 0.82rem !important;
  color: var(--brand-strong) !important;
  background: rgba(255, 255, 255, 0.045) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  cursor: pointer !important;
  list-style: none !important;
}

.library-filter-menu summary::-webkit-details-marker {
  display: none !important;
}

.library-filter-menu summary svg {
  width: 1.12rem !important;
  height: 1.12rem !important;
}

.library-filter-menu summary span {
  font-size: 0.86rem !important;
  font-weight: 650 !important;
}

.library-filter-panel {
  position: absolute !important;
  z-index: 30 !important;
  top: calc(100% + 0.44rem) !important;
  right: 0 !important;
  width: min(19rem, calc(100vw - 2.2rem)) !important;
  display: grid !important;
  gap: 0.48rem !important;
  padding: 0.68rem !important;
  border-radius: 0.86rem !important;
  background: rgba(11, 11, 11, 0.98) !important;
  border: 1px solid rgba(var(--brand-rgb), 0.2) !important;
  box-shadow: 0 1rem 2.2rem rgba(0, 0, 0, 0.48) !important;
}

.library-filter-panel label {
  display: grid !important;
  gap: 0.24rem !important;
  color: rgba(247, 244, 235, 0.72) !important;
  font-size: 0.72rem !important;
}

.library-filter-panel select {
  /* RODADA 2R7 (F2): sem esta linha o select herdava 0.72rem do label —
     o pior infrator do zoom de foco. O label segue 0.72rem (e legenda). */
  font-size: 1rem !important;
  min-height: 2.75rem !important;
  width: 100% !important;
  padding: 0 0.62rem !important;
  border-radius: 0.62rem !important;
  color: var(--ink) !important;
  background: var(--borda) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}


.library-play-badge {
  position: absolute !important;
  inset: 50% auto auto 50% !important;
  width: 2.72rem !important;
  height: 2.72rem !important;
  transform: translate(-50%, -50%) !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  color: var(--brand-ink) !important;
  background: var(--brand) !important;
  box-shadow: none !important;
}

.library-play-badge svg {
  width: 1.22rem !important;
  height: 1.22rem !important;
}

@media (max-width: 32.5rem) {
  .exercise-library-page {
    gap: 0.62rem !important;
  }

  .library-hero {
    gap: 0.58rem !important;
  }

  .library-search-row {
    gap: 0.46rem !important;
  }

  .library-filter-menu {
    min-width: 6.45rem !important;
  }

  .library-filter-menu summary {
    padding-inline: 0.62rem !important;
  }
}

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

/* ═══════════════════════════════════════════════
   SHEET MONTADOR DE TREINO (NOVO / EDITAR)
   ═══════════════════════════════════════════════ */

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

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

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

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

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

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

.workout-sheet-panel > .ag-body::-webkit-scrollbar { display: none; }

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

/* ── Seção de exercícios do montador (fiel ao protótipo) ────────── */
.wb-builder { display: grid; gap: 0.7rem; }

.wb-builder-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
}

.wb-builder-head h3 {
  margin: 0;
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.wb-builder-meta { color: var(--muted); font-size: 0.78rem; font-weight: 600; }

/* ── [Q2e] A LINHA DO EXERCÍCIO — UM LAYOUT SÓ ───────────────────────────
   [alça] [miniatura 56px] [texto flexível] [⋮], dentro e fora de bloco.
   SEPARAÇÃO POR FIO, não caixa por exercício: no tablet, cartão por linha
   ([Q0]) vira uma pilha de molduras e a lista some dentro delas. */
.wb-rows { display: grid; }

.wb-row {
  display: grid;
  grid-template-columns: auto auto 3.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.55rem;
  padding: var(--entre-linhas, 12px) 0;
  border: 0;
  border-bottom: 1px solid var(--borda);
  border-radius: 0;
  background: none;
}

.wb-rows > .wb-row:last-child,
.wb-bloco .wb-row:last-of-type { border-bottom: 0; }

.wb-row.is-dragging {
  cursor: grabbing;
  opacity: 0.9;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  transform: scale(1.01);
}

/* A MINIATURA é o componente do [R2] — o primeiro quadro do vídeo quando há,
   e um retângulo neutro quando não. Nunca a inicial do nome, nunca roxo.
   Só o TAMANHO mora aqui; o conteúdo é o mesmo da Biblioteca. */
.wb-thumb {
  /* [B4] O BOTÃO DE PLAY SOLTO NO MEIO DA TELA ERA ISTO.
     O selo do play é `position: absolute` com `inset: 50% auto auto 50%`, e
     esta caixa não era posicionada — então ele se ancorava no painel da
     folha e ia parar no meio da tela, por cima do campo de recado. Um
     `position: relative` devolve o play para dentro da miniatura. */
  position: relative;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--borda);
  border-radius: 0.6rem;
  background: var(--cartao, rgba(255, 255, 255, 0.04));
  cursor: pointer;
  flex-shrink: 0;
}

.wb-thumb img,
.wb-thumb video { width: 100%; height: 100%; object-fit: cover; }
.wb-thumb .library-play-badge {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
}

.wb-thumb .library-play-badge svg { width: 0.85rem; height: 0.85rem; fill: currentColor; stroke: none; }

/* [P3.7] NOME DE EXERCÍCIO NÃO SAI CORTADO. As reticências escondiam
   justamente o que separa dois exercícios parecidos — e o professor precisa
   ler o treino inteiro sem abrir nada. Se não couber, quebra a linha. */
.wb-row-nome {
  display: block;
  color: var(--ink);
  font-size: 1.03rem;
  font-weight: 600;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

/* [B7f 4] O BALÃO DA OBSERVAÇÃO. Ele diz UMA coisa: existe um recado neste
   exercício. Por isso herda a cor do nome e não ganha destaque nenhum —
   destacar faria a lista competir consigo mesma. Quem não tem observação não
   ganha ícone apagado nem a palavra "sem observação". */
.wb-row-balao {
  display: inline-flex;
  align-items: center;
  margin-left: 0.35rem;
  vertical-align: -0.1em;
  color: inherit;
  opacity: 0.7;
}

.wb-row-balao svg {
  width: 0.85rem;
  height: 0.85rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* [Q2e] A TERCEIRA LINHA: o que o aluno vem fazendo. Ícone de repetição e o
   número — é ela que decide a próxima carga. */
.wb-row-historico {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem;
  color: var(--muted);
  font-size: var(--t-fato, 13px);
  line-height: 1.3;
}

.wb-row-historico svg {
  width: 0.85rem;
  height: 0.85rem;
  flex-shrink: 0;
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wb-row-historico.is-vazio { color: var(--dim, #6B665D); }
.wb-row-sugestao { color: var(--ok, #22C55E); font-weight: 600; }

/* ── [T2] BLOCO 6: a linha mostra a PRESCRIÇÃO, não quatro caixinhas ──────
   As quatro caixinhas de número (séries/reps/carga/descanso) saíram: elas
   davam conta de um treino plano e não de bloco com método, aquecimento e
   progressão. No lugar, uma faixa tocável com o resumo em português e os
   selos — e a tela de prescrever para editar de verdade. */
/* O TEXTO da linha é o alvo de toque que abre o prescrever. Sem caixa: a
   separação já é o fio, e caixa dentro de linha com fio é moldura dupla. */
.wb-row-texto {
  all: unset;
  display: grid;
  gap: 0.18rem;
  min-width: 0;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.wb-row-presc-resumo {
  font-size: var(--t-fato, 13px);
  font-weight: 600;
  line-height: 1.25;
  color: var(--muted);
}

.wb-row-presc-selos { display: flex; flex-wrap: wrap; gap: 0.3rem; }

.wb-row-selo {
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: rgba(var(--brand-rgb), 0.14);
  color: var(--brand-strong);
  font-size: 0.7rem;
  font-weight: 800;
}

/* Caixa de seleção da linha: é ela que junta dois exercícios num bi-set.
   Alvo de toque de 44px, como manda a lei do bloco. */
.wb-row-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  flex: 0 0 auto;
  cursor: pointer;
}

.wb-row-check input { width: 1.15rem; height: 1.15rem; accent-color: var(--brand); }

.wb-row.is-selecionada { border-color: rgb(from var(--brand-soft) r g b / 0.6); }

.wb-row-rotulo {
  display: inline-grid;
  place-items: center;
  min-width: 2rem;
  height: 1.5rem;
  padding: 0 0.4rem;
  border-radius: 0.45rem;
  background: rgba(var(--brand-rgb), 0.18);
  color: var(--brand-strong);
  font-size: 0.72rem;
  font-weight: 850;
}

/* O BLOCO de método: barra lateral na cor do tema, os exercícios dentro e a
   linha que explica onde o descanso entra. */
/* [Q2f] FIO ÂMBAR DE 2px À ESQUERDA e um recuo. Sem caixa em volta: o bloco
   se distingue pela barra, não por mais uma moldura dentro da lista. */
/* [11.7] O PAR SE VÊ: fio âmbar de 3px correndo à esquerda das duas linhas,
   do começo da primeira ao fim da segunda, e um fundo âmbar bem fraco no
   bloco inteiro, que é o que o separa dos exercícios soltos. */
.wb-bloco {
  display: grid;
  padding: 0.15rem 0.5rem 0.35rem 0.75rem;
  border: 0;
  border-left: 3px solid var(--brand-strong);
  border-radius: 0;
  background: rgba(var(--brand-rgb), 0.035);
}

.wb-bloco-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-top: var(--entre-linhas, 12px);
  white-space: nowrap;
}

/* Uma linha só, e quem cede espaço é a explicação — não o nome do método
   nem o desfazer. Sem reticências ([P3.7]): se um dia não couber, quebra. */
.wb-bloco-explica {
  min-width: 0;
  flex: 0 1 auto;
  color: var(--dim, var(--muted));
  font-size: var(--t-rotulo, 11px);
}

/* [11.7] A palavra do método é TEXTO, não pílula: a pílula competia com os
   selos da prescrição, que são de outra natureza. */
.wb-bloco-selo {
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--brand-strong);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}


/* [11.7] "sem pausa" no lugar do relógio, no primeiro do par: não há tempo
   a mostrar, e um relógio com 0s diria que há. */
.wb-presc-sem-pausa {
  flex: 0 0 auto;
  color: var(--dim, var(--muted));
  font-size: var(--t-rotulo, 11px);
  white-space: nowrap;
}

.wb-acoes { display: grid; gap: 0.5rem; }

.wb-add-btn.is-ghost {
  border-style: solid;
  border-color: var(--borda);
  color: var(--ink);
  min-height: 2.75rem;
}

.wb-add-btn[disabled] { opacity: 0.45; cursor: default; }

.wb-empty {
  margin: 0;
  padding: 1rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
  border: 1px dashed var(--borda);
  border-radius: 0.8rem;
}

.wb-empty[hidden] { display: none; }

.wb-add-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 3rem;
  padding: 0 1rem;
  border: 1.5px dashed rgb(from var(--brand-soft) r g b / 0.6);
  border-radius: 0.8rem;
  background: transparent;
  color: var(--brand-strong);
  font-size: 0.9rem;
  font-weight: 750;
  cursor: pointer;
}

.wb-add-btn:hover { background: rgba(var(--brand-rgb), 0.06); }
.wb-add-btn svg { width: 1.15rem; height: 1.15rem; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; }

.wb-footer { display: flex; gap: 0.6rem; }
.wb-footer .secondary-action,
.wb-footer .primary-action { flex: 1; }

/* ── Reordenar exercícios por arrastar ──────────────────────────── */

.workout-row-drag {
  all: unset;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 8px;
  cursor: grab;
  color: var(--muted, #6b7280);
  touch-action: none;
}

.workout-row-drag:hover { background: rgba(255, 255, 255, 0.06); color: var(--ink); }
.workout-row-drag svg { width: 1.15rem; height: 1.15rem; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; }

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

/* ── Sheet Aplicar padrão ───────────────────────────────────────── */

.ap-student-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  min-height: 0;
}

.ap-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.55rem;
  border-radius: 99px;
  background: var(--dourado);
  color: var(--brand-ink);
  font-size: 0.78rem;
  font-weight: 600;
}

.ap-chip button {
  all: unset;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  opacity: 0.7;
}

.ap-chip button:hover { opacity: 1; }

.ap-student-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.6rem 0.85rem;
  cursor: pointer;
  border-bottom: 1px solid var(--borda);
}

.ap-student-row:last-child { border-bottom: 0; }

.ap-student-row:hover { background: rgba(255, 255, 255, 0.03); }

.ap-student-row input[type="checkbox"] {
  accent-color: var(--dourado);
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.ap-student-avatar {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  font-size: 0.7rem;
  font-weight: 700;
  flex-shrink: 0;
}

.ap-student-label {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
  font-size: 0.9rem;
  color: #fff;
}

/* [T3b] A SITUAÇÃO do aluno na linha: "já tem 3 treinos · A, B e C" ou "sem
   treino". Sem ela, aplicar um padrão a oito alunos é um tiro no escuro. */
.ap-student-situacao {
  color: var(--txt2);
  font-size: 0.76rem;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ap-student-row[hidden] { display: none; }

.ap-empty {
  padding: 1rem;
  color: var(--txt2);
  font-size: 0.85rem;
  text-align: center;
}

/* ── Seletor de exercícios (dentro do montador) ─────────────────── */

.ex-picker {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: end center;
}

.ex-picker[hidden] { display: none; }

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

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

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

.ex-picker-tools {
  flex-shrink: 0;
  padding: 0 1.1rem 0.6rem;
  border-bottom: 1px solid var(--borda);
}

.ex-picker-search {
  width: 100%;
  padding: 0.55rem 0.75rem;
  border-radius: 10px;
  border: 1px solid var(--borda);
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  font-size: 0.9rem;
}

.ex-picker-search::placeholder { color: var(--txt2); }

.ex-picker-chips {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.55rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 0.1rem;
}

.ex-picker-chips::-webkit-scrollbar { display: none; }

.ex-picker-chip {
  flex-shrink: 0;
  padding: 0.32rem 0.7rem;
  border-radius: 99px;
  border: 1px solid var(--borda);
  background: transparent;
  color: var(--txt2);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.ex-picker-chip.is-active {
  background: var(--dourado);
  border-color: var(--dourado);
  color: var(--brand-ink);
}

.ex-picker-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--borda) transparent;
}

.ex-picker-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.65rem 1.1rem;
  cursor: pointer;
  border-bottom: 1px solid var(--borda);
}

.ex-picker-item:last-child { border-bottom: 0; }
.ex-picker-item:hover { background: rgba(255, 255, 255, 0.03); }

.ex-picker-item input[type="checkbox"] {
  accent-color: var(--dourado);
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
}

.ex-picker-item-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.ex-picker-item-main strong {
  color: #fff;
  font-size: 0.9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ex-picker-item-muscle { color: var(--txt2); font-size: 0.78rem; }

.ex-picker-video {
  flex-shrink: 0;
  padding: 0.18rem 0.5rem;
  border-radius: 99px;
  font-size: 0.7rem;
  font-weight: 700;
}

.ex-picker-video.has-video { background: rgba(56, 189, 124, 0.16); color: #38bd7c; }
.ex-picker-video.no-video { background: rgba(255, 255, 255, 0.06); color: var(--txt2); }

.ex-picker-footer {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1.1rem;
  padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
  border-top: 1px solid var(--borda);
  background: var(--card);
}

.ex-picker-count { color: var(--txt2); font-size: 0.85rem; font-weight: 600; }
.ex-picker-footer .primary-action { flex-shrink: 0; }

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

/* ── Toast com botão de ação ────────────────────────────────────── */

.toast.has-action {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.toast-action-btn {
  all: unset;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--dourado);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════
   SHEET NOVO / EDITAR EXERCÍCIO
   ═══════════════════════════════════════════════ */

.ex-sheet-panel {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0.55rem 0 0;
  overflow: hidden;
}

.ex-sheet-panel .ag-head {
  padding: 0 1.1rem 0.5rem;
}

.ex-sheet-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
}

.ex-sheet-body::-webkit-scrollbar { display: none; }

.ex-form {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 0.2rem 1.1rem 0.75rem;
}

/* Cartão de vídeo 16:9 */
.ex-video-card {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  background: rgba(255, 255, 255, 0.03);
  border: 2px dashed rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ex-video-card--filled {
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.06);
  background: #111;
}

/* Variante com pré-visualização: o vídeo/thumbnail preenche o card; nome e ações
   ficam sobrepostos no topo para não brigar com os controles nativos do vídeo. */
.ex-video-card--preview {
  display: block;
}

.ex-video-preview-el {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

.ex-video-caption {
  position: absolute;
  top: 0.5rem;
  left: 0.6rem;
  max-width: 60%;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  color: #fff;
  pointer-events: none;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85);
  z-index: 2;
}

.ex-video-card--preview .ex-video-actions {
  top: 0.55rem;
  bottom: auto;
  z-index: 3;
}

.ex-video-active {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  color: #fff;
  text-align: center;
  padding: 1rem;
}

.ex-video-play-icon {
  width: 3rem;
  height: 3rem;
  background: rgba(var(--brand-rgb), 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ex-video-play-icon svg {
  width: 1.3rem;
  height: 1.3rem;
  margin-left: 2px;
  color: var(--brand-ink);
}

.ex-video-name {
  font-size: 0.82rem;
  opacity: 0.8;
  max-width: 80%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ex-video-meta {
  font-size: 0.72rem;
  opacity: 0.5;
}

.ex-video-actions {
  position: absolute;
  bottom: 0.55rem;
  right: 0.55rem;
  display: flex;
  gap: 0.35rem;
}

.ex-video-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.65rem;
  border-radius: 7px;
  border: 1px solid rgba(var(--brand-rgb), 0.5);
  color: var(--dourado);
  background: rgba(0, 0, 0, 0.65);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 150ms;
}

.ex-video-action-btn:hover { background: rgba(0, 0, 0, 0.85); }

.ex-video-action-btn--danger {
  border-color: rgba(239, 68, 68, 0.5);
  color: var(--erro);
}

/* Cartão de parâmetros padrão */
.ex-params-card {
  border: 1px solid var(--borda);
  border-radius: var(--radius);
  padding: 0.85rem 0.9rem 0.75rem;
}

.ex-params-title {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--txt2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.7rem;
}

.ex-params-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
}

@media (max-width: 28rem) {
  .ex-params-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Badge de status */
.ex-status-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.ex-status-label {
  font-size: 0.82rem;
  color: var(--txt2);
}

/* [14.7 C] O RODAPÉ TEM UMA AÇÃO. "Publicar" em largura total, e "salvar
   rascunho" como texto abaixo — eram três botões dividindo a linha, e o do
   meio (rascunho) tinha o mesmo tamanho do que se faz. */
.ex-sheet-footer {
  background: var(--card);
  border-top: 1px solid var(--borda);
  padding: 0.8rem 1.1rem calc(0.8rem + var(--safe-bottom, 0px));
  display: grid;
  gap: 0.3rem;
  justify-items: center;
  flex-shrink: 0;
}

.ex-sheet-footer:empty { display: none; }

/* Estes dois continuam vivos nos OUTROS rodapés que usam este componente —
   contratos e plano alimentar —, que não são deste bloco. */
.ex-cancel-btn {
  width: auto;
  min-width: 5.5rem;
  flex-shrink: 0;
}

.ex-footer-right {
  display: flex;
  gap: 0.5rem;
  flex: 1;
  justify-content: flex-end;
}

.ex-footer-right .secondary-action,
.ex-footer-right .primary-action {
  flex: 1;
  max-width: 9rem;
}

/* ...e onde eles aparecem, o rodapé volta a ser uma LINHA. */
.ex-sheet-footer:has(.ex-footer-right) {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-items: stretch;
}

.ex-sheet-footer .ex-publicar {
  width: 100%;
  min-height: 52px;
}

.ex-sheet-footer .ex-rascunho {
  min-height: var(--alvo, 44px);
  padding: 0 0.5rem;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════════════════
   [14B.5] O FORMULÁRIO DO EXERCÍCIO.
   ═══════════════════════════════════════════════════════════════════════ */

/* [14B.5 B] Meia largura cada, SEMPRE — o `.form-grid.two` só faz duas
   colunas acima de 42rem, e em 390 empilhava: 162px onde cabem 81. */
.ex-dois-campos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
}

/* [14B.5 A] A LINHA DOS GRUPOS SECUNDÁRIOS: o mesmo desenho da linha do
   vídeo. 56px, separada por fio, com o valor à direita e a setinha. */
.ex-linha-campo {
  border-top: 1px solid var(--borda);
  border-bottom: 1px solid var(--borda);
}

.ex-linha {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  min-height: 56px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.ex-linha-rotulo {
  flex: 0 0 auto;
  font-size: var(--t-corpo, 15px);
}

.ex-linha-valor {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--dim);
  font-size: var(--t-fato, 13px);
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* SETINHA DE CAMPO NÃO É AÇÃO — a mesma regra do [14B.3 E]. */
.ex-linha-seta {
  flex: 0 0 auto;
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: var(--dim);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* A folha dos grupos: a nuvem de pílulas, que saiu do formulário. */
/* UM ROLADOR SÓ NA FOLHA: quem rola é o corpo dela (`.folha-acoes-corpo`),
   não esta nuvem. Foi a lição do [14.6], e agora é guarda ([14B.6]). */
.sec-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.2rem 0 0.9rem;
}

.sec-rodape {
  padding-top: 0.2rem;
}

.sec-rodape .sec-pronto {
  width: 100%;
  min-height: 52px;
}

/* [14.7 B] A LINHA DO VÍDEO: 56px, o quadrado vazio de 40 e a ação. */
.ex-video-linha {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 56px;
  cursor: pointer;
}

.ex-video-quadro {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  background: var(--cartao, rgba(255, 255, 255, 0.04));
}

.ex-video-acao {
  color: var(--brand-strong);
  font-size: var(--t-corpo);
  font-weight: 600;
}

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

/* === VIDEO MODAL === */
.video-modal {
  position: fixed;
  inset: 0;
  z-index: 86;
  display: grid;
  place-items: end center;
}
.video-modal[hidden] { display: none; }

.video-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(3px);
  cursor: pointer;
}

.video-modal-panel {
  position: relative;
  z-index: 1;
  width: min(100%, 40rem);
  max-height: 92dvh;
  overflow-y: auto;
  background: var(--card);
  border-radius: 20px 20px 0 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 0;
  box-shadow: 0 -24px 64px rgba(0, 0, 0, 0.65);
  scrollbar-width: none;
}
.video-modal-panel::-webkit-scrollbar { display: none; }

.video-modal-body {
  padding: 0 1rem 0.5rem;
}

.vm-player-wrap {
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 0.5rem;
}
.vm-player {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border: none;
  display: block;
}

.vm-placeholder {
  aspect-ratio: 16 / 9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  background: rgba(255, 255, 255, 0.03);
  border: 2px dashed rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  margin-bottom: 0.5rem;
}
.vm-placeholder-icon svg {
  width: 48px;
  height: 48px;
  color: var(--txt2);
}
.vm-placeholder-text {
  font-size: 0.875rem;
  color: var(--txt2);
  margin: 0;
}
.vm-upload-btn { min-width: 9rem; }

.video-modal-footer {
  display: flex;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--borda);
}
.video-modal-footer .secondary-action,
.video-modal-footer .primary-action { flex: 1; }

/* ═══════════════════════════════════════════════════════════════════════
   [14.6] A FOLHA "USAR" — ONDE primeiro, QUAL depois.
   ═══════════════════════════════════════════════════════════════════════ */
.ut-titulo-bloco {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

/* O NOME DO EXERCÍCIO é um subtítulo, não uma ação: 13px apagado. Ele estava
   em 15px na cor do tema, do tamanho e da cor do que se toca. */
.ut-exercicio {
  overflow: hidden;
  color: var(--dim);
  font-size: var(--t-fato);
  font-weight: 400;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ut-form {
  display: grid;
  gap: 0.7rem;
  padding: 0 0 0.5rem;
}

/* ONDE: duas opções, e UMA está sempre escolhida. */
.ut-onde {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem;
}

.ut-onde-opcao {
  min-height: var(--alvo, 44px);
  padding: 0 0.6rem;
  border: 1px solid var(--borda);
  border-radius: 0.7rem;
  background: transparent;
  color: var(--muted);
  font-size: var(--t-corpo);
  font-weight: 500;
  cursor: pointer;
}

.ut-onde-opcao.is-escolhida {
  border-color: rgba(var(--brand-rgb), 0.45);
  background: rgba(var(--brand-rgb), 0.1);
  color: var(--ink);
  font-weight: 600;
}

.ut-busca {
  width: 100%;
  min-height: var(--alvo, 44px);
}

/* UM ROLADOR SÓ NA FOLHA — o corpo. A lista tinha o seu próprio, com altura
   máxima em dvh, e com o teclado aberto a caixa dela continuava do tamanho
   antigo: o fim dela ia parar embaixo do rodapé mesmo com o corpo rolado até
   o fim. É a mesma lição do [13.2], um nível abaixo. */
.ut-lista {
  display: grid;
  gap: 0;
}

/* A ESCOLHA É UMA LISTA DE LINHAS, separadas por fio — não cartões. */
.ut-opcao {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 58px;
  padding: 0.5rem 0;
  border-top: 1px solid var(--borda);
  cursor: pointer;
}

.ut-lista .ut-opcao:first-child { border-top: 0; }

/* [14B.4 D] AQUI SE ESCOLHE UM SÓ, então a marca é REDONDA — o quadradinho do
   seletor de exercícios existe porque lá se escolhe vários. 22px, cheia na cor
   do tema, com um visto dentro. */
.ut-opcao input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  margin: 0;
  border: 1.5px solid var(--borda);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.ut-opcao input[type="radio"]:checked {
  border-color: var(--brand);
  background-color: var(--brand);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310100c' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 13 9 17 19 7'/%3E%3C/svg%3E");
  background-size: 13px 13px;
  background-position: center;
  background-repeat: no-repeat;
}

.ut-opcao-texto {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
}

.ut-opcao-texto strong {
  overflow: hidden;
  color: var(--ink);
  font-size: var(--t-corpo);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ut-opcao-texto span {
  color: var(--dim);
  font-size: var(--t-fato);
}

.ut-vazio {
  margin: 0;
  padding: 0.6rem 0;
  color: var(--dim);
  font-size: var(--t-fato);
}

.ut-params-details { border-top: 1px solid var(--borda); padding-top: 0.5rem; }
.ut-params-summary {
  cursor: pointer;
  min-height: var(--alvo, 44px);
  display: flex;
  align-items: center;
  font-size: var(--t-corpo);
  color: var(--brand-strong);
  list-style: none;
  user-select: none;
}
.ut-params-summary::-webkit-details-marker { display: none; }
.ut-params-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
  padding-top: 0.6rem;
}

/* O RODAPÉ TEM UM ÂMBAR SÓ: "Adicionar" em largura total, e "cancelar" como
   texto. Eram dois botões do mesmo tamanho lado a lado — sair tinha o mesmo
   peso que fazer. */
.ut-rodape {
  display: grid;
  gap: 0.3rem;
  justify-items: center;
}

.ut-rodape .ut-adicionar {
  width: 100%;
  min-height: 52px;
}

.ut-rodape .ut-cancelar {
  min-height: var(--alvo, 44px);
  padding: 0 0.5rem;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

/* O rodapé de dois botões continua vivo na folha de ENVIAR VÍDEO, que não é
   deste bloco. */
.ut-footer-row {
  display: flex;
  gap: 0.75rem;
  padding-top: 0.25rem;
}
.ut-footer-row .secondary-action,
.ut-footer-row .primary-action { flex: 1; }

/* === ENVIAR VIDEO SHEET === */
.ev-body {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding-bottom: 0.5rem;
}

.ev-drop-area {
  aspect-ratio: 16 / 9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  border: 2px dashed rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: border-color 160ms, background 160ms;
}
.ev-drop-area:hover,
.ev-drop-area:focus-within {
  border-color: var(--dourado);
  background: rgba(var(--brand-rgb), 0.04);
}
.ev-file-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}
.ev-drop-icon svg { width: 38px; height: 38px; color: var(--txt2); }
.ev-drop-label { font-size: 0.9rem; color: #E5E7EB; margin: 0; text-align: center; padding: 0 1rem; }
.ev-drop-sub { font-size: 0.75rem; color: var(--txt2); margin: 0; }

.ev-preview-wrap {
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 10px;
  overflow: hidden;
}
.ev-preview-video { width: 100%; height: 100%; object-fit: contain; }

.ev-file-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.ev-file-name {
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ev-file-size { font-size: 0.75rem; color: var(--txt2); flex-shrink: 0; }

.ev-progress-wrap {
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  overflow: hidden;
}
.ev-progress-bar {
  height: 100%;
  background: var(--dourado);
  border-radius: 2px;
  transition: width 120ms linear;
}

.ev-error {
  font-size: 0.82rem;
  color: var(--erro);
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.ev-retry-btn { color: var(--dourado); font-size: 0.82rem; padding: 0; }

/* Aviso FIXO inline do limite de 30s (substitui o toast, que ficava atrás da
   sheet de tela cheia no iOS). Fica visível até o usuário escolher outro vídeo. */
.ev-inline-warning {
  margin-top: 0.85rem;
  padding: 0.75rem 0.9rem;
  border-radius: 0.75rem;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #FCA5A5;
  font-size: 0.85rem;
  line-height: 1.35;
  text-align: center;
}

.ev-file-actions {
  display: flex;
  gap: 0.6rem;
  align-items: center;
}
.ev-replace-label {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ── Student Workout List (biblioteca-style) ──────────────────────── */
.sw-workout-list {
  display: grid;
  gap: 0.68rem;
}

.sw-workout-card {
  display: grid;
  grid-template-columns: clamp(5.5rem, 28vw, 8rem) minmax(0, 1fr);
  gap: 0.66rem;
  padding: 0.62rem;
  border-radius: 1rem;
  background: var(--card);
  border: 1px solid var(--borda);
  overflow: visible;
}

.sw-workout-media,
.sw-workout-content {
  min-width: 0;
}

.sw-workout-thumb {
  position: relative;
  width: 100%;
  height: clamp(5rem, 22vw, 7rem);
  display: grid;
  place-items: center;
  border-radius: 0.72rem;
  background:
    linear-gradient(135deg,
      hsl(var(--sw-hue, 40), 45%, 25%),
      hsl(var(--sw-hue, 40), 30%, 16%));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.sw-workout-initial {
  color: rgba(247, 244, 235, 0.85);
  font-size: clamp(1.5rem, 7vw, 2rem);
  font-weight: 800;
  letter-spacing: 0.04em;
}

.sw-workout-content {
  display: grid;
  align-content: start;
  gap: 0.36rem;
}

.sw-workout-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.45rem;
}

.sw-workout-header h3 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(0.95rem, 3.8vw, 1.15rem);
  font-weight: 700;
  line-height: 1.12;
}

.sw-workout-header .badge {
  min-height: 1.42rem;
  padding: 0.18rem 0.48rem;
  font-size: 0.66rem;
  white-space: nowrap;
}

.sw-workout-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.26rem 0.52rem;
  align-items: center;
  color: rgba(247, 244, 235, 0.72);
  font-size: clamp(0.67rem, 2.5vw, 0.78rem);
}

.sw-workout-meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.24rem;
  min-width: 0;
}

.sw-workout-meta svg {
  width: 0.8rem;
  height: 0.8rem;
  color: var(--brand-strong);
  flex-shrink: 0;
}

.sw-workout-last {
  color: var(--muted);
  font-size: clamp(0.62rem, 2.2vw, 0.72rem);
}

.sw-workout-actions {
  margin-top: 0.26rem;
}

.sw-workout-actions .primary-action {
  min-height: 2.5rem;
  padding: 0.42rem 1.1rem;
  border-radius: 0.6rem;
  font-size: 0.82rem;
  font-weight: 670;
}

/* ===== Treinos do aluno na visao do gestor (aba Treinos do perfil) ===== */
.pw-create-btn {
  white-space: nowrap;
}

/* Resumo premium (Total / Publicados / Rascunhos / Arquivados) no topo da aba. */
.pw-group {
  margin-top: 0.9rem;
}

.pw-group-empty {
  margin: 0;
}

.pw-list {
  display: grid;
  gap: 0.55rem;
}

.pw-card {
  display: grid;
  grid-template-columns: clamp(3rem, 14vw, 3.75rem) minmax(0, 1fr);
  gap: 0.7rem;
  padding: 0.72rem;
  border-radius: 1rem;
  background: var(--card);
  border: 1px solid var(--borda);
  box-shadow: 0 0.35rem 0.9rem rgba(0, 0, 0, 0.18);
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.pw-card:hover {
  border-color: rgba(var(--brand-rgb), 0.4);
  box-shadow: 0 0.55rem 1.2rem rgba(0, 0, 0, 0.26);
}

/* Treino publicado: fina aresta na cor do tema à esquerda do selo. */
.pw-card--published .pw-thumb {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}

.pw-card--archived {
  opacity: 0.72;
  box-shadow: none;
}

.pw-card--archived .pw-thumb {
  filter: grayscale(0.55);
}

.pw-thumb {
  position: relative;
  width: 100%;
  height: clamp(3rem, 14vw, 3.75rem);
  display: grid;
  place-items: center;
  border-radius: 0.72rem;
  /* Selo do treino na cor do tema do professor (alinhado ao padrão premium). */
  background: linear-gradient(135deg, var(--brand), var(--brand-strong));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}

.pw-initial {
  color: var(--brand-ink);
  font-size: clamp(1.2rem, 5vw, 1.5rem);
  font-weight: 800;
  letter-spacing: 0.03em;
}

.pw-ex-count {
  position: absolute;
  bottom: -0.4rem;
  right: -0.4rem;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 0.28rem;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(12, 12, 12, 0.78);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 750;
  line-height: 1;
  box-shadow: 0 0 0 2px var(--card);
}

.pw-body {
  display: grid;
  align-content: start;
  gap: 0.32rem;
  min-width: 0;
}

.pw-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.45rem;
}

.pw-title {
  margin: 0;
  color: var(--ink);
  font-size: clamp(0.95rem, 3.6vw, 1.08rem);
  font-weight: 700;
  line-height: 1.14;
}

.pw-head .badge {
  min-height: 1.42rem;
  padding: 0.18rem 0.48rem;
  font-size: 0.66rem;
  white-space: nowrap;
}

.pw-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.24rem 0.52rem;
  align-items: center;
  color: rgba(247, 244, 235, 0.72);
  font-size: clamp(0.67rem, 2.4vw, 0.78rem);
}

.pw-meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.24rem;
  min-width: 0;
}

.pw-meta svg {
  width: 0.8rem;
  height: 0.8rem;
  color: var(--brand-strong);
  flex-shrink: 0;
}

.pw-last {
  color: var(--muted);
  font-size: clamp(0.62rem, 2.2vw, 0.72rem);
}

.pw-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.18rem;
}

/* Ação primária do card (Editar): pílula preenchida na cor do tema. */
.pw-actions > .mini-button {
  min-height: 2.4rem;
  padding: 0 0.95rem;
  border-radius: 999px;
  background: var(--brand);
  border: 1px solid transparent;
  color: var(--brand-ink);
  font-weight: 700;
}

/* ===== Duas portas de criação de treino (sheet "Criar treino para [nome]") ===== */
.student-profile-actions--center {
  display: flex;
  justify-content: center;
  margin-top: 0.85rem;
}

/* ===== Tela do treino (detalhe do aluno) ===== */
.swd-detail {
  padding-bottom: 5.5rem;
}

.swd-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.8rem;
}

.swd-head-thumb {
  width: 3.5rem;
  height: 3.5rem;
  display: grid;
  place-items: center;
  border-radius: 0.9rem;
  /* Quadrado dourado fixo, consistente com o card da lista de treinos. */
  background: linear-gradient(135deg, var(--accent, #efb24a), #c8881f);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
  flex-shrink: 0;
}

.swd-head-initial {
  color: #3a2a07;
  font-size: 1.55rem;
  font-weight: 800;
  line-height: 1;
}

.swd-head-info {
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
  min-width: 0;
}

.swd-meta-line {
  display: flex;
  flex-wrap: wrap;
  gap: 0.24rem 0.48rem;
  align-items: center;
  color: rgba(247, 244, 235, 0.72);
  font-size: 0.8rem;
}

.swd-meta-line span {
  display: inline-flex;
  align-items: center;
  gap: 0.24rem;
}

.swd-meta-line svg {
  width: 0.82rem;
  height: 0.82rem;
  color: var(--brand-strong);
}

.swd-title {
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.15rem, 4.5vw, 1.4rem);
  font-weight: 800;
  line-height: 1.12;
}

.swd-sub {
  color: var(--brand-strong);
  font-weight: 650;
  font-size: 0.88rem;
}

.swd-last {
  color: var(--muted);
  font-size: 0.82rem;
}

.swd-desc {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

.swd-ex-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
}

.swd-ex {
  display: grid;
  grid-template-columns: clamp(4.5rem, 22vw, 6rem) minmax(0, 1fr);
  align-items: start;
  gap: 0.65rem;
  padding: 0.72rem;
  border: 1px solid var(--borda);
  border-radius: 1rem;
  background: var(--card);
}

.swd-ex-media {
  position: relative;
}

.swd-ex-index {
  position: absolute;
  top: 0.3rem;
  left: 0.3rem;
  display: inline-grid;
  place-items: center;
  width: 1.42rem;
  height: 1.42rem;
  border-radius: 50%;
  background: rgb(from var(--brand-soft) r g b / 0.18);
  color: var(--brand-strong);
  font-weight: 750;
  font-size: 0.72rem;
  backdrop-filter: blur(4px);
}

.swd-ex-thumb {
  display: grid;
  place-items: center;
  width: 100%;
  height: clamp(4rem, 19vw, 5.5rem);
  padding: 0;
  border: 0;
  border-radius: 0.65rem;
  background: rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.swd-ex-thumb.has-video {
  cursor: pointer;
  background: #0a0a0a;
}

.swd-ex-thumb.is-placeholder {
  color: var(--muted);
  opacity: 0.55;
}

.swd-ex-play {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 999px;
  background: var(--brand);
  color: var(--brand-ink);
}

.swd-ex-play svg {
  width: 1.1rem;
  height: 1.1rem;
}

.swd-ex-no-video {
  width: 1.5rem;
  height: 1.5rem;
}

.swd-ex-body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.swd-ex-name {
  color: var(--ink);
  font-size: 0.96rem;
  font-weight: 700;
  line-height: 1.15;
}

.swd-ex-group {
  color: var(--brand-strong);
  font-size: 0.76rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.swd-ex-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.22rem 0.5rem;
  align-items: center;
  color: rgba(247, 244, 235, 0.72);
  font-size: clamp(0.66rem, 2.4vw, 0.76rem);
}

.swd-ex-meta-row span {
  display: inline-flex;
  align-items: center;
  gap: 0.22rem;
}

.swd-ex-meta-row svg {
  width: 0.78rem;
  height: 0.78rem;
  color: var(--brand-strong);
  flex-shrink: 0;
}

.swd-ex-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.7rem;
  margin-top: 0.12rem;
  color: var(--muted);
  font-size: 0.82rem;
}

.swd-ex-specs b {
  color: var(--ink);
  font-weight: 700;
}

.swd-ex-notes {
  margin-top: 0.18rem;
  color: var(--muted);
  font-size: 0.8rem;
  font-style: italic;
  line-height: 1.35;
}

.swd-footer {
  position: sticky;
  bottom: 0.6rem;
  margin-top: 0.4rem;
}

.swd-footer .swd-start {
  width: 100%;
}


/* ═══════════════════════════════════════════════════════════════════════
   [T2d] BLOCO 6 — PRESCREVER UM EXERCÍCIO
   Sheet que sobe por cima do montador: método em chips, séries em tabela
   (aquecimento e válida separados), ajustes e o histórico do aluno naquele
   exercício. Mesmo desenho de painel do seletor de exercícios.
   ═══════════════════════════════════════════════════════════════════════ */
.presc-sheet {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: grid;
  place-items: end center;
}

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

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

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

.presc-panel > .ag-head { flex-shrink: 0; padding: 0.55rem 1.1rem 0.5rem; }
.presc-panel > .ag-body { flex: 1; overflow-y: auto; padding: 0 1.1rem 1rem; display: grid; gap: 1.1rem; }
.presc-panel > .ag-sheet-footer { flex-shrink: 0; padding: 0.75rem 1.1rem calc(0.75rem + var(--safe-bottom, 0px)); border-top: 1px solid var(--borda); }

.presc-secao { display: grid; gap: 0.55rem; }

.presc-secao h4 {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Fazendo o treino: um exercício por vez. */









/* Fim do treino: o resumo e as três perguntas que só o aluno responde. */










/* ═══════════════════════════════════════════════════════════════════════
   [T5] BLOCO 6 — O QUE O PROFESSOR VÊ
   A sessão executada com o PRESCRITO ao lado do FEITO. Sem isso, "3×10 com
   40 kg" e "3×7 com 40 kg" ocupam o mesmo espaço e contam histórias
   diferentes.
   ═══════════════════════════════════════════════════════════════════════ */
.sessao-detalhe { display: grid; gap: 0.9rem; }

.sessao-numeros {
  display: flex;
  justify-content: space-around;
  padding: 0.7rem 0;
  border-radius: 0.8rem;
  background: rgba(255, 255, 255, 0.04);
}

.sessao-numeros span { display: grid; text-align: center; color: var(--muted); font-size: 0.72rem; }
.sessao-numeros strong { color: var(--ink); font-size: 1.2rem; font-weight: 820; }

.sessao-relato {
  display: grid;
  gap: 0.35rem;
  padding: 0.7rem 0.8rem;
  border-left: 3px solid var(--brand-strong);
  border-radius: 0 0.7rem 0.7rem 0;
  background: rgba(var(--brand-rgb), 0.08);
}

.sessao-relato p { margin: 0; font-size: 0.88rem; line-height: 1.35; }
.sessao-relato .mini-button { justify-self: start; margin-top: 0.2rem; }

.sessao-item { display: grid; gap: 0.3rem; }
.sessao-item h4 { margin: 0 0 0.15rem; font-size: 0.92rem; font-weight: 780; }

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

.sessao-series-head {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sessao-serie {
  padding: 0.4rem 0.5rem;
  border-radius: 0.55rem;
  background: rgba(255, 255, 255, 0.03);
  font-size: 0.84rem;
}

.sessao-serie.is-abaixo { background: rgba(255, 90, 79, 0.08); }
.sessao-serie-tipo { color: var(--muted); font-size: 0.75rem; font-weight: 700; }
.sessao-serie-prescrito { color: var(--muted); }
.sessao-serie-feito { font-weight: 750; }

.sessao-selo {
  padding: 0.08rem 0.42rem;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.sessao-selo.is-recorde { background: rgba(72, 215, 100, 0.16); color: #48d764; }
.sessao-selo.is-abaixo { background: rgba(255, 90, 79, 0.16); color: #ff5a4f; }

.sessao-nao-fez { margin: 0; color: var(--danger, #ff5a4f); font-size: 0.85rem; }

.sessao-acoes { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.sessao-acoes .mini-button { flex: 1; min-height: 44px; }

/* O card do treino na ficha: uso real e as últimas execuções, tocáveis. */
/* A linha da sessão vira botão: ela abre o detalhe (prescrito × feito). */
.entity-row--tocavel {
  width: 100%;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.entity-row--tocavel:active { transform: scale(0.995); }

/* [ADENDO/R1] Duração que o relógio do aparelho não sustenta: a tela diz isso
   em vez de mostrar "360 min" como se fosse verdade. */
.sessao-duracao-suspeita strong { color: var(--muted) !important; }
.sessao-duracao-suspeita { max-width: 8rem; }

/* ════════════════════════════════════════════════════════════════════
   PARADA TÉCNICA [P2] — UMA ESCURIDÃO SÓ.
   Folhas empilham (a camada é dada pela ORDEM DE ABERTURA, em app.js
   `_aplicarPilha`), e o fundo escuro pertence sempre à de CIMA. Sem
   isto, cada camada somaria a sua escuridão e a tela iria ficando preta
   a cada folha aberta — dois fundos a 72% dão 92%.
   A folha que está atrás continua inteira e com o seu conteúdo: o que
   some é só o véu dela.
   ════════════════════════════════════════════════════════════════════ */
.is-empilhada-atras > .workout-sheet-backdrop,
.is-empilhada-atras > .ex-picker-backdrop,
.is-empilhada-atras > .presc-backdrop,
.is-empilhada-atras > .ag-backdrop,
.is-empilhada-atras > .det-backdrop,
.is-empilhada-atras > .sheet-backdrop,
.is-empilhada-atras > .modal-backdrop,
.is-empilhada-atras > .video-modal-backdrop {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ════════════════════════════════════════════════════════════════════
   PARADA TÉCNICA [P4] — A MINIATURA NO SELETOR DE EXERCÍCIOS.
   A linha passou a mostrar o exercício, não uma palavra sobre ele. A
   miniatura é a MESMA da Biblioteca (.library-thumbnail, um componente
   só) — aqui ela só ganha o tamanho da linha. Com vídeo ou sem, o
   quadrado tem o mesmo tamanho: era a etiqueta de largura variável que
   serrilhava a lista.
   ════════════════════════════════════════════════════════════════════ */
/* [R2] A CAIXA DA MINIATURA NA LINHA. Tamanho fixo, quadrado, com corte de
   transbordo: nada que venha de dentro pode sair da linha. O componente
   (.ex-thumb) tem classe PROPRIA — a da Biblioteca (.library-thumbnail) e a
   imagem do topo do cartao, com altura fixa e tudo !important, e foi tentar
   reusar aquele TAMANHO que fez a coluna roxa escorrer por cima da lista. */
.ex-picker-thumb {
  flex-shrink: 0;
  display: block;
  width: 3.1rem;
  height: 3.1rem;
  overflow: hidden;
}

.ex-thumb {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--borda);
  border-radius: 0.6rem;
  /* O VAZIO E NEUTRO: cor de cartao e a borda de sempre. Sem cor derivada de
     letra, sem inicial escrita dentro. */
  background: var(--card-2, rgba(255, 255, 255, 0.04));
  cursor: pointer;
}

.ex-thumb img,
.ex-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.ex-thumb .library-play-badge {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: 1.35rem;
  height: 1.35rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
}

.ex-thumb .library-play-badge svg {
  width: 0.85rem;
  height: 0.85rem;
  fill: currentColor;
  stroke: none;
}

/* O trabalho que falta, no topo — nunca por linha. */
.ex-picker-resumo {
  margin: 0.15rem 0 0;
  color: var(--txt2);
  font-size: 0.78rem;
}

/* [P4d] NOME DE EXERCÍCIO NÃO SAI CORTADO. Reticências escondem
   justamente o que diferencia dois exercícios parecidos ("Supino reto"
   de "Supino reto com barra guiada"). Se não couber em uma linha, ele
   quebra para a segunda — a linha cresce, o dado fica. */
.ex-picker-item-main strong {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.25;
}

/* ════════════════════════════════════════════════════════════════════
   PARADA TÉCNICA [P3] — O TOPO E O RODAPÉ DO MONTADOR.
   O nome do treino É o título da tela, e se edita ali mesmo: pedir o
   mesmo nome duas vezes (uma no cabeçalho da folha, outra num campo no
   meio do formulário) deixava a primeira linha sem informação nenhuma.
   Embaixo dele, em cinza, de quem é o treino.
   ════════════════════════════════════════════════════════════════════ */
/* [Q2b] A IDENTIDADE: nome e pílulas à esquerda, o resumo VIVO à direita. */
.wb-topo {
  display: grid;
  gap: 0.2rem;
  padding-bottom: 0.2rem;
}

.q2-identidade {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--goteira, 20px);
}

.q2-identidade-esq { min-width: 0; flex: 1 1 auto; display: grid; gap: 0.4rem; }

.q2-pilulas { display: flex; flex-wrap: wrap; gap: 0.35rem; }

.q2-pilula {
  padding: 0.12rem 0.55rem;
  border: 1px solid var(--borda);
  border-radius: 999px;
  color: var(--muted);
  font-size: var(--t-rotulo, 11px);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}

.q2-pilula[data-q2-pilula="letra"] {
  border-color: rgb(from var(--brand-soft) r g b / 0.5);
  color: var(--brand-strong);
}

/* "31 min" grande e, embaixo, "4 exercícios · 11 séries". */
.q2-resumo {
  margin: 0;
  flex: 0 0 auto;
  text-align: right;
  color: var(--muted);
  font-size: var(--t-fato, 13px);
  line-height: 1.35;
}

.q2-resumo strong { color: var(--ink); font-size: 26px; font-weight: 800; }

/* [Q2g] O RECADO. */
.q2-recado > span {
  color: var(--muted);
  font-size: var(--t-rotulo, 11px);
  font-weight: 600;
  letter-spacing: 0.06em;
}

.q2-recado input { background: #131313; }

.wb-titulo {
  width: 100%;
  border: 0;
  border-bottom: 1px solid transparent;
  background: transparent;
  padding: 0.1rem 0 0.25rem;
  color: var(--ink);
  /* >= 16px: abaixo disso o Android amplia a tela sozinho ao focar. */
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.2;
}

.wb-titulo::placeholder { color: var(--muted); font-weight: 700; }

.wb-titulo:focus {
  outline: none;
  border-bottom-color: rgb(from var(--brand-soft) r g b / 0.7);
}

.wb-aviso-copia {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
}

/* O rodapé passa a ter DUAS faixas: adicionar exercício (sempre à vista,
   que era o pedido) e o que fazer com o treino. */
.wb-footer {
  display: grid;
  gap: 0.5rem;
}

/* [Q2h] O "+" E O TEXTO NA MESMA LINHA. O botão era um grid de uma coluna
   (herdado de .wb-add-btn), e o SVG caía numa linha acima do texto. */
.wb-footer-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 2.85rem;
}

.wb-footer-add .wb-footer-add-mais {
  display: inline-grid;
  place-items: center;
  color: var(--brand-strong);
}

.wb-footer-add .wb-footer-add-mais svg { width: 1.15rem; height: 1.15rem; }

.wb-footer-salvar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.wb-footer-salvar > * { flex: 1 1 8rem; }

/* [R2c] "Novo exercício" mora ao lado da BUSCA, não no canto do cabeçalho — o
   canto é do fechar. */
.ex-picker-busca-linha {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.ex-picker-busca-linha .ex-picker-search { flex: 1; min-width: 0; }

.ex-picker-novo { flex-shrink: 0; white-space: nowrap; }

/* ════════════════════════════════════════════════════════════════════
   CORREÇÃO 10/09 [R3/R4] — O TOPO E O RODAPÉ, DE NOVO.
   [R4] O campo do nome precisa PARECER editável: uma linha por baixo,
   visível em repouso, e o lápis à direita. Antes a borda era
   transparente até o foco — quem nunca tocou não sabia que dava.
   ════════════════════════════════════════════════════════════════════ */
.wb-titulo-campo {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  border-bottom: 1px solid var(--borda);
  padding-bottom: 0.15rem;
}

.wb-titulo-campo:focus-within {
  border-bottom-color: rgb(from var(--brand-soft) r g b / 0.85);
}

.wb-titulo-campo .wb-titulo {
  flex: 1;
  min-width: 0;
  border-bottom: 0;
  padding-bottom: 0;
}

.wb-titulo-lapis {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 1.1rem;
  height: 1.1rem;
  color: var(--muted);
}

.wb-titulo-lapis svg { width: 100%; height: 100%; }

.wb-titulo-campo:focus-within .wb-titulo-lapis { color: var(--brand-strong); }

/* [R3] O motivo de não poder publicar fica embaixo dos botões, e não numa
   caixa de aviso: ele é a legenda da ação, não um alerta. */
.wb-footer-motivo {
  margin: 0;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.3;
}

/* [R3a] Com o treino vazio, ADICIONAR é o botão sólido — o destaque nunca
   pode estar na ação impossível. */
.wb-footer-add.primary-action {
  border-style: solid;
  width: 100%;
  min-height: 3rem;
}

/* [R3c] O menu "..." do cabeçalho do montador. */
.wb-menu { margin-left: auto; }

/* [Q2b] Objetivo e nível moram aqui — a pílula que os mostra fica no corpo. */
.wb-menu-corpo { display: grid; gap: 0.6rem; min-width: 15rem; }

/* =========================================================================
   BLOCO 7 / [Q1] — "POR ONDE COMEÇAR"
   -------------------------------------------------------------------------
   A tela que substitui a folha em branco. Três caminhos, e antes deles o
   fato que deveria orientar a escolha.
   ========================================================================= */

.tela-q1 {
  gap: 0;
}

/* [B2] A FOLHA: 498px, canto de cima 20px, e uma alça cinza centrada.
   O resto da tela fica escurecido mostrando a ficha por trás — é ela que
   diz de onde o professor veio. */
.modal-panel:has(.tela-q1) {
  height: 498px;
  max-height: calc(100dvh - 2rem);
  border-radius: 20px 20px 0 0;
}

.modal-panel:has(.tela-q1)::before {
  content: "";
  display: block;
  width: 2.4rem;
  height: 4px;
  margin: 0 auto 0.2rem;
  border-radius: 999px;
  background: var(--borda);
}

/* "para Teste" — de quem é o treino, logo abaixo do título. */
.tela-q1 .q1-para {
  margin: -0.5rem 0 0.9rem;
  color: var(--muted);
  font-size: var(--t-fato, 13px);
  line-height: 1.3;
}

.tela-q1 .q1-rotulo-nome {
  display: block;
  margin: 0 0 0.4rem;
  color: var(--dim);
  font-size: var(--t-rotulo, 11px);
  font-weight: var(--t-rotulo-w, 600);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* [B2] O CAMPO VIRA UM CAMPO. Ele era um texto gigante sem moldura, do
   tamanho de um título — parecia o título da folha, não uma coisa
   editável, e o lápis ao lado era a única pista. */
.tela-q1 .q1-nome-campo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 56px;
  padding: 0 0.85rem;
  border: 1px solid var(--borda);
  border-radius: 10px;
  background: var(--surface, transparent);
}

.tela-q1 .q1-nome-campo:focus-within {
  border-color: var(--brand-strong);
}

.tela-q1 .q1-nome {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: var(--t-objeto, 20px);
  font-weight: 600;
  line-height: 1.2;
}

.tela-q1 .q1-lapis {
  flex: 0 0 auto;
  color: var(--brand-strong);
}

.tela-q1 .q1-lapis svg {
  width: 20px;
  height: 20px;
}

.tela-q1 .q1-explica {
  margin: 0.4rem 0 0;
  font-size: var(--t-fato);
  color: var(--muted);
}

/* o aviso do grupo parado: fio âmbar à esquerda, sem cartão */
.tela-q1 .q1-aviso {
  margin: 1.25rem 0 0;
  padding: 0.6rem 0 0.6rem 0.85rem;
  border-left: 2px solid var(--brand);
  font-size: var(--t-corpo);
  color: var(--ink);
}

.tela-q1 .q1-rotulo {
  display: block;
  margin: 1.75rem 0 0.6rem;
  font-size: var(--t-rotulo);
  font-weight: var(--t-rotulo-w);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--dim);
}

/* [B2] OS CAMINHOS VIRAM LINHAS SEPARADAS POR FIO, de 68px.
   Eram dois cartões com borda e fundo próprio, e dois cartões lado a lado
   pedem uma comparação que não existe: um deles é o caminho normal, o
   outro é o atalho de quem já tem padrão. Linha com fio é lista, e lista
   se lê de cima para baixo. */
.tela-q1 .q1-caminhos {
  display: grid;
  gap: 0;
}

.tela-q1 .q1-caminho {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  min-height: 68px;
  padding: 0.6rem 0;
  border: 0;
  border-top: 1px solid var(--borda);
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.tela-q1 .q1-caminho:last-child {
  border-bottom: 1px solid var(--borda);
}

/* Sem padrões, a linha aparece apagada e SEM SETA: seta é promessa de que
   tocar leva a algum lugar. */
.tela-q1 .q1-caminho[disabled] {
  opacity: 0.42;
  cursor: not-allowed;
}

.tela-q1 .q1-caminho[disabled] .q1-caminho-seta {
  display: none;
}

.tela-q1 .q1-caminho-icone {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(var(--brand-rgb), 0.12);
  color: var(--brand-strong);
}

.tela-q1 .q1-caminho-icone svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tela-q1 .q1-caminho-texto {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  gap: 0.15rem;
}

.tela-q1 .q1-caminho-texto strong {
  font-size: var(--t-corpo);
  font-weight: 600;
}

.tela-q1 .q1-caminho-texto span {
  font-size: var(--t-fato);
  color: var(--muted);
  overflow-wrap: anywhere;
}

.tela-q1 .q1-caminho-seta {
  flex: 0 0 auto;
  color: var(--dim);
}

.tela-q1 .q1-caminho-seta svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* [Q2a] O X NUNCA DESCE DE LINHA. O cabeçalho de folha é um grid de DUAS
   colunas (`.ag-head`, alunos.css) e o montador tem TRÊS coisas nele: o
   título, o "..." e o X. O terceiro filho caía para a segunda linha — e o
   fechar, que é o que a pessoa procura primeiro, ficava no meio do nada.
   Aqui o cabeçalho tem três colunas: quem cede espaço é o título. */
#workoutSheet .ag-head {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

/* =========================================================================
   BLOCO 7 / [Q3] — "ADICIONAR EXERCÍCIOS"
   ========================================================================= */

/* [Q3a] TRÊS COLUNAS no cabeçalho: o X tem coluna própria, o título é quem
   cede espaço, e "Novo exercício" fica à direita. Com as duas colunas do
   `.ag-head` comum, o terceiro filho caía para a linha de baixo — foi por
   isso que o [R2c] teve de tirar o botão daqui. Agora ele cabe. */
/* [B3] DUAS COLUNAS, e não mais três: "Novo exercício" desceu para a linha
   da contagem, e a terceira coluna vazia empurrava o X para longe da borda
   — o canto deixava de ser dele. */
#exPickerSheet .ag-head {
  grid-template-columns: minmax(0, 1fr) auto;
}

#exPickerSheet .ag-title {
  font-size: 19px;
  font-weight: 700;
}

#exPickerSheet .ex-picker-novo { white-space: nowrap; }

/* [Q3b] A FILA DE GRUPOS e o degradê que diz que ela continua. O degradê mora
   no PAI: dentro do próprio scroller ele rolaria junto com as pílulas, e a
   borda voltaria a ficar sem aviso. */
.ex-picker-chips-faixa {
  position: relative;
  margin-top: 0.55rem;
}

.ex-picker-chips-faixa::after {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  width: 56px;
  pointer-events: none;
  background: linear-gradient(to right, rgba(0, 0, 0, 0), var(--fundo, #0d0d0d) 85%);
}

.ex-picker-chips {
  margin-top: 0;
  /* Depois de rolar, a fila para numa borda de pílula em vez de no meio de
     uma: é o que tira o "Quadrí" do caminho de quem usa a fila. */
  scroll-snap-type: x proximity;
  scroll-padding-inline: 0 56px;
}

.ex-picker-chip { scroll-snap-align: start; }

/* A última pílula precisa poder chegar inteira à borda: sem esta folga o fim
   da lista fica embaixo do degradê para sempre. */
.ex-picker-chips::after {
  content: "";
  flex: 0 0 56px;
}

/* [Q3c]/[Q3d] AS DUAS SEÇÕES. */
.ex-picker-secao { display: block; }

.ex-picker-secao-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  padding: var(--entre-linhas, 12px) 0 0.35rem;
}

.ex-picker-secao-nota {
  color: var(--muted);
  font-size: var(--t-fato, 13px);
  white-space: nowrap;
}

/* [Q3e] A LINHA ganha a coluna da carga e a seta. */
.ex-picker-item {
  grid-template-columns: auto auto minmax(0, 1fr) auto auto;
}

.ex-picker-item input[type="checkbox"] {
  width: 22px;
  height: 22px;
}

.ex-picker-thumb {
  width: 52px;
  height: 52px;
}

.ex-picker-item-carga {
  display: grid;
  justify-items: end;
  gap: 0.1rem;
  text-align: right;
  white-space: nowrap;
}

.ex-picker-item-carga strong {
  color: var(--ink);
  font-size: var(--t-corpo, 15px);
  font-weight: 700;
}

.ex-picker-item-carga span {
  color: var(--muted);
  font-size: var(--t-rotulo, 11px);
}

.ex-picker-item-seta {
  all: unset;
  display: grid;
  place-items: center;
  min-width: var(--alvo, 44px);
  min-height: var(--alvo, 44px);
  color: var(--muted);
  cursor: pointer;
}

.ex-picker-item-seta svg {
  width: 1.05rem;
  height: 1.05rem;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* [Q3f] O RODAPÉ NÃO QUEBRA. "Nenhum selecionado" caía em duas linhas no
   celular; o número em destaque e o texto curto cabem numa só. */
.ex-picker-footer .ex-picker-count {
  white-space: nowrap;
  color: var(--muted);
  font-size: var(--t-fato, 13px);
}

.ex-picker-footer .ex-picker-count strong {
  color: var(--ink);
  font-size: var(--t-corpo, 15px);
  font-weight: 700;
}

.ex-picker-footer #exPickerAdd { white-space: nowrap; }

/* =========================================================================
   BLOCO 7 / [Q4] — "PRESCREVER"
   ========================================================================= */

#prescricaoSheet .ag-title { font-size: 17px; font-weight: 600; }

.presc-head-texto { min-width: 0; display: grid; gap: 0.1rem; }

/* De onde este exercício veio: "A1 do bi-set · Treino B de Ana Beatriz". */
.presc-onde {
  margin: 0;
  color: var(--muted);
  font-size: var(--t-fato, 13px);
  overflow-wrap: anywhere;
}

/* [Q4b] O QUE O ALUNO VEM FAZENDO — o primeiro bloco, antes dos campos. */
.presc-vem {
  display: grid;
  gap: 0.5rem;
  padding-bottom: var(--entre-blocos, 28px);
  border-bottom: 1px solid var(--borda);
}

.presc-vem-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
}

.presc-vem-desde { color: var(--muted); font-size: var(--t-fato, 13px); }

.presc-vem-vazio { margin: 0; color: var(--muted); font-size: var(--t-corpo, 15px); }

.presc-vem-corpo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--goteira, 20px);
}

.presc-vem-numeros { min-width: 0; flex: 1 1 12rem; display: grid; gap: 0.25rem; }

.presc-vem-atual {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.presc-vem-atual strong {
  color: var(--ink);
  font-size: 40px;
  font-weight: 800;
  line-height: 1;
}

.presc-vem-atual span { color: var(--muted); font-size: var(--t-corpo, 15px); }

.presc-vem-anteriores {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  color: var(--dim, #6B665D);
  font-size: var(--t-fato, 13px);
}

.presc-vem-marca {
  margin: 0;
  color: var(--ok, #22C55E);
  font-size: var(--t-fato, 13px);
  font-weight: 600;
}

/* A curva: só a linha, a base, o ponto de hoje e as duas pontas escritas. */
.presc-vem-curva { display: grid; gap: 0.2rem; flex: 0 1 320px; min-width: 0; }
.presc-vem-curva svg { width: 320px; max-width: 100%; height: auto; overflow: visible; }
.presc-vem-curva polyline { fill: none; stroke: var(--brand-strong); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.presc-vem-curva [data-curva-base] { stroke: var(--borda); stroke-width: 1; }
.presc-vem-curva circle { fill: var(--brand-strong); }

.presc-curva-pontas {
  display: flex;
  justify-content: space-between;
  color: var(--dim, #6B665D);
  font-size: var(--t-rotulo, 11px);
}

/* [Q4c] A SUGESTÃO. Verde escuro: é uma boa notícia, não um alerta. */
.presc-sugestao {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.7rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid rgba(34, 197, 94, 0.35);
  border-radius: 0.8rem;
  background: rgba(34, 197, 94, 0.09);
}

.presc-sugestao-icone {
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  flex: 0 0 auto;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.18);
  color: var(--ok, #22C55E);
}

.presc-sugestao-icone svg { width: 1rem; height: 1rem; stroke: currentColor; stroke-width: 2.2; fill: none; stroke-linecap: round; stroke-linejoin: round; }

.presc-sugestao-texto { flex: 1 1 14rem; min-width: 0; display: grid; gap: 0.15rem; }
.presc-sugestao-texto strong { color: var(--ink); font-size: var(--t-corpo, 15px); font-weight: 600; }
.presc-sugestao-texto span { color: var(--muted); font-size: var(--t-fato, 13px); }

.presc-sugestao-acoes { display: flex; align-items: center; gap: 0.5rem; flex: 0 0 auto; }

.presc-sugestao-usar {
  all: unset;
  padding: 0.45rem 0.85rem;
  border-radius: 0.6rem;
  background: var(--ok, #22C55E);
  color: #06210f;
  font-size: var(--t-fato, 13px);
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

/* [Q4d] AS SÉRIES: uma linha por série, separadas por fio. */
.presc-secao-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  padding-bottom: 0.35rem;
}

.presc-contagem { color: var(--muted); font-size: var(--t-fato, 13px); }

/* =========================================================================
   [11.6] O RODAPÉ DO PRESCREVER — um âmbar só, largura total
   A classe vem DOBRADA e com `!important` pelo mesmo motivo do rodapé do
   montador: o elemento carrega `.pf-footer` junto, que o define como linha
   com colunas próprias, e o botão ficava preso a uma delas.
   ========================================================================= */
.presc-footer.presc-footer {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  justify-items: stretch;
  gap: 0.4rem;
  text-align: center;
}

.presc-footer.presc-footer .presc-salvar {
  width: 100% !important;
  min-width: 100% !important;
  min-height: 52px;
  white-space: nowrap;
}

/* "cancelar" é TEXTO: não é botão, não tem borda, não é âmbar. Desistir não
   tem o peso de concluir. */
.presc-footer.presc-footer .presc-cancelar {
  justify-self: center;
  min-height: var(--alvo, 44px);
  padding: 0 0.5rem;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

/* =========================================================================
   [11.5] O MÉTODO: UMA LINHA E UMA FOLHA
   Eram sete pílulas em duas fileiras, ~120px fixos, para uma escolha que
   quase sempre é "Simples". A folha mora no `body` (z acima da folha da
   prescrição, que é 95) pelo mesmo motivo do [B5].
   ========================================================================= */
.presc-metodo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  width: 100%;
  min-height: 52px;
  padding: 0 0.75rem;
  border: 1px solid var(--borda);
  border-radius: 0.7rem;
  background: rgba(0, 0, 0, 0.25);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.presc-metodo-valor {
  min-width: 0;
  color: var(--ink);
  font-size: var(--t-corpo, 15px);
  font-weight: 600;
}

.presc-metodo-chevron {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  color: var(--dim, var(--muted));
}

.presc-metodo-chevron svg { width: 16px; height: 16px; }

.metodo-folha {
  position: fixed;
  inset: 0;
  z-index: 1200;
}

.metodo-fundo {
  position: absolute;
  inset: 0;
  background: rgba(10, 25, 22, 0.45);
}

.metodo-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);
}

.metodo-lista { display: grid; }

/* Linhas de lista, separadas por fio — não pílulas, não botões âmbar. */
.metodo-opcao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  width: 100%;
  min-height: 56px;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--borda);
  background: transparent;
  color: var(--ink);
  font-size: var(--t-corpo, 15px);
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

.metodo-opcao:first-child { border-top: 0; }

.metodo-opcao.is-atual { font-weight: 600; }

.metodo-marca {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  color: var(--brand-strong, var(--brand));
}

.metodo-marca svg { width: 18px; height: 18px; }

/* =========================================================================
   [11.3] A TABELA DAS SÉRIES
   O cabeçalho e a linha compartilham a MESMA grade — é isso que mantém
   "REPETIÇÕES" em cima da coluna das repetições. Medida em 390: 28 + 118 +
   130 + 24 e três goteiras de 12 = 336, dentro dos 350 da tela.
   ========================================================================= */
.ps-cabecalho,
.ps-linha {
  display: grid;
  grid-template-columns: 28px 118px minmax(0, 130px) 24px;
  column-gap: 12px;
  align-items: center;
}

.ps-cabecalho {
  padding-bottom: 0.3rem;
}

.ps-cabecalho span {
  color: var(--dim, var(--muted));
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
}

.ps-corpo { display: grid; }

/* O rótulo da seção é quem diz o que as linhas dela são: a linha só carrega
   o número. "AQUECIMENTO" e "VÁLIDAS" — e "VÁLIDAS" só existe quando há
   aquecimento, porque sem ele não há o que distinguir. */
.ps-grupo {
  padding: 0.55rem 0 0.3rem;
  color: var(--dim, var(--muted));
  font-size: var(--t-rotulo, 11px);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ps-linha {
  min-height: 48px;
  border-top: 1px solid var(--borda);
}

.ps-corpo > .ps-grupo + .ps-linha { border-top: 0; }

.ps-numero {
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}

.ps-reps {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 52px;
  align-items: center;
}

.ps-reps.is-unica { grid-template-columns: minmax(0, 1fr); }

.ps-reps em {
  color: var(--dim, var(--muted));
  font-size: 12px;
  font-style: normal;
  text-align: center;
}

/* 1rem é o piso do campo: abaixo disso o iPhone amplia a tela sozinho ao
   focar, e a tela inteira sai de lugar. */
.ps-linha input {
  width: 100%;
  height: 40px;
  min-width: 0;
  padding: 0 0.4rem;
  border: 1px solid var(--borda);
  border-radius: 0.5rem;
  background: rgba(0, 0, 0, 0.25);
  color: var(--ink);
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
}

/* Carga vazia diz "definir", não um traço: o traço parece um valor. */
.ps-carga::placeholder {
  color: var(--dim, var(--muted));
  font-size: var(--t-fato, 13px);
  font-weight: 400;
}

/* O x não é vermelho — não existe vermelho nesta paleta. 24px de desenho,
   44 de alvo: o ::after estende o toque sem empurrar a coluna. */
.ps-apagar {
  position: relative;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--dim, var(--muted));
  cursor: pointer;
}

.ps-apagar svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
}

.ps-apagar::after {
  content: "";
  position: absolute;
  inset: -10px;
}

/* Só drop-set usa: a linha ganha um segundo andar dentro dela mesma. */
.ps-quedas {
  display: grid;
  gap: 0.2rem;
  grid-column: 1 / -1;
  padding-bottom: 0.5rem;
}

.ps-quedas span {
  color: var(--muted);
  font-size: var(--t-rotulo, 11px);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ps-quedas input { text-align: left; }

/* O aquecimento é mais apagado: ele não é o treino, é a preparação dele. */
.ps-linha.is-aquecimento { opacity: 0.65; }
.ps-linha.is-aquecimento input { background: rgba(0, 0, 0, 0.28); }

.ps-acoes {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-top: 0.55rem;
}

.ps-add {
  all: unset;
  min-height: 2.75rem;
  color: var(--brand-strong, var(--brand));
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

/* Não é botão: é um atalho para quem já digitou a primeira linha. */
.ps-repetir {
  all: unset;
  margin-left: auto;
  min-height: 2.75rem;
  color: var(--dim, var(--muted));
  font-size: 12px;
  text-align: right;
  cursor: pointer;
}

.ps-repetir[hidden] { display: none; }

/* =========================================================================
   [11.4] A DUPLA PROGRESSÃO EM QUATRO LINHAS
   As linhas 2, 3 e 4 alinham pela esquerda do TÍTULO (coluna 2), não pela
   chave: é o título que elas continuam.
   ========================================================================= */
.presc-dupla {
  display: grid;
  grid-template-columns: 1.15rem minmax(0, 1fr);
  column-gap: 0.6rem;
  row-gap: 0.3rem;
  align-items: center;
}

.presc-dupla input[type="checkbox"] {
  width: 1.15rem;
  height: 1.15rem;
  accent-color: var(--brand);
}

.pd-titulo {
  display: flex;
  align-items: center;
  min-height: var(--alvo, 44px);
  color: var(--ink);
  font-size: var(--t-corpo, 15px);
  font-weight: 600;
  cursor: pointer;
}

.pd-quando,
.pd-valor,
.pd-nota { grid-column: 2; }

.pd-quando {
  color: var(--muted);
  font-size: var(--t-fato, 13px);
  line-height: 1.35;
}

.pd-valor {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* 1rem é o piso do campo: abaixo disso o iPhone amplia a tela ao focar. */
.pd-valor input {
  width: 82px;
  height: var(--alvo, 44px);
  padding: 0 0.5rem;
  border: 1px solid var(--borda);
  border-radius: 0.55rem;
  background: rgba(0, 0, 0, 0.25);
  color: var(--ink);
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
}

.pd-valor span {
  color: var(--ink);
  font-size: var(--t-corpo, 15px);
}

.pd-nota {
  color: var(--dim, var(--muted));
  font-size: 12px;
  line-height: 1.35;
}

/* [Q4e] OS PARÂMETROS em três colunas, sem caixa. */
.presc-parametros {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--goteira, 20px);
}

.presc-parametro { display: grid; gap: 0.15rem; min-width: 0; }

.presc-parametro > span {
  color: var(--muted);
  font-size: var(--t-rotulo, 11px);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.presc-parametro input {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--borda);
  background: transparent;
  padding: 0.2rem 0;
  color: var(--ink);
  font-size: 17px;
  font-weight: 600;
}

.presc-parametro input:focus { outline: none; border-bottom-color: var(--brand-strong); }

/* [B7f 4] A OBSERVAÇÃO PARA O ALUNO — a última seção antes do rodapé.
   Campo de texto de verdade (duas linhas), com a frase de quem lê logo
   abaixo em cinza. Ela não é aviso: é a resposta à única dúvida que o campo
   levanta — "isso aparece onde?". */
.presc-obs-campo {
  width: 100%;
  min-height: 3.2rem;
  resize: vertical;
  border: 1px solid var(--borda);
  border-radius: 0.6rem;
  background: transparent;
  padding: 0.55rem 0.7rem;
  color: var(--ink);
  font: inherit;
  font-size: var(--t-corpo, 15px);
  line-height: 1.4;
}

.presc-obs-campo:focus { outline: none; border-color: var(--brand-strong); }
.presc-obs-campo::placeholder { color: var(--muted); }

.presc-obs-ajuda {
  margin: 0.35rem 0 0;
  color: var(--muted);
  font-size: var(--t-fato, 13px);
  line-height: 1.35;
}

/* =========================================================================
   BLOCO 7 / [Q5] "PADRÃO SALVO" e [Q6] "APLICAR PADRÃO"
   ========================================================================= */

/* [Q5] A confirmação: janela centrada, e o que foi salvo em primeiro lugar. */
.padrao-salvo {
  display: grid;
  justify-items: center;
  gap: 0.6rem;
  width: min(540px, 100%);
  margin: 0 auto;
  padding: 0.4rem 0 0.2rem;
  text-align: center;
}

.padrao-salvo-selo {
  display: grid;
  place-items: center;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.16);
  color: var(--ok, #22C55E);
}

.padrao-salvo-selo svg {
  width: 1.6rem;
  height: 1.6rem;
  stroke: currentColor;
  stroke-width: 2.6;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.padrao-salvo-titulo {
  margin: 0;
  color: var(--ink);
  font-size: 26px;
  font-weight: 800;
  line-height: 1.15;
}

.padrao-salvo-conteudo {
  margin: 0;
  color: var(--brand-strong);
  font-size: var(--t-corpo, 15px);
  font-weight: 600;
}

.padrao-salvo-onde {
  margin: 0;
  color: var(--muted);
  font-size: var(--t-corpo, 15px);
}

/* A regra da cópia com o fio âmbar: é a coisa que mais gera dúvida depois. */
.padrao-salvo-regra {
  margin: 0.2rem 0 0;
  width: 100%;
  padding: 0.6rem 0.8rem;
  border-left: 2px solid var(--brand-strong);
  background: rgba(var(--brand-rgb), 0.05);
  color: var(--muted);
  font-size: var(--t-fato, 13px);
  text-align: left;
  line-height: 1.45;
}

.padrao-salvo-regra strong { color: var(--ink); }

.padrao-salvo-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  width: 100%;
  margin-top: 0.4rem;
}

.padrao-salvo-acoes .primary-action { flex: 1 1 12rem; }
.padrao-salvo-acoes .secondary-action { flex: 0 1 auto; }

/* [Q6] O cabeçalho diz qual padrão, e o que ele tem. */
.ap-head-texto { min-width: 0; display: grid; gap: 0.1rem; }

.ap-conteudo {
  margin: 0;
  color: var(--muted);
  font-size: var(--t-fato, 13px);
}

#apSheet .ag-title { font-size: 19px; font-weight: 700; }

/* Quem já recebeu, e quem está inativo: travados, e dizendo por quê. */
.ap-student-row.is-inativo { opacity: 0.45; }

.ap-student-row.is-ja-recebeu strong { color: var(--muted); }

.ap-student-row .link-button { flex: 0 0 auto; font-size: var(--t-fato, 13px); }

/* [Q6] O rodapé conta. */
.ap-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.ap-rodape-conta {
  color: var(--muted);
  font-size: var(--t-fato, 13px);
  white-space: nowrap;
}

.ap-rodape-conta strong { color: var(--ink); font-size: var(--t-corpo, 15px); font-weight: 700; }

/* =========================================================================
   BLOCO 7 / FASE 4 — [G3] NADA DE TEXTO QUEBRADO OU CORTADO

   A guarda achou, no celular de 390, o que ninguém tinha visto: os dois
   verbos de salvar, o contador do seletor, "Salvar prescrição" e o rótulo
   "RIR na reserva" partiam a frase em duas linhas. Botão que quebra deixa
   de parecer um objeto — vira dois pedaços de texto empilhados.

   A REGRA, em vez do conserto caso a caso: o texto de um botão NUNCA quebra.
   Quem cede é o espaço em volta — os botões passam a ocupar a linha inteira
   quando não couberem lado a lado.
   ========================================================================= */

.wb-footer-salvar > *,
.ex-picker-footer .primary-action,
.ex-picker-footer .ex-picker-count,
#prescricaoFooter button {
  white-space: nowrap;
}

/* Não cabendo lado a lado, cada um toma a linha: melhor dois botões inteiros
   em duas linhas do que dois botões partidos na mesma. */
.wb-footer-salvar > * { flex: 1 1 11rem; }

@media (max-width: 30rem) {
  .wb-footer-salvar > * { flex: 1 1 100%; }
  /* [Q4e] Os três parâmetros não cabem em três colunas num celular: viram
     duas, e o RIR ocupa a linha de baixo inteira. O rótulo continua inteiro. */
  .presc-parametros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .presc-parametros > :last-child { grid-column: 1 / -1; }
}

.presc-parametro > span { white-space: nowrap; }

/* =========================================================================
   [B3] ESCOLHER EXERCÍCIOS — a linha cabe em 56px
   -------------------------------------------------------------------------
   A MEDIDA QUE MANDA É A DA MINIATURA. Ela tinha ~50px e era ELA quem
   decidia a altura da linha: o texto ocupava menos e sobrava respiro dos
   dois lados. Em 40px ela cabe dentro da altura que o nome e o grupo já
   ocupam, a linha cai de ~74px para 56px, e passam a caber NOVE exercícios
   na tela em vez de seis. Numa biblioteca de 93, isso é metade das
   rolagens.
   ========================================================================= */
.ex-picker-item {
  min-height: 56px;
  /* O respiro vertical vem do min-height, não de padding somado à altura da
     miniatura — senão a linha volta a crescer sem ninguém pedir. */
  padding-block: 0;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
}

.ex-picker-thumb,
.ex-picker-item .ex-thumb {
  width: 40px;
  height: 40px;
  min-width: 40px;
  flex: 0 0 40px;
  border-radius: 8px;
}

/* Com vídeo: um círculo âmbar de 24px com o play dentro. Sem vídeo: um
   quadrado escuro e vazio — sem play, sem ícone, sem a palavra "sem
   vídeo". A ausência já diz. */
.ex-picker-item .ex-thumb .library-play-badge {
  width: 24px;
  height: 24px;
  background: var(--brand);
  color: #10100c;
}

.ex-picker-item .ex-thumb .library-play-badge svg {
  width: 12px;
  height: 12px;
}

.ex-picker-item .ex-thumb.is-placeholder::after,
.ex-picker-item .ex-thumb.is-placeholder .library-play-badge {
  display: none;
}

.ex-picker-achado {
  padding: 0;
  border-radius: 3px;
  background: rgba(var(--brand-rgb), 0.28);
  color: inherit;
}

/* A BUSCA: 44px, lupa à esquerda, "x" à direita enquanto houver texto. */
.ex-picker-busca-linha {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 44px;
  padding: 0 0.7rem;
}

.ex-picker-lupa,
.ex-picker-limpar {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  color: var(--muted);
}

.ex-picker-lupa svg,
.ex-picker-limpar svg {
  width: 18px;
  height: 18px;
}

.ex-picker-limpar {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
}

.ex-picker-busca-linha .ex-picker-search {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
}

/* A contagem à esquerda e "criar novo" à direita — o botão desceu do
   cabeçalho para cá, que é onde ele quer dizer alguma coisa. */
.ex-picker-resumo-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  min-width: 0;
}

.ex-picker-resumo-linha .ex-picker-resumo {
  margin: 0;
  min-width: 0;
}

.ex-picker-novo {
  flex: 0 0 auto;
  min-height: var(--alvo, 44px);
  padding: 0 0.2rem;
  border: 0;
  background: transparent;
  color: var(--brand-strong, var(--brand));
  font-size: var(--t-fato, 13px);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

/* O RODAPÉ COM GOTEIRA DOS DOIS LADOS. O botão encostava na borda direita:
   um alvo de toque colado na borda da tela é o que o polegar acerta sem
   querer ao rolar. */
.ex-picker-footer {
  padding-left: var(--goteira, 20px);
  padding-right: var(--goteira, 20px);
}

/* =========================================================================
   [12.3] O "ADICIONAR N" NÃO FOGE MAIS DA TELA
   -------------------------------------------------------------------------
   A GOTEIRA DO RODAPÉ NUNCA FOI O PROBLEMA — ela já estava em 20px dos dois
   lados desde o [10.7] (regra logo acima), e foi isso que as duas tentativas
   anteriores consertaram. O que escapa é o BOTÃO:

     src/styles/base.css:498   .primary-action { width: 100% }
     src/styles/treinos.css:1748   .ex-picker-footer .primary-action { flex-shrink: 0 }

   Todo botão primário do app nasce com 100% de largura, e cada tela desfaz
   isso com um `width: auto` próprio. O do seletor nunca ganhou o dele: com
   100% ele mede a faixa inteira (348px em 390), e com `flex-shrink: 0` não
   pode encolher para caber ao lado da contagem. Resultado medido antes:
   "Adicionar 1" indo de x=135 a x=483 numa tela de 390 — 93px fora da tela,
   pela direita. Com zero selecionados o texto é curto e cabe; por isso o
   defeito só aparece DEPOIS de escolher, que é justamente quando o botão é
   a única coisa que importa.

   Não é ordem de folha nem `!important` de outro arquivo: é uma regra de
   base que esta tela nunca desfez.
   ========================================================================= */
.ex-picker-footer .primary-action {
  width: auto;
  min-width: 0;
  flex-shrink: 1;
}

/* A folha ocupa a tela inteira no celular: uma borda lateral aí não desenha
   nada e ainda come 1px de cada lado — era isso que punha o texto em x=21 em
   vez de x=20. */
@media (max-width: 42rem) {
  .ex-picker-panel {
    border-left: 0;
    border-right: 0;
  }
}

/* =========================================================================
   [B4] MONTAR O TREINO
   ========================================================================= */

/* A IDENTIDADE EM UMA LINHA: a letra, o nome e o lápis. */
.q2-identidade {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}

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

.q2-identidade .wb-titulo-campo {
  flex: 1 1 auto;
  min-width: 0;
}

.q2-identidade .wb-titulo {
  font-size: var(--t-titulo, 24px);
  font-weight: 700;
}

/* A LINHA DE FATOS: uma linha, 13px, apagada. O "16 min" era uma manchete
   no canto superior direito — do tamanho do nome do treino, para dizer uma
   estimativa. */
.q2-resumo {
  margin: 0.35rem 0 0;
  color: var(--muted);
  font-size: var(--t-fato, 13px);
  font-weight: 400;
  line-height: 1.35;
  text-align: left;
}

/* A PRESCRIÇÃO COM DOIS LADOS. */
.wb-row-presc-resumo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  min-width: 0;
}

.wb-presc-trabalho {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  min-width: 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
}

.wb-presc-ponto { color: var(--dim); font-weight: 400; }

/* Carga que ainda não existe pesa menos — é o que falta, e o professor
   precisa achar isso correndo o olho pela lista. */
.wb-presc-carga.is-a-definir {
  color: var(--muted);
  font-weight: 400;
}

.wb-presc-descanso {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.22rem;
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
}

.wb-presc-relogio svg {
  width: 11px;
  height: 11px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ADICIONAR É A ÚLTIMA LINHA DA LISTA, separada por fio como as outras. */
.wb-add-linha {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 54px;
  padding: 0 0.2rem;
  border: 0;
  border-top: 1px solid var(--borda);
  background: transparent;
  color: var(--brand-strong, var(--brand));
  font-size: var(--t-corpo, 15px);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.wb-add-linha-mais {
  font-size: var(--t-objeto, 20px);
  font-weight: 400;
  line-height: 1;
}

/* O RODAPÉ: UMA COLUNA, UM ÂMBAR SÓ.
   A classe vem dobrada porque o elemento carrega `.pf-footer` junto, que o
   define como linha — e era isso que espremia "Publicar para Ana" em duas
   linhas dentro de um botão que deveria ocupar a largura toda. */
.wb-footer.wb-footer {
  display: grid;
  /* UMA COLUNA. Sem isto o `.pf-footer` mantém as colunas dele e o botão
     fica preso a uma delas — era assim que `width: 100%` dava 173px. */
  grid-template-columns: minmax(0, 1fr);
  justify-items: stretch;
  gap: 0.5rem;
  text-align: center;
}

.wb-footer.wb-footer .wb-footer-motivo {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.wb-footer.wb-footer .wb-publicar {
  /* `!important` porque `.primary-action` do rodapé já cravava uma largura
     própria — e era ela que deixava "Publicar para Ana" em duas linhas
     dentro de um botão de 173px numa faixa de 355. */
  width: 100% !important;
  min-width: 100% !important;
  min-height: 52px;
  white-space: nowrap;
}

/* "guardar sem enviar" é TEXTO: não é botão, não tem borda, não é âmbar.
   Quem não terminou não precisa de um destaque para sair. */
.wb-footer.wb-footer .wb-guardar {
  justify-self: center;
  min-height: var(--alvo, 44px);
  padding: 0 0.5rem;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.wb-footer.wb-footer .wb-guardar[disabled] { opacity: 0.45; cursor: not-allowed; }

.q2-recado-ajuda {
  display: block;
  margin-top: 0.3rem;
  color: var(--dim);
  font-size: 12px;
  line-height: 1.35;
}

.q2-recado input {
  min-height: 56px;
}

/* =========================================================================
   [B5] OPÇÕES DO TREINO — o "…" vira folha de baixo
   -------------------------------------------------------------------------
   Era um balão ancorado no botão: cobria a lista de exercícios, cortava o
   texto do nível ("Não definid") e punha dois CAMPOS e duas AÇÕES na mesma
   pilha sem dizer que são coisas diferentes. Agora é uma folha como todas
   as outras — cabeçalho com X, duas seções nomeadas, e nada de destrutivo
   dentro: sair é pelo X, e o X já pergunta.
   ========================================================================= */
.wb-opcoes-folha {
  position: fixed;
  inset: 0;
  z-index: 1200;
}

.wb-opcoes-folha[hidden] { display: none; }

.wb-opcoes-fundo {
  position: absolute;
  inset: 0;
  background: rgba(10, 25, 22, 0.45);
}

.wb-opcoes-folha .wb-menu-corpo {
  position: absolute;
  inset: auto 0 var(--teclado, 0px) 0;
  display: grid;
  align-content: start;
  gap: 0.55rem;
  width: 100%;
  min-width: 0;
  height: 502px;
  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);
}



.wb-menu-alca {
  display: block;
  width: 2.4rem;
  height: 4px;
  margin: 0 auto 0.4rem;
  border-radius: 999px;
  background: var(--borda);
}

.wb-menu-titulo-linha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.6rem;
}

/* [14B.4 C] Título e subtítulo num bloco só, para o X continuar no centro da
   primeira linha — a mesma razão do bloco de título da folha do compromisso. */
.wb-menu-titulo-bloco {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

/* UMA LINHA, com reticências: nome de exercício pode ser comprido, e o
   cabeçalho de uma folha não cresce. */
.wb-menu-titulo {
  margin: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wb-menu-subtitulo {
  overflow: hidden;
  color: var(--dim);
  font-size: var(--t-fato, 13px);
  font-weight: 400;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.wb-menu-rotulo {
  display: block;
  margin: 0.6rem 0 0.1rem;
  color: var(--dim);
  font-size: var(--t-rotulo, 11px);
  font-weight: var(--t-rotulo-w, 600);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.wb-campo > span {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--muted);
  font-size: var(--t-fato, 13px);
}

.wb-campo input,
.wb-campo select {
  width: 100%;
  min-height: 52px;
  padding: 0 0.85rem;
  border: 1px solid var(--borda);
  border-radius: 10px;
  background: var(--surface, transparent);
  color: var(--ink);
  font: inherit;
  font-size: var(--t-corpo, 15px);
}

/* O NÍVEL NÃO É CORTADO EM LARGURA NENHUMA. O `appearance: none` tira a
   seta nativa (que em 390 comia o texto) e devolve uma nossa, com espaço
   reservado para ela. */
.wb-campo-select select {
  appearance: none;
  padding-right: 2.4rem;
  text-overflow: ellipsis;
}

.wb-campo-select {
  position: relative;
}

/* [10.8] O chevron virou SVG e o truque de bordas giradas saiu. */
.wb-campo-select-caixa {
  position: relative;
  display: block;
}

/* A cor vem do seletor mais específico porque o `.field` do formulário
   pinta os filhos com a cor do texto — e a seta não é texto, é apoio. */
.wb-campo-select .wb-campo-chevron {
  color: var(--muted);
}

.wb-campo-chevron {
  position: absolute;
  top: 50%;
  right: 0.85rem;
  display: grid;
  place-items: center;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}

.wb-campo-chevron svg {
  width: 16px;
  height: 16px;
}

/* AS DUAS LINHAS DE PADRÃO: 66px, separadas por fio, como no [B2]. */
.wb-opcoes {
  display: grid;
  gap: 0;
}

.wb-opcao {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  min-height: 66px;
  padding: 0.5rem 0;
  border: 0;
  border-top: 1px solid var(--borda);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.wb-opcao:last-child { border-bottom: 1px solid var(--borda); }

.wb-opcao[disabled] {
  opacity: 0.42;
  cursor: not-allowed;
}

.wb-opcao[disabled] .wb-opcao-seta { display: none; }

.wb-opcao-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);
}

.wb-opcao-icone svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wb-opcao-texto {
  display: grid;
  flex: 1 1 auto;
  gap: 0.1rem;
  min-width: 0;
}

.wb-opcao-texto strong {
  color: var(--ink);
  font-size: var(--t-corpo, 15px);
  font-weight: 600;
}

.wb-opcao-texto span {
  color: var(--muted);
  font-size: var(--t-fato, 13px);
}

.wb-opcao-seta {
  flex: 0 0 auto;
  color: var(--dim);
}

.wb-opcao-seta svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

/* =========================================================================
   [10.4] A LINHA DO EXERCÍCIO — a conta que não fechava
   -------------------------------------------------------------------------
   A linha tinha ~157px de altura e TUDO quebrava: o nome em duas linhas,
   "3 × 10-12" em TRÊS, "carga a definir" em duas, o histórico em duas.

   A CAUSA ERA ARITMÉTICA, não estética: cinco colunas disputando 390px.
   Arrastar (16) + caixinha (22) + miniatura (40) + texto + menu (56), mais
   os espaços, deixavam ~204px para o texto — e o texto precisa de mais.

   O CONSERTO FOI TIRAR UMA COLUNA E ENCOLHER OUTRA: a caixinha só existe em
   modo de seleção (−32px com o espaço dela) e o menu deixa de ser um botão
   redondo grande para ser o ícone de 24px (−32px). O texto passa de 204
   para 238.

   ORÇAMENTO, em 390:
     goteira 20 + arrastar 16 + 12 + miniatura 40 + 12 + TEXTO 238 + 8 +
     menu 24 + goteira 20
   ========================================================================= */
.wb-row {
  grid-template-columns: 16px 40px minmax(0, 1fr) 24px;
  align-items: start;
  gap: 0 12px;
}

/* Em modo de seleção a caixinha volta, e é ela que come os 32px — aí o
   texto aperta, e está certo que aperte: o professor está escolhendo um
   par, não lendo a prescrição. */
.wb-row.em-selecao {
  grid-template-columns: 16px 22px 40px minmax(0, 1fr) 24px;
  gap: 0 10px;
}

.wb-row .workout-row-drag {
  width: 16px;
  min-width: 16px;
  min-height: var(--alvo, 44px);
  padding: 0;
  border: 0;
  background: transparent;
}

.wb-row .workout-row-drag svg {
  width: 16px;
  height: 16px;
}

/* O MENU VIRA O ÍCONE, não a caixa em volta dele: 24px de desenho com 44 de
   alvo de toque, alinhado ao TOPO da linha — ele age sobre a linha inteira,
   e o topo é onde a linha começa. [13.3] Agora ele é o mesmo
   `.menu-de-linha` das outras listas; só o alinhamento é desta tela. */
.wb-row .menu-de-linha { align-self: start; margin-top: 2px; }

/* A área de toque cresce sem o desenho crescer. */
.wb-row .wb-row-texto {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 0;
}

/* AS TRÊS LINHAS, e nenhuma delas quebra. */
.wb-row .wb-row-nome {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}

.wb-row .wb-row-presc-resumo {
  font-size: 13px;
  line-height: 1.25;
  white-space: nowrap;
}

/* 13px e não 14: em 14 a conta não fechava e "carga a definir" caía para a
   segunda linha. */
.wb-row .wb-presc-trabalho {
  font-size: 13px;
  white-space: nowrap;
}

.wb-row .wb-row-historico {
  flex-wrap: nowrap;
  font-size: 12px;
  line-height: 1.25;
  white-space: nowrap;
}

/* O cabeçalho da lista em modo de seleção: o rótulo à esquerda e a saída à
   direita. Um modo sem cancelar é uma armadilha. */
.wb-builder-cancelar {
  min-height: var(--alvo, 44px);
  padding: 0 0.2rem;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: var(--t-fato, 13px);
  font-weight: 500;
  cursor: pointer;
}

/* =========================================================================
   [10.5] A MINIATURA E O PLAY — as mesmas medidas nas duas telas
   -------------------------------------------------------------------------
   No montador o círculo do play estava MAIOR que a miniatura e vazava para
   fora dela. Em escolher exercícios o quadrado inteiro virou âmbar sólido,
   e o exercício com vídeo gritava mais alto que o próprio nome — a lista
   passava a destacar "tem vídeo" em cima de "qual exercício é".

   A REGRA, igual nas duas: quadrado de 40 com canto de 8, FUNDO ESCURO
   (o quadro do vídeo quando houver, um tom escuro quando não), e o play
   como um círculo ÂMBAR DE 20px centrado, com o triângulo escuro de 8px
   dentro. O círculo nunca ultrapassa a borda do quadrado.

   Sem vídeo: nenhum círculo, nenhum ícone, nenhum texto. Só o quadrado
   escuro, que existe para os nomes começarem todos na mesma coluna.
   ========================================================================= */
/* [14.5] A LINHA DA BIBLIOTECA usa a MESMA miniatura: mesmo quadrado de 40,
   mesmo play âmbar de 20. É um componente, não três desenhos parecidos. */
.bib-thumb,
.wb-thumb,
.ex-picker-item .ex-thumb {
  width: 40px;
  height: 40px;
  min-width: 40px;
  max-width: 40px;
  max-height: 40px;
  flex: 0 0 40px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--cartao, rgba(255, 255, 255, 0.05));
}

/* O `!important` AQUI NÃO É PREGUIÇA: a regra geral `.library-play-badge`
   (treinos.css:757) crava `width: 2.72rem !important` — 43,5px — e era ELA
   a causa do defeito. Um círculo de 43,5 dentro de um quadrado de 40 vaza
   no montador, e no seletor cobre o quadrado inteiro, o que fazia o quadrado
   parecer âmbar sólido. `!important` não se vence com especificidade. */
.bib-thumb .library-play-badge,
.wb-thumb .library-play-badge,
.ex-picker-item .ex-thumb .library-play-badge {
  position: absolute !important;
  inset: 50% auto auto 50% !important;
  transform: translate(-50%, -50%) !important;
  display: grid !important;
  place-items: center !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  border-radius: 999px !important;
  background: var(--brand) !important;
  color: #10100c !important;
}

.bib-thumb .library-play-badge svg,
.wb-thumb .library-play-badge svg,
.ex-picker-item .ex-thumb .library-play-badge svg {
  width: 8px !important;
  height: 8px !important;
  fill: currentColor;
  stroke: none;
}

/* Sem vídeo, nada dentro do quadrado. */
.bib-thumb.is-placeholder .library-play-badge,
.bib-thumb.is-placeholder::after,
.wb-thumb.is-placeholder .library-play-badge,
.wb-thumb.is-placeholder::after,
.ex-picker-item .ex-thumb.is-placeholder .library-play-badge,
.ex-picker-item .ex-thumb.is-placeholder::after {
  display: none;
}

/* [10.6] A LINHA DE FATOS NÃO QUEBRA em 390 e nenhum número nela tem corpo
   grande: os três são dados de apoio, e um deles é estimativa. */
.q2-resumo {
  font-size: 13px;
  font-weight: 400;
  white-space: nowrap;
}

.q2-resumo strong {
  font-size: inherit;
  font-weight: 400;
}

/* =========================================================================
   [10.7] ESCOLHER EXERCÍCIOS — os quatro acertos
   ========================================================================= */

/* 1. O CAMPO DE BUSCA VOLTA A PARECER UM CAMPO: fundo próprio, borda e
   canto de 10px. Uma lupa e um texto soltos no meio da folha não dizem
   "digite aqui" — dizem "isto é um rótulo". */
.ex-picker-busca-campo {
  border: 1px solid var(--borda);
  border-radius: 10px;
  background: var(--surface, rgba(255, 255, 255, 0.04));
}

.ex-picker-busca-campo:focus-within {
  border-color: var(--brand-strong, var(--brand));
}

/* 2. A seção sem título não deixa um espaço vazio onde ele estava. */
.ex-picker-secao-head:empty,
.ex-picker-secao-head [data-ex-secao-titulo]:empty {
  display: none;
}

/* 3. BOTÃO IMPOSSÍVEL DE USAR NÃO TEM A COR DA AÇÃO. */
.ex-picker-footer .ex-picker-add-neutro {
  min-height: var(--alvo, 44px);
  padding: 0 0.9rem;
  border: 1px solid var(--borda);
  border-radius: 0.7rem;
  background: transparent;
  color: var(--muted);
  font-size: var(--t-corpo, 15px);
  font-weight: 600;
  cursor: not-allowed;
}

/* =========================================================================
   [13.1] ESCOLHER UM PADRÃO — a folha de "Partir de um padrão"
   -------------------------------------------------------------------------
   Eram três linhas de texto corrido com "COPIADO" gritado em maiúscula e um
   cartão largo por padrão. Vira a mesma LINHA da aba Padrões, com o que
   decide a escolha na segunda linha, e a regra da cópia dita uma vez, em
   12px, sem gritar.
   ========================================================================= */
.escolher-padrao {
  display: grid;
  gap: 0.5rem;
  min-width: 0;
}

.escolher-padrao-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0;
}

.escolher-padrao-head .ag-title {
  margin: 0;
  color: var(--ink);
  font-size: var(--t-objeto, 20px);
  font-weight: 700;
}

/* O X REDONDO das outras folhas — era o único quadrado do app. */
.escolher-padrao-fechar.escolher-padrao-fechar {
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--muted) !important;
}

.escolher-padrao-fechar svg { width: 16px; height: 16px; }

/* A regra da cópia: uma linha, 12px, cor fraca. Maiúscula não é ênfase, é
   volume — e "COPIADO" gritado não fazia ninguém entender melhor. */
.escolher-padrao-regra {
  margin: 0;
  color: var(--dim, var(--muted));
  font-size: 12px;
  line-height: 1.35;
}

.escolher-padrao-busca {
  width: 100%;
  min-height: var(--alvo, 44px);
  padding: 0 0.75rem;
  border: 1px solid var(--borda);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink);
  font-size: 1rem;
}

.escolher-padrao-busca::placeholder { color: var(--dim, var(--muted)); }

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

.escolher-padrao-linha {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 66px;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--borda);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

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

.escolher-padrao-texto {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.escolher-padrao-seta {
  display: grid;
  place-items: center;
  color: var(--dim, var(--muted));
}

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

.escolher-padrao-vazio {
  margin: 0;
  padding: 1rem 0;
  color: var(--muted);
  font-size: var(--t-fato, 13px);
}

/* =========================================================================
   [13.2] APLICAR O PADRÃO A ALUNOS
   -------------------------------------------------------------------------
   Quatro consertos: o nome do padrão dito uma vez, a lista fora da caixa, os
   três campos com nome em português corrente, e um rodapé com um âmbar só.
   ========================================================================= */
.ap-form {
  display: grid;
  gap: 0.55rem;
  min-width: 0;
}

.ap-regra {
  margin: 0;
  color: var(--dim, var(--muted));
  font-size: 12px;
  line-height: 1.35;
}

.ap-busca {
  width: 100%;
  min-height: var(--alvo, 44px);
  padding: 0 0.75rem;
  border: 1px solid var(--borda);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink);
  font-size: 1rem;
}

.ap-busca::placeholder { color: var(--dim, var(--muted)); }

/* A LISTA SEM CAIXA: o fio entre as linhas basta para separá-las, e a
   moldura só estreitava o que já era estreito. */
.ap-lista {
  display: grid;
  gap: 0;
  min-width: 0;
  max-height: 17rem;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--borda) transparent;
}

.ap-lista .ap-student-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 58px;
  padding: 0.35rem 0;
  border: 0;
  border-top: 1px solid var(--borda);
  cursor: pointer;
}

.ap-lista .ap-student-row:first-child { border-top: 0; }

.ap-lista .ap-student-row input[type="checkbox"] {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  accent-color: var(--brand);
}

.ap-lista .ap-student-avatar {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
}

.ap-lista .ap-student-label {
  display: grid;
  gap: 1px;
  flex: 1 1 auto;
  min-width: 0;
}

.ap-lista .ap-student-label strong {
  color: var(--ink);
  font-size: var(--t-corpo, 15px);
  font-weight: 600;
}

/* O estado é APOIO: ele não pode ter o mesmo peso do nome. */
.ap-lista .ap-student-situacao {
  color: var(--muted);
  font-size: var(--t-fato, 13px);
  font-weight: 400;
}

.ap-substituir { flex: 0 0 auto; }

/* OS TRÊS CAMPOS. "começa em" e "status" lado a lado; o terceiro inteiro,
   dizendo a ação por extenso — eram dois cartões de 60px cada. */
/* O rótulo de seção é pequeno e apagado — `.hoje-rotulo` só tem desenho
   dentro da tela do aluno, e aqui ele nasceria do tamanho do texto normal. */
.ap-secao {
  display: block;
  margin-top: 0.3rem;
  color: var(--dim, var(--muted));
  font-size: var(--t-rotulo, 11px);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ap-campos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.ap-campo {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.ap-campo > span {
  color: var(--dim, var(--muted));
  font-size: 12px;
}

.ap-campo input,
.ap-campo select {
  width: 100%;
  height: 46px;
  min-width: 0;
  padding: 0 0.6rem;
  border: 1px solid var(--borda);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink);
  font-size: 1rem;
  appearance: none;
}

.ap-campo-caixa {
  position: relative;
  display: block;
  min-width: 0;
}

.ap-campo-caixa select { padding-right: 2rem; }

.ap-chevron {
  position: absolute;
  top: 50%;
  right: 0.6rem;
  display: grid;
  place-items: center;
  transform: translateY(-50%);
  color: var(--dim, var(--muted));
  pointer-events: none;
}

.ap-chevron svg { width: 16px; height: 16px; }

/* O RODAPÉ: um âmbar só, largura total, e "cancelar" como texto. A classe
   vem dobrada porque o elemento carrega `.pf-footer` junto, que o define
   como linha com colunas próprias. */
.ap-footer.ap-footer {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  justify-items: stretch;
  gap: 0.4rem;
  text-align: center;
}

.ap-footer.ap-footer .ap-rodape-conta {
  color: var(--dim, var(--muted));
  font-size: 12px;
  white-space: normal;
}

.ap-footer.ap-footer .ap-rodape-conta[hidden] { display: none; }

.ap-footer.ap-footer .ap-aplicar {
  width: 100% !important;
  min-width: 100% !important;
  min-height: 52px;
  white-space: nowrap;
}

/* Botão impossível de usar não tem a cor da ação ([10.7]). */
.ap-footer.ap-footer .ap-aplicar.is-neutro {
  border: 1px solid var(--borda);
  background: transparent;
  color: var(--muted);
  cursor: not-allowed;
}

.ap-footer.ap-footer .ap-cancelar {
  justify-self: center;
  min-height: var(--alvo, 44px);
  padding: 0 0.5rem;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

/* [13.2 A] NENHUM CONTEÚDO EMBAIXO DO RODAPÉ, EM NENHUMA ALTURA DE TELA.
   O painel já é uma coluna flex (cabeçalho / corpo rolável / rodapé), mas
   com o TECLADO ABERTO ele mantinha `height: 100dvh` enquanto a folha
   encolhia para a borda do teclado — e o rodapé, junto com o fim do corpo,
   ia parar embaixo dele. A regra do [B1] listava os outros painéis e não
   este. */
body.teclado-aberto .ag-sheet .ag-panel {
  height: calc(100dvh - var(--teclado, 0px)) !important;
  max-height: calc(100dvh - var(--teclado, 0px)) !important;
}