/*
 * « Pessoas » direction (wagon A40, 01/10/2026), loaded LAST and only under
 * ALUNO_DA_PESSOAS_ENABLED with ALUNO_UX_V2_ENABLED (pessoas/base.html and
 * pessoas/coach_base.html).
 *
 * The gym by its people and its place: photos and faces carry the
 * personality, the interface around them stays sober and light, the gym's
 * colour on the actions only. Every colour comes from the kit
 * (app/marca_tokens.py): the --p-* tokens and the --marca-* roles of the
 * screens of today, written on <html style>. Nothing here names a colour.
 *
 * Rules of this sheet (docs/DA-PESSOAS.md): the text in Source Sans 3, the
 * names and large figures in the kit's display font, tabular figures, never
 * a monospace face; radii of 4 to 6 px (photos, buttons, fields); separation
 * by 1 px rules and space; no card border by default, no vertical accent
 * rule, no outlined pill, no shadow, no gradient, no illustration.
 */

/* ------------------------------------------------------------------ */
/* Fonts: only the vendored ones (app/static/fonts)                    */
/* ------------------------------------------------------------------ */

@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/source-sans-3/SourceSans3-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/source-sans-3/SourceSans3-Semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------------------------ */
/* Rhythm, radii, type                                                  */
/* ------------------------------------------------------------------ */

:root {
  --fonte-texto: "Source Sans 3", "Segoe UI", Arial, sans-serif;
  --fonte-display: var(--p-fonte-display, "Source Sans 3", Arial, sans-serif);
  /* No monospace face anywhere: a figure is a tabular figure of the text
     face. Every rule of today that reads --fonte-mono gets the text face. */
  --fonte-mono: var(--fonte-texto);

  --raio-pequeno: 4px;
  --raio-medio: 5px;
  --raio-grande: 6px;
  --raio-pilula: 6px;
  --sombra-cartao: none;
  --sombra-flutuante: none;

  /* One rhythm of 4 px for every screen, the gutter 16 px (tokens.css
     steps 14, 20 and 28 become 12, 16 and 24). */
  --espaco-nano: 4px;
  --espaco-micro: 8px;
  --espaco-curto: 12px;
  --espaco-medio: 16px;
  --espaco-largo: 24px;
  --espaco-amplo: 40px;
  --espaco-generoso: 56px;
  --espaco-epico: 80px;

  --altura-cabecalho: 56px;
  --altura-nav-inferior: 54px;

  --tamanho-numero-heroi: 40px;
  --altura-numero-heroi: 1.05;
  --tamanho-h1: 26px;
  --altura-h1: 1.15;
  --tamanho-botao: 15px;
  --tamanho-h2: 18px;
  --tamanho-corpo: 16px;
  --altura-corpo: 1.5;
  --tamanho-dado: 16px;
  --tamanho-etiqueta: 14px;
}

@media (min-width: 600px) {
  :root {
    --tamanho-numero-heroi: 44px;
    --tamanho-h1: 28px;
  }
}

@media (min-width: 960px) {
  :root {
    --tamanho-numero-heroi: 44px;
  }
}

html {
  color-scheme: inherit;
}

body.pessoas {
  background: var(--cor-fundo-exterior);
  color: var(--p-tinta);
  font-family: var(--fonte-texto);
  font-size: var(--tamanho-corpo);
  line-height: var(--altura-corpo);
  font-variant-numeric: tabular-nums;
}

.pessoas :focus-visible {
  outline: 2px solid var(--p-marca-texto);
  outline-offset: 2px;
}

/* Names and titles: the kit's display font. */
.pessoas h1 {
  font-family: var(--fonte-display);
  font-weight: 640;
  font-variation-settings: normal;
  letter-spacing: -0.015em;
  color: var(--p-tinta);
}

.pessoas h2 {
  font-family: var(--fonte-texto);
  font-weight: 600;
  letter-spacing: 0;
  font-size: var(--tamanho-h2);
  color: var(--p-tinta);
}

.pessoas .rotulo {
  font-family: var(--fonte-texto);
  font-size: var(--tamanho-etiqueta);
  letter-spacing: 0;
  text-transform: none;
  color: var(--p-tinta-2);
}

.pessoas .dado {
  font-family: var(--fonte-texto);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.pessoas .numero-heroi {
  font-family: var(--fonte-display);
  font-weight: 640;
  font-variation-settings: normal;
  letter-spacing: -0.02em;
  color: var(--p-tinta);
}

.pessoas .numero-heroi small {
  font-family: var(--fonte-texto);
  font-size: var(--tamanho-etiqueta);
  font-weight: 400;
  color: var(--p-tinta-2);
}

/* ------------------------------------------------------------------ */
/* The frame                                                            */
/* ------------------------------------------------------------------ */

.p-coquilha {
  background: var(--p-fundo);
}

/* One gutter, 16 px, for the header and the content at every width (3.8
   gave the content 24 px from 600 px on, the header kept 16). */
.pessoas main.app-content {
  padding-left: var(--espaco-medio);
  padding-right: var(--espaco-medio);
}

.p-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-curto);
  min-height: var(--altura-cabecalho);
  padding: var(--espaco-micro) var(--espaco-medio);
  background: var(--p-fundo);
}

.p-topo__marca {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 0;
  color: var(--p-tinta);
  text-decoration: none;
}

.p-topo__nome {
  font-family: var(--fonte-display);
  font-weight: 640;
  font-size: 19px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

.p-topo__logo {
  height: 30px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
}

/* The member's initials: the way to Conta. The 44 px target is the link,
   the 36 px circle sits inside it. */
.p-eu {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex: none;
  min-width: 44px;
  min-height: 44px;
  text-decoration: none;
}

.p-eu__circulo {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--p-marca-suave);
  color: var(--p-marca-texto);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.02em;
}

.p-eu[aria-current="page"] .p-eu__circulo {
  background: var(--p-acao);
  color: var(--p-sobre-marca);
}

/* The tabs: text only, the active one in the brand's colour and bold. */
.p-rodape {
  background: var(--p-fundo);
  box-shadow: none;
}

.p-abas {
  display: flex;
  border-top: 1px solid var(--p-linha);
  background: var(--p-fundo);
  min-height: var(--altura-nav-inferior);
}

.p-abas__item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 2px;
  color: var(--p-tinta-2);
  font-size: 14px;
  font-weight: 400;
  text-decoration: none;
}

.p-abas__item[aria-current="page"] {
  color: var(--p-marca-texto);
  font-weight: 600;
}

@media (min-width: 600px) {
  .p-rodape {
    border-left: 1px solid var(--p-linha);
    border-right: 1px solid var(--p-linha);
  }
}

/* ------------------------------------------------------------------ */
/* Actions                                                              */
/* ------------------------------------------------------------------ */

.pessoas .botao {
  min-height: 46px;
  border-radius: var(--raio-medio);
  font-family: var(--fonte-texto);
  font-weight: 600;
  font-size: var(--tamanho-botao);
  letter-spacing: 0;
  transition: none;
}

.pessoas .botao:active,
.pessoas .botao-fantasma:active {
  transform: none;
}

.pessoas .botao-primario {
  background: var(--p-acao);
  color: var(--p-sobre-marca);
  border: 1px solid var(--p-marca-borda);
}

/* A secondary action: an outline (3:1 on the background), never a fill. */
.pessoas .botao-secundario {
  background: transparent;
  color: var(--p-tinta);
  border: 1px solid var(--p-contorno);
}

/* Wagon A48 (Q8 of D82): an action that destroys or cancels says so by its
   verb and its form, distinct from the main action under any brand, the
   red included: an outline of 2 px in the alert colour (the secondary's is
   1 px), its verb in the same colour; never a fill, never the brand's
   colour. The word that opens its confirmation in place stays a word. */
.pessoas .botao-perigo {
  background: transparent;
  color: var(--p-alerta);
  border: 2px solid var(--p-alerta);
}

/* A ghost action is a word in the brand's colour: no box. */
.pessoas .botao-fantasma {
  min-height: 44px;
  padding: 0 var(--espaco-micro);
  border: 0;
  border-radius: var(--raio-medio);
  background: transparent;
  color: var(--p-marca-texto);
  font-family: var(--fonte-texto);
  font-weight: 600;
  font-size: var(--tamanho-botao);
}

.pessoas .botao-fantasma--perigo {
  color: var(--p-marca-texto);
  border: 0;
}

.pessoas .link-discreto {
  color: var(--p-tinta-2);
  font-family: var(--fonte-texto);
  font-weight: 400;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pessoas .botao__icone {
  display: none;
}

/* ------------------------------------------------------------------ */
/* Surfaces: no card border, no shadow, rules and space                 */
/* ------------------------------------------------------------------ */

.pessoas .cartao {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--p-linha);
  border-radius: 0;
  padding: var(--espaco-medio) 0;
  margin-bottom: 0;
  box-shadow: none;
}

.pessoas .cartao-heroi {
  border-color: var(--p-linha);
}

.pessoas .cartao--recusa,
.pessoas .cartao--sucesso {
  border-top: 1px solid var(--p-linha);
}

.pessoas .plate {
  padding: var(--espaco-medio) 0;
  margin-bottom: 0;
  border: 0;
  border-bottom: 1px solid var(--p-linha);
  border-radius: 0;
  background: transparent;
}

.pessoas .plate-rotulo,
.pessoas .eyebrow {
  font-family: var(--fonte-texto);
  font-size: var(--tamanho-etiqueta);
  letter-spacing: 0;
  color: var(--p-tinta-2);
}

/* The imminence state: a word, no dot. */
.pessoas .plate-state::before {
  display: none;
}

.pessoas .plate-state {
  font-family: var(--fonte-texto);
  color: var(--p-atencao);
}

/* Illustrations of empty states: none under Pessoas (an empty state is one
   line of text); the templates stop rendering them, this rule is the net. */
.pessoas .estado-vazio__ilustracao,
.pessoas .resultado-celebracao__mascote,
.pessoas .magda-apoio__mascote {
  display: none;
}

.pessoas .estado-vazio {
  text-align: left;
  padding: var(--espaco-medio) 0;
}

/* Wagon A47 (D82): the DA2 empty state of before (telas.css centres
   `.empty`), still the one of Metas: on the gutter, like every state. */
.pessoas .empty {
  text-align: left;
}

.pessoas .estado-vazio h1 {
  font-size: var(--tamanho-h2);
  font-family: var(--fonte-texto);
  font-weight: 600;
}

.pessoas .estado-vazio p {
  margin-bottom: var(--espaco-medio);
  color: var(--p-tinta-2);
}

/* Lists of rows: a rule under each row, no box. */
.pessoas .row,
.pessoas .inicio-indice__item {
  border-bottom: 1px solid var(--p-linha);
  color: var(--p-tinta);
}

.pessoas .row__icone,
.pessoas .inicio-indice__icone,
.pessoas .row__seta {
  display: none;
}

/* ------------------------------------------------------------------ */
/* Forms: a 1 px outline (3:1), 4 px radius                             */
/* ------------------------------------------------------------------ */

.pessoas input[type="text"],
.pessoas input[type="tel"],
.pessoas input[type="email"],
.pessoas input[type="number"],
.pessoas input[type="password"],
.pessoas input[type="search"],
.pessoas input[type="date"],
.pessoas textarea,
.pessoas select,
.pessoas .field input,
.pessoas .formulario select,
.pessoas .formulario input[type="text"],
.pessoas .formulario input[type="email"],
.pessoas .formulario input[type="password"],
.pessoas .formulario textarea {
  border: 1px solid var(--p-contorno);
  border-radius: var(--raio-pequeno);
  background: var(--p-fundo);
  color: var(--p-tinta);
  font-family: var(--fonte-texto);
  font-variant-numeric: tabular-nums;
}

.pessoas input:focus,
.pessoas textarea:focus,
.pessoas select:focus {
  border-color: var(--p-marca-texto);
}

/* ------------------------------------------------------------------ */
/* Home (pessoas/inicio.html)                                           */
/* ------------------------------------------------------------------ */

.p-capa {
  display: block;
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: var(--raio-pequeno);
  margin-bottom: var(--espaco-curto);
  background: var(--p-superficie);
}

.p-ola {
  margin: 0 0 var(--espaco-curto);
  font-size: 16px;
  color: var(--p-tinta-2);
}

.p-prox__linha {
  display: flex;
  align-items: center;
  gap: var(--espaco-curto);
}

/* The coach's portrait: the kit's photo, else the initials on the brand's
   light tint. A face, never an icon. */
.p-retrato {
  flex: none;
  width: 60px;
  height: 72px;
  border-radius: var(--raio-pequeno);
  object-fit: cover;
}

.p-retrato--iniciais {
  display: grid;
  place-items: center;
  background: var(--p-marca-suave);
  color: var(--p-marca-texto);
  font-family: var(--fonte-display);
  font-weight: 640;
  font-size: 22px;
  letter-spacing: 0.01em;
}

.p-prox__texto {
  min-width: 0;
}

.p-quando {
  margin: 0;
  font-family: var(--fonte-display);
  font-weight: 640;
  font-size: 30px;
  line-height: 1.05;
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
  color: var(--p-tinta);
}

.p-com {
  margin: 4px 0 0;
  font-size: 15px;
  color: var(--p-tinta-2);
}

.p-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espaco-nano) var(--espaco-micro);
  margin-top: var(--espaco-medio);
}

.p-acoes .botao-primario {
  width: auto;
  padding: 0 var(--espaco-medio);
}

/* A row of actions, never the stacked buttons of today (telas.css gives a
   button after a button 8 px above it). */
.pessoas .p-acoes > * {
  margin-top: 0;
}

.p-prox--vazia .p-acoes {
  margin-top: var(--espaco-curto);
}

.p-vazio {
  margin: 0;
  font-size: 18px;
  color: var(--p-tinta);
}

/* The coach's words, the most personal line of the screen: larger than the
   text around them, signed and dated. */
.p-nota {
  margin-top: var(--espaco-largo);
  padding-top: var(--espaco-curto);
  border-top: 1px solid var(--p-linha);
}

.p-nota__de {
  margin: 0;
  font-size: 14px;
  color: var(--p-tinta-2);
}

.p-nota__texto {
  margin: 4px 0 0;
  font-size: 18px;
  line-height: 1.38;
  color: var(--p-tinta);
}

.p-nota__data {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--p-tinta-2);
}

/* The check-in and feedback invitations: the brand's light tint, the action
   outlined in ink (the pair Tinta sobre MarcaSuave is checked). */
.p-convite {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-curto);
  margin-top: var(--espaco-medio);
  padding: var(--espaco-curto);
  border-radius: var(--raio-pequeno);
  background: var(--p-marca-suave);
}

.p-convite__texto {
  margin: 0;
  min-width: 0;
}

.p-convite__texto strong {
  display: block;
  font-weight: 600;
  color: var(--p-tinta);
}

.p-convite__texto span {
  display: block;
  font-size: 14px;
  color: var(--p-tinta-2);
}

.p-convite .botao-secundario {
  flex: none;
  width: auto;
  min-height: 44px;
  padding: 0 var(--espaco-curto);
  border-color: var(--p-tinta);
  background: transparent;
}

.p-semana {
  margin: var(--espaco-medio) 0 0;
  font-size: 14px;
  color: var(--p-tinta-2);
}

.p-semana a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--p-marca-texto);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (min-width: 768px) {
  .p-capa {
    height: 220px;
  }

  /* Two columns only in the frame the route widens (`ux_duas_colunas`,
     when the right column has a note or an invitation to read); with the
     week's line alone, the one column of the other screens. */
  .app-coquilha--duas-colunas .p-inicio {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--espaco-amplo);
    align-items: start;
  }

  .app-coquilha--duas-colunas .p-inicio__coluna:last-child > :first-child {
    margin-top: 0;
  }

  .app-coquilha--duas-colunas .p-inicio__coluna:last-child .p-nota {
    padding-top: 0;
    border-top: 0;
  }
}

/* ------------------------------------------------------------------ */
/* Estúdio (pessoas/estudio.html)                                       */
/* ------------------------------------------------------------------ */

.p-estudio h1 {
  margin-bottom: var(--espaco-curto);
}

.p-bloco {
  margin-top: var(--espaco-medio);
  padding-top: var(--espaco-curto);
  border-top: 1px solid var(--p-linha);
}

.p-bloco h2 {
  margin: 0 0 var(--espaco-nano);
}

/* The number is text the member can select and copy, next to its link. */
.p-telefone {
  margin: 0;
  font-family: var(--fonte-display);
  font-weight: 640;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--p-tinta);
  user-select: text;
}

.p-contacto .p-acoes {
  margin-top: var(--espaco-curto);
}

.p-unidade__foto {
  display: block;
  width: 100%;
  height: 140px;
  object-fit: cover;
  border-radius: var(--raio-pequeno);
  margin: var(--espaco-micro) 0;
}

.p-unidade__morada {
  margin: 0;
  color: var(--p-tinta);
}

.p-unidade__horario {
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
  color: var(--p-tinta-2);
  font-size: 15px;
}

.p-unidade__contacto {
  margin: 0;
}

.p-unidade__contacto a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--p-marca-texto);
  font-weight: 600;
  text-decoration: none;
}

.p-equipa__lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: var(--espaco-curto);
  margin: var(--espaco-micro) 0 0;
  padding: 0;
  list-style: none;
}

.p-equipa__pessoa {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.p-equipa__pessoa .p-retrato {
  width: 84px;
  height: 100px;
}

.p-equipa__nome {
  font-weight: 600;
  color: var(--p-tinta);
}

@media (min-width: 768px) {
  .p-unidade__foto {
    height: 200px;
  }
}

/* ------------------------------------------------------------------ */
/* A quiet action: a word in the secondary ink, underlined              */
/* ------------------------------------------------------------------ */

.p-acao-quieta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--p-tinta-2);
  font: inherit;
  font-size: var(--tamanho-botao);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* A link inside a line of text: the line keeps its height, the target
   reaches 44 px. */
.p-sessao__estado a,
.p-conta__estado a {
  display: inline-block;
  padding-block: 12px;
  margin-block: -12px;
  color: var(--p-marca-texto);
  font-weight: 600;
  text-decoration: none;
}

/* ------------------------------------------------------------------ */
/* Sessões (pessoas/sessoes.html)                                       */
/* ------------------------------------------------------------------ */

.p-lista-sessoes {
  margin: var(--espaco-medio) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--p-linha);
}

.p-sessao {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  column-gap: var(--espaco-curto);
  align-items: start;
  padding: var(--espaco-medio) 0 var(--espaco-curto);
  border-bottom: 1px solid var(--p-linha);
}

.p-sessao > .p-retrato {
  grid-column: 1;
}

.p-retrato--pequeno {
  width: 44px;
  height: 52px;
}

.p-retrato--pequeno.p-retrato--iniciais {
  font-size: 16px;
}

.p-sessao__corpo {
  grid-column: 2;
  min-width: 0;
}

.p-sessao__dia {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: var(--p-tinta-2);
}

.p-sessao__hora {
  margin: 0;
  font-family: var(--fonte-display);
  font-weight: 640;
  font-size: 28px;
  line-height: 32px;
  letter-spacing: -0.01em;
  color: var(--p-tinta);
}

.p-sessao .p-com {
  margin-top: var(--espaco-nano);
}

.p-sessao__estado {
  margin: var(--espaco-micro) 0 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--p-tinta-2);
}

.p-sessao__estado + .p-sessao__estado {
  margin-top: var(--espaco-nano);
}

.p-sessao__acoes {
  margin-top: var(--espaco-micro);
  gap: 0 var(--espaco-medio);
}

.p-sessao__acoes .botao-fantasma {
  padding: 0;
}

/* The reservation's QR, one tap away: a quiet word, then the code. */
.p-codigo summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--p-tinta-2);
  font-size: var(--tamanho-botao);
  text-decoration: underline;
  text-underline-offset: 3px;
  list-style: none;
  cursor: pointer;
}

.p-codigo summary::-webkit-details-marker {
  display: none;
}

/* The QR keeps the size it is drawn at (app/qr.py: no viewBox, it never
   stretches); its block hugs it. */
.pessoas .qr-bloco svg {
  width: auto;
  max-width: none;
  height: auto;
}

.p-codigo .qr-bloco {
  display: inline-flex;
  align-items: flex-start;
  width: auto;
  margin: var(--espaco-micro) 0 0;
  padding: 0;
  border: 1px solid var(--p-linha);
  border-radius: var(--raio-pequeno);
  background: var(--marca-branco);
}

.p-codigo__legenda {
  margin: var(--espaco-micro) 0 var(--espaco-nano);
  font-size: 14px;
  color: var(--p-tinta-2);
}

.p-sessoes__mais {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--espaco-medio);
  margin: var(--espaco-medio) 0 0;
}

.p-sessoes__mais a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--p-marca-texto);
  font-weight: 600;
  text-decoration: none;
}

.p-sessoes .p-prox--vazia {
  margin-top: var(--espaco-medio);
}

/* ------------------------------------------------------------------ */
/* Conta (pessoas/conta.html)                                           */
/* ------------------------------------------------------------------ */

.p-conta__nome {
  margin-bottom: 0;
  overflow-wrap: anywhere;
}

.p-cartao {
  margin-top: var(--espaco-largo);
}

.p-cartao h2 {
  margin: 0 0 var(--espaco-micro);
}

/* The entry card: dark on white whatever the kit, for the reader at the
   reception; left on the gutter, never centred. */
.p-cartao .qr-bloco {
  display: inline-flex;
  align-items: flex-start;
  width: auto;
  margin: 0;
  padding: 0;
  border: 1px solid var(--p-linha);
  border-radius: var(--raio-pequeno);
  background: var(--marca-branco);
}

.p-cartao__legenda {
  margin: var(--espaco-micro) 0 0;
  font-size: 14px;
  color: var(--p-tinta-2);
}

.p-linhas {
  display: flex;
  flex-direction: column;
  margin-top: var(--espaco-largo);
  border-top: 1px solid var(--p-linha);
}

.p-linha {
  display: flex;
  align-items: center;
  min-height: 48px;
  border-bottom: 1px solid var(--p-linha);
  color: var(--p-tinta);
  text-decoration: none;
}

.p-conta__bem-estar {
  margin-top: var(--espaco-largo);
  padding-top: 0;
  border-top: 0;
}

.p-conta__estado {
  margin: 0;
  color: var(--p-tinta-2);
}

.p-conta__fim {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--espaco-largo);
  margin-top: var(--espaco-largo);
}

.p-sair {
  margin: 0;
}

/* ------------------------------------------------------------------ */
/* The screens of 3.8 under the kit: days, slots, scales, results       */
/* ------------------------------------------------------------------ */

/* A screen's title with its context on the right (Marcar and its month). */
.p-cabecalho {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--espaco-curto);
}

.p-cabecalho h1 {
  margin-bottom: 0;
}

.p-cabecalho__aux {
  margin: 0;
  color: var(--p-tinta-2);
}

.pessoas .marcar-quota {
  margin: var(--espaco-micro) 0 var(--espaco-medio);
  font-size: 14px;
  color: var(--p-tinta-2);
}

/* The days: a weekday and its number, no box; today's number in the
   brand's colour, the chosen day filled with it. */
.pessoas .dias-lista {
  gap: var(--espaco-nano);
  margin-bottom: var(--espaco-medio);
  padding-right: 0;
}

.pessoas .dia-opcao {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 56px;
  padding: var(--espaco-micro) 0;
  border: 0;
  border-radius: var(--raio-pequeno);
  background: transparent;
  text-decoration: none;
}

.pessoas .dia-opcao__letra {
  font-family: var(--fonte-texto);
  font-size: 13px;
  line-height: 16px;
  letter-spacing: 0;
  color: var(--p-tinta-2);
}

.pessoas .dia-opcao__numero {
  margin-top: 2px;
  font-family: var(--fonte-display);
  font-size: 20px;
  font-weight: 640;
  font-variation-settings: normal;
  line-height: 24px;
  color: var(--p-tinta);
}

.pessoas .dia-opcao--hoje:not(.dia-opcao--selecionada) .dia-opcao__numero {
  color: var(--p-marca-texto);
}

.pessoas .dia-opcao--selecionada {
  background: var(--p-acao);
}

.pessoas .dia-opcao--selecionada .dia-opcao__letra,
.pessoas .dia-opcao--selecionada .dia-opcao__numero {
  color: var(--p-sobre-marca);
}

/* The slots, the history, the presences, the sessions of the plan: lines
   under a rule, the hour in the display font, no card. A link's state in
   the brand's colour (it is the action), a record's state in the
   secondary ink. */
.pessoas .creneau-lista {
  gap: 0;
  border-top: 1px solid var(--p-linha);
}

.pessoas .creneau {
  gap: var(--espaco-curto);
  min-height: 56px;
  padding: var(--espaco-micro) 0;
  border: 0;
  border-bottom: 1px solid var(--p-linha);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--p-tinta);
  text-decoration: none;
  transition: none;
}

.pessoas .creneau:active {
  transform: none;
}

.pessoas .creneau__hora {
  width: 56px;
  font-size: 20px;
  color: var(--p-tinta);
}

.pessoas .creneau__nome {
  font-size: 16px;
  font-weight: 600;
  color: var(--p-tinta);
}

.pessoas .creneau__sub {
  font-size: 14px;
  color: var(--p-tinta-2);
}

.pessoas .creneau__vagas {
  font-size: 14px;
  color: var(--p-tinta-2);
}

.pessoas a.creneau .creneau__vagas {
  color: var(--p-marca-texto);
  font-weight: 600;
}

.pessoas a.creneau .creneau__vagas--esgotado,
.pessoas .creneau__marcada {
  color: var(--p-tinta-2);
  font-weight: 400;
}

.pessoas .creneau__vagas--alerta {
  color: var(--p-alerta);
}

/* A slot already past or full: its words in the secondary ink, never a
   transparency (it would fall under AA). */
.pessoas .creneau--passou,
.pessoas .creneau--esgotado {
  opacity: 1;
}

.pessoas .creneau--passou .creneau__hora,
.pessoas .creneau--passou .creneau__nome,
.pessoas .creneau--esgotado .creneau__hora,
.pessoas .creneau--esgotado .creneau__nome {
  color: var(--p-tinta-2);
}

/* The member's own slot (app.js, /marcar/marcadas): the brand's light
   tint across the line. */
.pessoas .creneau--marcada {
  margin-inline: calc(-1 * var(--espaco-medio));
  padding-inline: var(--espaco-medio);
  background: var(--p-marca-suave);
  border-color: var(--p-linha);
}

.pessoas .footnote {
  margin-top: var(--espaco-medio);
  font-size: 14px;
  color: var(--p-tinta-2);
}

/* A label above a block (« Sessão atual », « Próxima sessão ») and the
   eyebrow of a screen: the secondary ink, never a monospace. */
.pessoas .eyebrow {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--espaco-micro);
  padding-bottom: var(--espaco-micro);
  border-bottom: 1px solid var(--p-linha);
}

.pessoas .eyebrow em {
  font-style: normal;
  color: var(--p-tinta-2);
}

/* The 1 to 5 scales of the check-in and the feedback: an outline (3:1),
   the chosen value filled with the brand. */
.pessoas .escala__opcoes {
  gap: var(--espaco-micro);
}

.pessoas .escala__botao {
  min-height: 48px;
  border: 1px solid var(--p-contorno);
  border-radius: var(--raio-pequeno);
  background: transparent;
  font-family: var(--fonte-display);
  font-size: 18px;
  font-weight: 640;
  color: var(--p-tinta);
}

.pessoas .escala__radio:checked + .escala__botao {
  border-color: var(--p-marca-borda);
  background: var(--p-acao);
  box-shadow: none;
  color: var(--p-sobre-marca);
}

.pessoas .escala__radio:focus-visible + .escala__botao {
  outline: 2px solid var(--p-marca-texto);
  outline-offset: 2px;
}

/* Wagon A49 (the review of A48): the chosen value's label in the flow, on
   the bounds' row. Out of the flow (telas.css, top: 100%), it hung in the
   gutter between two groups, 16 px under this rhythm for a line of 19.6 px:
   « Comi bem » touched « Como está a tua energia? », measured at -4 px in
   Chromium, while the bounds left their space. Both are placed on the second
   row (an auto-placed bound would go to a third one): the chosen value takes
   the place of the bounds, hidden with their space kept, at their line
   height. A scale without bounds (the fatigue, the pain's intensity) keeps
   that row for its answer, blank until one is chosen: nothing jumps. */
.pessoas .escala__extremos {
  grid-row: 2;
}

.pessoas .escala__legenda {
  position: static;
  grid-row: 2;
  grid-column: 1 / -1;
  min-height: calc(var(--tamanho-etiqueta) * 1.4);
  margin: 0;
  line-height: 1.4;
}

.pessoas .dor-zona {
  border-color: var(--p-contorno);
  background: transparent;
  color: var(--p-tinta);
}

/* The result of a write: the sentence in the display font, the session
   under it; a refusal keeps its word in the alert colour. */
.pessoas .resultado-mensagem {
  margin: 0;
  font-family: var(--fonte-display);
  font-weight: 640;
  font-size: 26px;
  line-height: 1.15;
  color: var(--p-tinta);
}

.pessoas .cartao--sucesso .dado {
  margin-top: var(--espaco-micro);
}

.pessoas .texto-alerta {
  color: var(--p-alerta);
  font-weight: 600;
}

/* D78 b: a refusal the platform served is a state: its word in the
   secondary ink, never the alert colour (kept for what failed). */
.pessoas .texto-estado {
  color: var(--p-tinta-2);
  font-weight: 600;
}

/* Wagon A46 (D81, ALUNO_LINHA_DE_FALHA_ENABLED): what failed, told apart from
   an action whatever the gym's colour. An action is a fill, an outline or a
   word in the brand's colour; a failure is none of them: a rule above it,
   across the column (horizontal: never the vertical accent rule of a card),
   « Falha. » in bold, the line in ink. The alert colour is on the rule only,
   which the word and the form already say: never the colour alone. */
.pessoas .p-falha {
  color: var(--p-tinta);
  font-weight: 400;
  border-top: 2px solid var(--p-alerta);
  padding-top: var(--espaco-micro);
}

.pessoas .p-falha__rotulo {
  font-weight: 600;
  color: var(--p-tinta);
}

/* Under a section's heading, which carries its own filet (1 px, then its
   margin of --espaco-micro): the line's rule takes the filet's place rather
   than drawing a second rule 8 px below it. The margins collapse to -1 px:
   the rule covers the filet. */
.pessoas .coach-seccao > h2 + .p-falha {
  margin-top: calc(-1px - var(--espaco-micro));
}

@media (min-width: 768px) {
  /* Wagon A46: beside the exercise's reading, the workout's form starts
     right under the exercise's header; the state word at its end (« Por
     fazer ») sat 2 px above the rule, as if underlined by it. The rule stays
     nearer its own word than any text above it. */
  .pessoas .coach-treino-exercicios:not(.coach-treino-exercicios--formulario) .coach-treino-registo-form .p-falha {
    margin-top: var(--espaco-medio);
  }
}

/* Wagon A48 (Q9 of D82, D83, ALUNO_LINHA_DE_FALHA_ENABLED): a field's refusal
   (the platform's 422 field by field, what the app refuses to send) is a
   state (D78 b), not what failed: the secondary ink, regular weight, no alert
   colour, right under its field's label or question and close to the field
   (_erro_de_campo.html). The sentence names its field; aria-describedby ties
   it to the field or its group. The field under it says it by its form, an
   outline of 2 px in ink (1 px at rest): never a colour alone. Focused, it
   keeps the brand's colour of every field. */
.pessoas .p-erro-de-campo {
  color: var(--p-tinta-2);
  font-weight: 400;
  margin: 0 0 var(--espaco-micro);
  /* Wagon A51 (the review of its captures): at 390 px « …, máximo 5. » left
     « 5. » alone on its line; the line balanced, a bound with its word. */
  text-wrap: pretty;
}

.pessoas .p-erro-de-campo + select,
.pessoas .p-erro-de-campo + textarea,
.pessoas .p-erro-de-campo + input {
  border: 2px solid var(--p-tinta);
}

.pessoas .p-erro-de-campo + select:focus,
.pessoas .p-erro-de-campo + textarea:focus,
.pessoas .p-erro-de-campo + input:focus {
  border-color: var(--p-marca-texto);
}

/* Wagon A49 (the review of the coach's sign-in): a typed field of a form
   (.pessoas .formulario input[type="email"], 1 px at rest) outweighed the
   outline of 2 px; the same outline, at the weight of a typed field. And in a
   form whose fields are its own children (.formulario, a column with a gap of
   --espaco-medio: the coach's sign-in, the consent on paper), the field's
   line keeps to its label above and its field below as it does inside a
   group (.formulario__grupo): 4 px under the label, 8 px above the field,
   not a gap's 16 px on each side. */
.pessoas .p-erro-de-campo + input[type] {
  border: 2px solid var(--p-tinta);
}

.pessoas .p-erro-de-campo + input[type]:focus {
  border-color: var(--p-marca-texto);
}

.pessoas .formulario > .p-erro-de-campo {
  margin-top: calc(var(--espaco-micro) / 2 - var(--espaco-medio));
  margin-bottom: calc(var(--espaco-micro) - var(--espaco-medio));
}

/* Wagon A49 (the review of item 2): a refusal's general line under a title's
   own line (the member's check-in and feedback, after the session's line;
   the coach's sign-in, after its sentence) read as that line's end, in the
   same secondary ink: the form's gap above it. A field's line keeps to its
   label. */
.pessoas h1 + p + .aviso-mensagem[role="status"]:not(.p-erro-de-campo) {
  margin-top: var(--espaco-medio);
}

/* Wagon A49 (the review of Mensagens): its two contacts side by side, their
   tops on one line; the margin between two stacked buttons (telas.css,
   .botao + .botao) never applies in a row. */
.pessoas .contacto-acoes--compacto .botao + .botao {
  margin-top: 0;
}

/* Wagon A50 (Q4 of A49, D85): Mensagens under Pessoas. Under a red kit the
   team's bubble, bordered in the brand's colour, read as an alert; the
   bubbles and the day separators were boxed and centred from before Pessoas
   (lane E3). The two sides now differ by their form and their place, never
   by the brand: the team's words at the gutter on the surface's neutral step
   (its corners 6 px), the member's own at the right edge with no box, their
   words ending on the gutter; neither bordered nor shadowed. The order stays
   the thread's (oldest first), the time under each message. */
.pessoas .mensagens-historico {
  gap: var(--espaco-curto);
}

.pessoas .mensagens-bolha {
  border: 0;
  border-radius: var(--raio-grande);
  box-shadow: none;
  color: var(--p-tinta);
}

.pessoas .mensagens-bolha--staff {
  background: var(--p-superficie);
  align-self: flex-start;
}

.pessoas .mensagens-bolha--member {
  background: transparent;
  align-self: flex-end;
  padding-left: 0;
  padding-right: 0;
  text-align: right;
}

/* A day's header, at the gutter like a list's (the day's rule, A48, A49),
   never centred; its space above, no rule (the header's own rule is just
   above the first). */
.pessoas .mensagens-separador-dia {
  align-self: flex-start;
  margin: var(--espaco-medio) 0 0;
  color: var(--p-tinta-2);
}

.pessoas .mensagens-historico > .mensagens-separador-dia:first-child {
  margin-top: 0;
}

/* Wagon A49 (the review of the trainer's card, the member's app without the
   v2 routes): no illustration, nothing centred (§7); a slot's hour carries
   its duration (« 09:00 · 50 min »): one line, never the width of an hour
   alone. */
.pessoas .treinador-cartao {
  text-align: left;
}

.pessoas .treinador-cartao__avatar {
  display: none;
}

.pessoas .treinador-dia .creneau__hora {
  width: auto;
  white-space: nowrap;
}

.pessoas .resultado-links {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: var(--espaco-micro) var(--espaco-medio);
  margin-top: var(--espaco-medio);
}

/* A card that opens the screen needs no rule above it. */
.pessoas .app-content > .cartao:first-child {
  border-top: 0;
  padding-top: 0;
}

/* A day that opens a line takes its capital (« sábado, 03/10 » as the
   platform's format writes it mid-sentence). */
.pessoas .cartao > .rotulo:first-child::first-letter,
.pessoas .cartao > .dado::first-letter,
.pessoas .creneau__nome::first-letter,
.pessoas .creneau__sub::first-letter {
  text-transform: uppercase;
}

.pessoas .resultado-links .botao {
  width: auto;
  padding: 0 var(--espaco-medio);
}

/* The points' balance: a large figure in the display font. */
.pessoas .pontos-saldo__valor {
  font-family: var(--fonte-display);
  font-weight: 640;
  font-size: 44px;
  color: var(--p-tinta);
}

/* Wagon A47 (D82): the member's place in the ranking, a large figure too:
   da.css writes it in the mono face (here the text face) at 500, a weight
   the text face does not ship. Like the balance; the ordinal mark in the
   text face, at a weight it ships. */
.pessoas .pontos-propria__posicao {
  font-family: var(--fonte-display);
  font-weight: 640;
  font-size: 44px;
  color: var(--p-tinta);
}

.pessoas .pontos-propria__ordinal {
  font-weight: 600;
}

/* The period of the progress (30 or 90 days): two words like the tabs, the
   active one in the brand's colour and bold (aria-current carries it). On
   one baseline: the top margin telas.css gives a .botao after another
   (buttons stacked) has no place in a row. */
.pessoas .progresso-periodos {
  gap: var(--espaco-medio);
  margin-bottom: var(--espaco-medio);
}

.pessoas .progresso-periodos .progresso-periodo {
  flex: none;
  width: auto;
  min-height: 44px;
  margin-top: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--p-tinta-2);
  font-weight: 400;
}

.pessoas .progresso-periodos .progresso-periodo[aria-current="page"] {
  color: var(--p-marca-texto);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 6px;
}

/* ------------------------------------------------------------------ */
/* The coach app (pessoas/coach_base.html): same tokens, dense lines    */
/* ------------------------------------------------------------------ */

.p-topo__acoes {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--espaco-curto);
}

/* The day: three words like the tabs, the shown day in the brand's colour
   and bold (aria-current carries it). */
.pessoas .coach-dias {
  display: flex;
  gap: var(--espaco-largo);
  margin-bottom: var(--espaco-micro);
}

.pessoas .coach-dias__item {
  min-height: 44px;
  border: 0;
  background: none;
  color: var(--p-tinta-2);
  font-weight: 400;
}

.pessoas .coach-dias__item--atual {
  box-shadow: none;
  background: none;
  color: var(--p-marca-texto);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 6px;
}

.pessoas .coach-bloco__titulo {
  font-family: var(--fonte-texto);
  font-size: var(--tamanho-h2);
  font-weight: 600;
  margin-bottom: 0;
  padding-bottom: var(--espaco-micro);
  border-bottom: 1px solid var(--p-linha);
}

.pessoas .coach-contador {
  font-weight: 400;
  color: var(--p-tinta-2);
}

/* The next session: no card, its hour in the display font, then the
   roster. */
.pessoas .coach-proxima {
  padding: 0;
  margin-bottom: var(--espaco-largo);
  border: 0;
  border-radius: 0;
  background: none;
}

.pessoas .coach-proxima__estado {
  color: var(--p-atencao);
}

/* A member of the next session, a session card of the day's lists: the
   initials in the first column, every line of text in the second. */
.pessoas .coach-participantes {
  margin-top: var(--espaco-curto);
}

.pessoas .coach-participante,
.pessoas .coach-cartao {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  column-gap: var(--espaco-curto);
  row-gap: var(--espaco-nano);
  align-content: start;
  margin: 0;
  padding: var(--espaco-curto) 0;
  border: 0;
  border-bottom: 1px solid var(--p-linha);
  border-radius: 0;
  background: none;
}

.pessoas .coach-participante {
  border-top: 0;
}

.pessoas .coach-participantes .coach-participante:first-child {
  border-top: 1px solid var(--p-linha);
}

.pessoas .coach-participante > .p-retrato,
.pessoas .coach-cartao > .p-retrato {
  grid-column: 1;
  grid-row: 1 / span 4;
}

.pessoas .coach-participante > :not(.p-retrato),
.pessoas .coach-cartao > :not(.p-retrato) {
  grid-column: 2;
  min-width: 0;
}

.pessoas .coach-participante__nome,
.pessoas .coach-cartao__titulo,
.pessoas .coach-cartao__ligacao {
  font-family: var(--fonte-texto);
  font-size: var(--tamanho-corpo);
  font-weight: 600;
  color: var(--p-tinta);
}

.pessoas .coach-cartao__ligacao::after {
  border-radius: 0;
}

/* The member's name opens the session sheet: its line keeps its height,
   the target reaches 44 px. */
.pessoas .coach-participante__nome,
.pessoas .coach-cartao__ligacao {
  display: inline-block;
  justify-self: start;
  padding-block: 12px;
  margin-block: -12px;
}

.pessoas .coach-cartao__hora {
  gap: var(--espaco-micro);
  font-size: 14px;
}

.pessoas .coach-cartao__hora .dado {
  font-weight: 600;
}

.pessoas .coach-participante__linha,
.pessoas .coach-perfil {
  font-size: 14px;
  color: var(--p-tinta-2);
}

/* « a · b » as everywhere else: the space of the markup before the dot,
   one (unbreakable) after it. coach.css adds a margin on each side of the
   dot, on top of the space before it. */
.pessoas .coach-participante__segmento + .coach-participante__segmento::before {
  content: "\00b7\00a0";
  margin: 0;
}

.pessoas .coach-participante__estado {
  color: var(--p-sucesso);
}

/* The check-in in words: the member's day, « Dormiu 2/5 · comeu 4/5 », in
   the secondary ink. */
.p-sinais {
  margin: 0;
  font-size: 14px;
  color: var(--p-tinta-2);
}

.p-sinais::first-letter {
  text-transform: uppercase;
}

/* Wagon A48 (Q6 of D82): a declared pain, by its form and its words, on its
   own line before the member's day: « Dor » in bold ink under a 2 px rule
   of the alert colour as wide as the word, then each zone in ink. The
   failure line's family (a rule above a bold word, all in ink), never a
   failure: the rule spans the word, not the column, and the line is no
   alert. No fill, no outline, no word of the brand's colour: under a red
   brand, never a gesture. On a session's sheet, its « Dor » label. */
.pessoas .p-dor {
  /* The rule nearer its word than the line above it (A46's rule): read
     right under a line, it underlined that line's first word. */
  margin: var(--espaco-micro) 0 0;
  font-size: 14px;
  color: var(--p-tinta);
}

.pessoas .p-dor__rotulo {
  display: inline-block;
  padding-top: 2px;
  border-top: 2px solid var(--p-alerta);
  font-weight: 600;
  color: var(--p-tinta);
}

/* Alerts: the severity in words, coloured by what the platform served
   (an alert in the alert colour, an attention in the attention colour),
   no vertical rule. */
.pessoas .coach-alertas {
  gap: var(--espaco-nano);
}

.pessoas .coach-alerta {
  display: block;
  padding: 0;
  border-left: 0;
  font-size: 14px;
}

.pessoas .coach-alerta__severidade {
  margin-right: 6px;
}

.pessoas .coach-alerta[data-severidade="alerta"] .coach-alerta__severidade {
  color: var(--p-alerta);
}

.pessoas .coach-alerta[data-severidade="atencao"] .coach-alerta__severidade {
  color: var(--p-atencao);
}

.pessoas .coach-tendencia {
  fill: var(--p-marca-texto);
}

.pessoas .coach-cartao__acoes .botao,
.pessoas .coach-proxima__deixar .botao {
  padding: 0;
}

.pessoas .coach-proxima__deixar {
  justify-content: flex-start;
}

/* Wagon A48 (Q3 of D82): a session of the day's lists. Its line once, at
   the gutter: the hours in the display face, as on the Agenda, the type
   (and the coach, in « Outras ») in the secondary ink; its members under
   it, each card under its own rule; its gesture once, at the gutter, as
   under the next session; the next session after a larger space. */
.pessoas .coach-sessao-grupo {
  margin-bottom: var(--espaco-largo);
}

.pessoas .coach-sessao-grupo__hora {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--espaco-micro);
  margin: 0;
  padding: var(--espaco-curto) 0 var(--espaco-micro);
  font-size: 14px;
  color: var(--p-tinta-2);
}

.pessoas .coach-sessao-grupo__hora .dado {
  font-family: var(--fonte-display);
  font-size: var(--tamanho-corpo);
  font-weight: 640;
  color: var(--p-tinta);
}

.pessoas .coach-sessao-grupo__hora .rotulo {
  color: var(--p-tinta-2);
}

.pessoas .coach-sessao-grupo .coach-cartao:first-of-type {
  border-top: 1px solid var(--p-linha);
}

.pessoas .coach-sessao-grupo__acoes {
  display: flex;
  justify-content: flex-start;
  margin-top: 0;
}

/* The session sheet and the member's sheet: sections under a rule, label
   and value on dense lines. */
.pessoas .coach-seccao {
  margin-bottom: var(--espaco-largo);
}

.pessoas .coach-seccao > h2 {
  font-family: var(--fonte-texto);
  font-size: var(--tamanho-h2);
  font-weight: 600;
  padding-bottom: var(--espaco-micro);
  border-bottom: 1px solid var(--p-linha);
}

/* Wagon A50 (Q5 of A49): a card right under a section's title (the banner of
   a member without consent, under « Consentimento ») drew a second rule 8 px
   below the title's: the title's rule is the only one, the card's words at
   the distance of a section's first line. */
.pessoas .coach-seccao > h2 + .cartao {
  border-top: 0;
  padding-top: var(--espaco-micro);
}

.pessoas .coach-valor {
  padding: var(--espaco-micro) 0;
}

.pessoas .coach-valores {
  gap: 0;
}

.pessoas .coach-fila {
  border-color: var(--p-linha);
}

/* The coach's frame widens to 1040 px (the studio's tablet): a field, a
   select or a button stretched over all of it reads badly. A form keeps
   the measure of one column. */
.pessoas-coach .formulario {
  max-width: 480px;
}

/* Wagon A51 (the review of its captures): under « Preencher pelo aluno »,
   the fold's body is a column with its own gap; the warning's margin and
   the form's, which a flex column adds to the gap, put the first question
   64 px under the warning (52 px under the line coach.js writes). The gap
   alone. The consent on paper is a fold whose body is the form itself: its
   field's line keeps A49's margins. */
.pessoas-coach .coach-preencher > div.dobra__corpo > .aviso-mensagem:not(.p-erro-de-campo),
.pessoas-coach .coach-preencher > div.dobra__corpo > .formulario {
  margin-top: 0;
  margin-bottom: 0;
}

/* ------------------------------------------------------------------ */
/* Wagon A41: the coach's operation (tabs, Agenda, a slot, Membros,      */
/* Tarefas) and the member's waiting list. The structure lives in       */
/* coach.css; here, the kit's tokens and the display font.              */
/* ------------------------------------------------------------------ */

/* The coach's tabs, under the header: the words of the member's tabs,
   left-aligned, a rule under them, the current one underlined. */
.pessoas .p-abas--coach {
  flex-wrap: wrap;
  gap: 0 var(--espaco-largo);
  min-height: 0;
  padding: 0 var(--espaco-medio);
  border-top: 0;
  border-bottom: 1px solid var(--p-linha);
}

.pessoas .p-abas--coach .p-abas__item {
  flex: none;
  justify-content: flex-start;
  min-height: 44px;
  padding: 0;
  font-size: var(--tamanho-corpo);
}

.pessoas .p-abas--coach .p-abas__item[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 6px;
}

/* The fill: squares at 3:1, the booked ones filled with the ink. */
.pessoas .coach-lugares {
  color: var(--p-tinta-2);
}

.pessoas .coach-lugares__caixa,
.pessoas .coach-lugares__barra {
  border-color: var(--p-contorno);
}

.pessoas .coach-lugares__caixa--cheia {
  border-color: var(--p-tinta);
  background: var(--p-tinta);
}

.pessoas .coach-lugares__cheio {
  background: var(--p-tinta);
}

.pessoas .coach-lugares__texto,
.pessoas .coach-lugares[data-preenchimento="completo"] .coach-lugares__nivel {
  color: var(--p-tinta);
}

.pessoas .coach-slot__ligacao {
  border-bottom-color: var(--p-linha);
  color: var(--p-tinta);
}

.pessoas .coach-slot__hora {
  font-family: var(--fonte-display);
  font-weight: 640;
}

.pessoas .coach-slot__quem--sem,
.pessoas .coach-slot__sub,
.pessoas .coach-creneau__quem,
.pessoas .coach-nota,
.pessoas .coach-linha__sub {
  color: var(--p-tinta-2);
}

.pessoas .coach-linha {
  border-bottom-color: var(--p-linha);
}

.pessoas .coach-linha__nome,
.pessoas .coach-linha__forte,
.pessoas .coach-confirmar__corpo p,
.pessoas .coach-escolha__opcao {
  color: var(--p-tinta);
}

.pessoas .coach-linha__nome a {
  color: var(--p-marca-texto);
}

.pessoas .coach-linha__segmento + .coach-linha__segmento::before {
  color: var(--p-tinta-2);
}

/* A gesture is a word in the brand's colour, aligned on the text of its
   line (the ghost's side padding would push it 8 px right of the name). */
.pessoas .coach-linha__gestos .botao-fantasma,
.pessoas .coach-confirmar > summary.botao-fantasma {
  padding: 0;
}

/* A screen that opens on its title (Membros, Tarefas) keeps the distance
   the others keep under the tabs with their first line. */
.pessoas .p-abas--coach + .app-content > .coach-fila + h1,
.pessoas .p-abas--coach + .app-content > .coach-fila + .coach-titulo-com-acao {
  margin-top: var(--espaco-largo);
}

/* The member's waiting entries on Sessões: the lines of the sessions. */
.p-lista-espera {
  margin-top: var(--espaco-largo);
}

.p-lista-espera .p-sessao {
  grid-template-columns: minmax(0, 1fr);
}

.p-lista-espera .p-sessao__corpo {
  grid-column: 1;
}

/* ------------------------------------------------------------------ */
/* Wagon A42: the training plan of the platform (telas.css carries the  */
/* structure): the number and the exercises' names in the display font, */
/* the shown variant filled with the brand, the rest in the kit's inks.  */
/* ------------------------------------------------------------------ */

.pessoas .plano-cabecalho__titulo {
  font-family: var(--fonte-display);
}

.pessoas .plano-cabecalho__periodo {
  color: var(--p-tinta);
}

.pessoas .plano-cabecalho__meta,
.pessoas .plano-elemento__ordem,
.pessoas .plano-elemento__equipamento,
.pessoas .plano-elemento__regulacao {
  color: var(--p-tinta-2);
}

.pessoas .plano-variantes__item {
  border-color: var(--p-contorno);
  border-radius: var(--raio-medio);
  color: var(--p-tinta);
  font-family: var(--fonte-display);
  font-weight: 640;
}

.pessoas .plano-variantes__item[aria-current="page"] {
  background: var(--p-acao);
  border-color: var(--p-marca-borda);
  color: var(--p-sobre-marca);
}

.pessoas .plano-variante__titulo {
  font-family: var(--fonte-texto);
  font-weight: 600;
}

.pessoas .plano-elementos,
.pessoas .plano-elemento {
  border-color: var(--p-linha);
}

.pessoas .plano-elemento__ordem,
.pessoas .plano-elemento__nome {
  font-family: var(--fonte-display);
  font-weight: 640;
}

.pessoas .plano-elemento__nome {
  font-size: 18px;
  color: var(--p-tinta);
}

.pessoas .plano-elemento__corpo > .plano-elemento__prescricao,
.pessoas .plano-elemento__nota {
  color: var(--p-tinta);
}

/* The coach's plan page: the exercises' names at the size of the team's
   lines. */
.pessoas .plano-variante--denso .plano-elemento__nome {
  font-size: var(--tamanho-corpo);
}

/* ------------------------------------------------------------------ */
/* Wagon A42, retouches of the A41 review.                              */
/* ------------------------------------------------------------------ */

/* a. A refusal: after the one strong action, one group of words in the
   brand's colour, aligned on the text, under a rule. */
.p-recusa {
  margin-top: var(--espaco-largo);
  padding-top: var(--espaco-medio);
  border-top: 1px solid var(--p-linha);
}

.p-recusa__apoio {
  margin: 0;
  color: var(--p-tinta);
}

.p-acoes.p-recusa__acoes {
  gap: 0 var(--espaco-largo);
  margin-top: var(--espaco-micro);
}

.p-recusa__acoes .botao-fantasma,
.p-espera__acoes .botao-fantasma {
  padding: 0;
}

/* b. The entry in the waiting list: the position, the session's line, what
   happens next in the secondary ink, the two gestures. */
.p-espera .p-espera__sessao {
  margin-top: var(--espaco-medio);
  padding-bottom: 0;
  border-bottom: 0;
}

.p-espera__depois {
  margin-top: var(--espaco-medio);
  padding-top: var(--espaco-medio);
  border-top: 1px solid var(--p-linha);
}

.p-espera__depois p {
  margin: 0 0 var(--espaco-micro);
  color: var(--p-tinta-2);
}

.p-acoes.p-espera__acoes {
  gap: 0 var(--espaco-largo);
  margin-top: var(--espaco-micro);
}

.p-espera__acoes form {
  margin: 0;
}

/* ------------------------------------------------------------------ */
/* Wagon A43: the guided workout (coach) and the progress (member).     */
/* coach.css and telas.css carry the structure; here, the kit's inks    */
/* and the display font for the exercises' names and the variants.      */
/* ------------------------------------------------------------------ */

.pessoas .coach-treino-exercicio,
.pessoas .coach-treino-exercicios {
  border-color: var(--p-linha);
}

.pessoas .coach-treino-exercicio__ordem,
.pessoas .coach-treino-exercicio__nome {
  font-family: var(--fonte-display);
  font-weight: 640;
}

.pessoas .coach-treino-exercicio__nome {
  color: var(--p-tinta);
}

.pessoas .coach-treino-exercicio__ordem,
.pessoas .coach-treino-exercicio__estado,
.pessoas .coach-treino-exercicio__equipamento,
.pessoas .coach-treino-exercicio__regulacao,
.pessoas .coach-treino-registo__data,
.pessoas .coach-treino-registo__nota,
.pessoas .coach-treino-nota__ajuda,
.pessoas .coach-treino-variante__conta,
.pessoas .coach-treino-variante__nomes {
  color: var(--p-tinta-2);
}

.pessoas .coach-treino-exercicio__estado--feito,
.pessoas .coach-treino-exercicio__prescricao,
.pessoas .coach-treino-exercicio__realizado,
.pessoas .coach-treino-exercicio__nota-plano,
.pessoas .coach-treino-registo,
.pessoas .coach-treino-feito {
  color: var(--p-tinta);
}

.pessoas .coach-treino-variante__botao {
  font-family: var(--fonte-display);
  font-weight: 640;
}

.pessoas .coach-treino-finalizar[open] > summary.botao-primario {
  color: var(--p-tinta);
  border-color: var(--p-contorno);
}

.pessoas .p-tendencia {
  color: var(--p-tinta);
}

.pessoas .p-tendencia--motivo {
  color: var(--p-tinta-2);
}

.pessoas .p-grafico__eixo {
  stroke: var(--p-linha);
}

.pessoas .p-grafico__linha {
  stroke: var(--p-tinta);
}

.pessoas .p-grafico__ponto,
.pessoas .p-grafico__valor {
  fill: var(--p-tinta);
}

.pessoas .p-grafico__dia {
  fill: var(--p-tinta-2);
}

.pessoas .p-grafico__legenda,
.pessoas .p-tabela thead th,
.pessoas .p-tabela tbody th,
.pessoas .p-tabela td.p-tabela__nota {
  color: var(--p-tinta-2);
}

.pessoas .p-tabela th,
.pessoas .p-tabela td {
  border-color: var(--p-linha);
}

.pessoas .p-tabela td {
  color: var(--p-tinta);
}

.pessoas .plano-elemento__ultimo,
.pessoas .plano-treino__feito,
.pessoas .plano-treino__nome {
  color: var(--p-tinta);
}

.pessoas .plano-treinos__titulo {
  font-family: var(--fonte-texto);
  font-weight: 600;
}

.pessoas .plano-treino__segmento,
.pessoas .plano-treinos__vazio,
.pessoas .plano-historico__vazio {
  color: var(--p-tinta-2);
}

.pessoas .plano-treino__dobra,
.pessoas .plano-treino:last-child .plano-treino__dobra {
  border-color: var(--p-linha);
}