/*
 * The native-app mockups of 10/11/2026 (member and coach), loaded LAST in
 * pessoas/base.html and pessoas/coach_base.html.
 *
 * The look of a native phone app: grouped background, white inset groups,
 * large titles, an icon tab bar at the bottom, the system face (San
 * Francisco on iPhone, Roboto on Android). The gym lives in four roles only,
 * all read from the kit (app/marca_tokens.py, <html style>):
 *   --brand       the action colour      (--p-acao)
 *   --brand-dark  the ink                (--p-tinta), the coach's dark card
 *   --brand-tint  the light brand tint   (--p-marca-suave)
 *   --on-brand    the text on the action (--p-sobre-marca)
 * The neutrals are the system's, fixed. Two deliberate departures from the
 * mockups, both for WCAG 2.2 AA: the secondary text and the inactive tab
 * are darker (4.5:1 on white and on the grouped background).
 */

:root {
  --brand: var(--p-acao, #0C6255);
  --brand-text: var(--p-marca-texto, #0C6255);
  --brand-dark: var(--p-tinta, #0C1F26);
  --brand-tint: var(--p-marca-suave, #E2EEEC);
  --brand-soft: color-mix(in srgb, var(--brand) 40%, #FFFFFF);
  --on-brand: var(--p-sobre-marca, #FFFFFF);

  --x-bg: #F2F2F7;
  --x-surface: #FFFFFF;
  --x-bar: #F9F9F9;
  --x-label: #000000;
  --x-label-2: rgba(60, 60, 67, 0.78);
  --x-label-3: rgba(60, 60, 67, 0.34);
  --x-sep: rgba(60, 60, 67, 0.18);
  --x-fill: rgba(118, 118, 128, 0.12);
  --x-fill-2: rgba(118, 118, 128, 0.08);
  --x-tab: #6C6C70;
  --x-orange: #C93400;
  --x-orange-tint: #FFF1E2;
  --x-red: #D70015;
  --x-red-tint: #FDECEE;
  --x-green: #1E7A43;
  --x-font: system-ui, -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Source Sans 3", sans-serif;
  --x-font-display: var(--x-font);
  --x-tabbar: 56px;

  /* The sheets of today read these: they now speak the mockups' rhythm. */
  --fonte-texto: var(--x-font);
  --fonte-display: var(--x-font-display);
  --fonte-mono: var(--x-font);
  --raio-pequeno: 8px;
  --raio-medio: 12px;
  --raio-grande: 16px;
  --raio-pilula: 10px;
  --altura-cabecalho: 52px;
  --altura-nav-inferior: var(--x-tabbar);
  --tamanho-corpo: 17px;
  --altura-corpo: 1.3;
  --tamanho-etiqueta: 15px;
  --tamanho-botao: 17px;
  --tamanho-h1: 34px;
  --tamanho-h2: 20px;
  --tamanho-dado: 17px;
  --tamanho-numero-heroi: 52px;
  --altura-numero-heroi: 1;

  --p-fundo: var(--x-bg);
  --p-superficie: var(--x-surface);
  --p-linha: var(--x-sep);
  --marca-fundo-pagina: var(--x-bg);
  --marca-fundo-cabecalho: var(--x-bg);
  --marca-superficie-cartao: var(--x-surface);
  --marca-superficie-cartao-2: var(--x-surface);
  --marca-linha: var(--x-sep);
  --cor-fundo-exterior: #E4E4E9;
}

/* A dark kit keeps its theme: the system's dark neutrals. */
html[style*="color-scheme: dark"] {
  --x-bg: #000000;
  --x-surface: #1C1C1E;
  --x-bar: #161618;
  --x-label: #FFFFFF;
  --x-label-2: rgba(235, 235, 245, 0.7);
  --x-label-3: rgba(235, 235, 245, 0.3);
  --x-sep: rgba(84, 84, 88, 0.65);
  --x-fill: rgba(118, 118, 128, 0.24);
  --x-fill-2: rgba(118, 118, 128, 0.18);
  --x-tab: #98989D;
  --x-orange: #FF9F0A;
  --x-orange-tint: #3A2A12;
  --x-red: #FF6961;
  --x-red-tint: #3B1A1A;
  --x-green: #6DC18D;
  --brand-dark: #1C1C1E;
  --brand-soft: color-mix(in srgb, var(--brand) 55%, #000000);
  --cor-fundo-exterior: #000000;
}

/* ------------------------------------------------------------------ */
/* Base                                                                 */
/* ------------------------------------------------------------------ */

.ic-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

svg.ic {
  width: 24px;
  height: 24px;
  fill: currentColor;
  flex: none;
  display: block;
}

body.pessoas {
  background: var(--cor-fundo-exterior);
  color: var(--x-label);
  font-family: var(--x-font);
  font-size: 17px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

.pessoas .p-coquilha,
.pessoas .app-coquilha {
  background: var(--x-bg);
}

.pessoas :focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 8px;
}

.pessoas a {
  color: var(--brand-text);
}

.pessoas h1 {
  font-family: var(--x-font-display);
  font-size: 34px;
  line-height: 41px;
  font-weight: 700;
  letter-spacing: -0.012em;
  color: var(--x-label);
  margin: 2px 0 0;
}

.pessoas h2 {
  font-family: var(--x-font-display);
  font-size: 20px;
  line-height: 25px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--x-label);
}

.pessoas h3 {
  font-family: var(--x-font);
  font-size: 17px;
  line-height: 22px;
  font-weight: 600;
  color: var(--x-label);
}

.pessoas p {
  color: inherit;
}

.pessoas .rotulo {
  font-family: var(--x-font);
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.01em;
  color: var(--x-label-2);
  text-transform: none;
}

.pessoas .dado {
  font-family: var(--x-font);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.pessoas .eyebrow {
  font-family: var(--x-font);
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--x-label-2);
}

.pessoas .numero-heroi {
  font-family: var(--x-font-display);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--x-label);
  font-variant-numeric: tabular-nums;
}

.pessoas .numero-heroi small {
  font-family: var(--x-font);
  font-size: 15px;
  font-weight: 500;
  color: var(--x-label-2);
  letter-spacing: 0;
}

/* ------------------------------------------------------------------ */
/* Frame: header and content                                            */
/* ------------------------------------------------------------------ */

.pessoas .p-topo {
  min-height: 52px;
  padding: 4px 16px 0;
  background: var(--x-bg);
  border: 0;
}

.pessoas .p-topo__marca {
  color: var(--brand-dark);
}

.pessoas .p-topo__nome {
  font-family: var(--x-font-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--x-label);
}

.pessoas .p-topo__logo {
  height: 38px;
  max-width: 160px;
}

.pessoas .p-eu__circulo {
  width: 34px;
  height: 34px;
  font-size: 13px;
  font-weight: 600;
  background: #E4E8EE;
  color: #3B4A5E;
}

.pessoas .p-eu[aria-current="page"] .p-eu__circulo {
  background: var(--brand);
  color: var(--on-brand);
}

.pessoas main.app-content {
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 4px;
}

.pessoas .app-coquilha--com-nav main.app-content {
  padding-bottom: calc(var(--x-tabbar) + 40px + env(safe-area-inset-bottom, 0px));
}

/* ------------------------------------------------------------------ */
/* Tab bar (both apps)                                                  */
/* ------------------------------------------------------------------ */

.pessoas .app-rodape-fixo,
.pessoas .p-rodape {
  background: var(--x-bar);
  box-shadow: 0 -0.5px 0 rgba(0, 0, 0, 0.2);
  border: 0;
}

.pessoas .p-rodape--coach {
  max-width: 1040px;
}

.pessoas .p-abas {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  min-height: var(--x-tabbar);
  padding: 6px 0 4px;
  border: 0;
  background: var(--x-bar);
}

.pessoas .p-abas__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 3px;
  min-height: 44px;
  padding: 0 2px;
  color: var(--x-tab);
  font-size: 11px;
  line-height: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  border: 0;
  box-shadow: none;
}

.pessoas .p-abas__icone {
  width: 26px;
  height: 26px;
}

.pessoas .p-abas__item[aria-current="page"] {
  color: var(--brand-text);
  font-weight: 600;
  border: 0;
  box-shadow: none;
}

.pessoas .p-abas__item[aria-current="page"]::after,
.pessoas .p-abas__item::after {
  content: none;
}

/* The coach's tabs used to sit under the header; the shell is wider. */
.pessoas-coach .p-rodape--coach .p-abas {
  max-width: 640px;
  margin: 0 auto;
}

@media (min-width: 600px) {
  .pessoas .p-rodape {
    border-left: 0;
    border-right: 0;
  }
}

/* ------------------------------------------------------------------ */
/* Buttons                                                              */
/* ------------------------------------------------------------------ */

.pessoas .botao,
.pessoas a.botao,
.pessoas button.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 0 18px;
  border-radius: 12px;
  border: 0;
  font-family: var(--x-font);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  box-shadow: none;
  transition: opacity 0.15s;
}

.pessoas .botao:active,
.pessoas .botao-fantasma:active,
.pessoas .p-acao-quieta:active {
  opacity: 0.6;
  transform: none;
}

.pessoas .botao-primario,
.pessoas a.botao-primario {
  background: var(--brand);
  color: var(--on-brand);
  border: 0;
}

.pessoas .botao-secundario,
.pessoas a.botao-secundario {
  background: var(--brand-tint);
  color: var(--brand-text);
  border: 0;
}

.pessoas .botao-perigo {
  background: var(--x-red-tint);
  color: var(--x-red);
  border: 0;
}

.pessoas .botao-fantasma,
.pessoas a.botao-fantasma,
.pessoas button.botao-fantasma {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 12px;
  border: 0;
  background: var(--x-fill);
  color: var(--x-label);
  font-family: var(--x-font);
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
}

.pessoas .botao-fantasma--perigo,
.pessoas a.botao-fantasma--perigo {
  background: var(--x-red-tint);
  color: var(--x-red);
}

.pessoas .p-acao-quieta,
.pessoas .link-discreto {
  color: var(--brand-text);
  font-family: var(--x-font);
  font-size: 17px;
  font-weight: 400;
  text-decoration: none;
  background: none;
  border: 0;
}

.pessoas .botao[disabled],
.pessoas .botao[aria-disabled="true"] {
  opacity: 0.4;
}

/* ------------------------------------------------------------------ */
/* Cards and inset groups                                               */
/* ------------------------------------------------------------------ */

.pessoas .cartao,
.pessoas .cartao-heroi {
  background: var(--x-surface);
  border: 0;
  border-radius: 12px;
  box-shadow: none;
  padding: 16px;
}

.pessoas .cartao--recusa {
  background: var(--x-red-tint);
}

.pessoas .cartao--sucesso {
  background: var(--brand-tint);
}

.pessoas .aviso-mensagem {
  display: block;
  margin: 12px 0;
  padding: 12px 14px;
  border-radius: 12px;
  border: 0;
  background: var(--x-orange-tint);
  color: var(--x-label);
  font-size: 15px;
  line-height: 20px;
}

.pessoas .estado-vazio,
.pessoas .p-vazio {
  color: var(--x-label-2);
  font-size: 15px;
}

/* Forms */
.pessoas .formulario label,
.pessoas .formulario .rotulo {
  font-size: 13px;
  line-height: 18px;
  color: var(--x-label-2);
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.pessoas input[type="text"],
.pessoas input[type="tel"],
.pessoas input[type="email"],
.pessoas input[type="password"],
.pessoas input[type="number"],
.pessoas input[type="search"],
.pessoas input[type="date"],
.pessoas input[type="time"],
.pessoas select,
.pessoas textarea {
  min-height: 48px;
  border-radius: 12px;
  border: 0;
  background: var(--x-surface);
  color: var(--x-label);
  font-family: var(--x-font);
  font-size: 17px;
  padding: 11px 14px;
  box-shadow: none;
}

.pessoas input:focus,
.pessoas select:focus,
.pessoas textarea:focus {
  outline: 2px solid var(--brand-soft);
  outline-offset: 0;
  border: 0;
}

.pessoas input::placeholder,
.pessoas textarea::placeholder {
  color: var(--x-label-3);
}

/* Disclosure (details.dobra): an inset row with a chevron. */
.pessoas .dobra {
  background: var(--x-surface);
  border-radius: 12px;
  border: 0;
  margin-top: 12px;
  overflow: hidden;
}

.pessoas .dobra__gatilho {
  min-height: 44px;
  padding: 11px 16px;
  font-size: 17px;
  color: var(--x-label);
  border: 0;
}

.pessoas .dobra__corpo {
  padding: 0 16px 14px;
}

/* ------------------------------------------------------------------ */
/* Shared pieces of the mockups                                         */
/* ------------------------------------------------------------------ */

.pessoas .p-grupo {
  background: var(--x-surface);
  border-radius: 12px;
  overflow: hidden;
}

.pessoas .p-sec-h {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin: 28px 0 8px;
}

.pessoas .p-sec-h h2 {
  margin: 0;
}

.pessoas .p-sec-h__v {
  font-size: 15px;
  color: var(--x-label-2);
  white-space: nowrap;
}

.pessoas .p-tile {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  color: var(--on-brand);
  background: var(--brand);
  flex: none;
}

.pessoas .p-tile svg.ic {
  width: 19px;
  height: 19px;
}

.pessoas .p-chev {
  width: 14px;
  height: 14px;
  color: #C4C4C7;
  margin-left: auto;
}

.pessoas .p-linha-acao {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 11px 16px;
  color: var(--x-label);
  text-decoration: none;
  font-size: 17px;
}

.pessoas .p-linha-acao::before {
  content: "";
  position: absolute;
  top: 0;
  left: 16px;
  right: 0;
  border-top: 0.5px solid var(--x-sep);
}

.pessoas .p-linha-acao:active {
  opacity: 0.6;
}

/* Portraits: the mockups' avatars. */
.pessoas .p-retrato {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}

.pessoas .p-retrato--iniciais {
  display: grid;
  place-items: center;
  background: var(--brand-tint);
  color: var(--brand-text);
  font-family: var(--x-font);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.pessoas .p-retrato--pequeno {
  width: 36px;
  height: 36px;
  font-size: 14px;
}

/* ------------------------------------------------------------------ */
/* Membro: Início                                                       */
/* ------------------------------------------------------------------ */

.pessoas .p-hoje {
  margin: 6px 0 0;
}

.pessoas h1.p-ola {
  margin: 0;
  font-size: 34px;
  line-height: 41px;
  color: var(--x-label);
}

.pessoas .p-prox {
  margin-top: 16px;
  border-radius: 20px;
  background: var(--brand);
  color: var(--on-brand);
  padding: 18px 18px 16px;
  border: 0;
}

.pessoas .p-prox__cap {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--on-brand) 78%, transparent);
  margin: 0;
}

.pessoas .p-prox__quando {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
}

.pessoas .p-prox__hora {
  margin: 0;
  font-family: var(--x-font-display);
  font-size: 52px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.pessoas .p-prox__dia {
  margin: 0;
  text-align: right;
  padding-bottom: 4px;
}

.pessoas .p-prox__dia b {
  display: block;
  font-size: 17px;
  font-weight: 600;
}

.pessoas .p-prox__dia span {
  display: block;
  font-size: 15px;
  color: color-mix(in srgb, var(--on-brand) 80%, transparent);
}

.pessoas .p-prox .p-prox__linha {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 0.5px solid color-mix(in srgb, var(--on-brand) 25%, transparent);
}

.pessoas .p-prox .p-retrato--iniciais {
  background: color-mix(in srgb, var(--on-brand) 16%, transparent);
  color: var(--on-brand);
}

.pessoas .p-prox__coach {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}

.pessoas .p-prox .p-com {
  margin: 0;
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
  color: var(--on-brand);
}

.pessoas .p-prox__so-detalhe {
  margin-top: 12px;
}

.pessoas .p-prox .p-acoes {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}

.pessoas .p-prox .p-acoes > * {
  width: 100%;
  margin: 0;
}

.pessoas .p-acoes__duas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.pessoas .p-prox .botao-primario {
  background: var(--x-surface);
  color: var(--brand-text);
}

.pessoas .p-prox .botao-primario svg.ic {
  width: 20px;
  height: 20px;
}

.pessoas .p-prox .botao-fantasma {
  background: color-mix(in srgb, var(--on-brand) 16%, transparent);
  color: var(--on-brand);
  min-height: 44px;
  font-size: 16px;
  width: 100%;
}

.pessoas .p-prox--vazia {
  background: var(--x-surface);
  color: var(--x-label);
  text-align: center;
  padding: 22px 16px 16px;
  border-radius: 12px;
}

.pessoas .p-prox__icone {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  margin: 0 auto 12px;
  display: grid;
  place-items: center;
  background: var(--brand-tint);
  color: var(--brand-text);
}

.pessoas .p-prox__icone svg.ic {
  width: 28px;
  height: 28px;
}

.pessoas .p-prox--vazia .p-vazio {
  font-size: 17px;
  font-weight: 600;
  color: var(--x-label);
  margin: 0 0 16px;
}

.pessoas .p-prox--vazia .p-acoes > * {
  width: 100%;
}

.pessoas .p-capa {
  border-radius: 12px;
  margin-top: 12px;
}

/* The week */
.pessoas .p-semana__barra {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 8px;
  padding: 16px 16px 0;
}

.pessoas .p-semana__barra i {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: var(--x-fill);
}

.pessoas .p-semana__barra i.feita {
  background: var(--brand);
}

.pessoas .p-grupo .p-semana {
  margin: 0;
  padding: 10px 16px 14px;
  font-size: 15px;
  color: var(--x-label-2);
}

.pessoas .p-semana a {
  color: var(--brand-text);
  text-decoration: none;
}

/* The coach's note and the invitations: inset cards. */
.pessoas .p-nota {
  margin-top: 28px;
  padding: 16px;
  background: var(--x-surface);
  border-radius: 12px;
  border: 0;
}

.pessoas .p-nota__de {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--x-label);
}

.pessoas .p-nota__texto {
  font-size: 17px;
  line-height: 22px;
  margin: 0;
}

.pessoas .p-nota__data {
  font-size: 13px;
  color: var(--x-label-2);
  margin: 8px 0 0;
}

.pessoas .p-convite {
  margin-top: 12px;
  padding: 14px 16px;
  background: var(--brand-tint);
  border-radius: 12px;
  border: 0;
  display: grid;
  gap: 12px;
}

.pessoas .p-convite__texto strong {
  display: block;
  font-size: 17px;
}

.pessoas .p-convite__texto span {
  display: block;
  font-size: 15px;
  color: var(--x-label-2);
}

.pessoas .p-convite .botao {
  background: var(--brand);
  color: var(--on-brand);
}

.pessoas .eyebrow {
  border: 0;
  padding: 0;
}

.pessoas .p-acoes__duas > * {
  margin: 0;
}

/* « Amanhã às 12:00 » stays in the page for screen readers; the card shows
   the hour and the day apart. */
.pessoas .p-prox .p-quando {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.pessoas .p-semana-bloco {
  margin-top: 28px;
}

.pessoas .p-grupo .p-semana {
  color: var(--x-label);
  font-size: 15px;
  padding: 12px 16px 12px;
}

.pessoas .p-semana__barra + .p-semana {
  padding-top: 10px;
}

/* ------------------------------------------------------------------ */
/* Membro: headers of the screens                                       */
/* ------------------------------------------------------------------ */

.pessoas .p-cabecalho {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 0;
  border: 0;
}

.pessoas .p-cabecalho h1 {
  margin: 2px 0 0;
}

.pessoas .p-cabecalho__aux {
  font-size: 15px;
  color: var(--x-label-2);
  white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* Membro: Marcar                                                       */
/* ------------------------------------------------------------------ */

.pessoas .marcar-quota {
  margin: 2px 0 0;
  font-size: 15px;
  color: var(--x-label-2);
}

.pessoas .dias-lista {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
  margin: 16px -6px 0;
  padding: 0;
  border: 0;
  overflow: visible;
}

.pessoas .dia-opcao {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding: 0 0 6px;
  border: 0;
  border-radius: 0;
  background: none;
  text-decoration: none;
  color: var(--x-label);
}

.pessoas .dia-opcao__letra {
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--x-label-2);
}

.pessoas .dia-opcao__numero {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 19px;
  font-weight: 500;
  color: var(--x-label);
}

.pessoas .dia-opcao--hoje:not(.dia-opcao--selecionada) .dia-opcao__numero {
  color: var(--brand-text);
  font-weight: 700;
}

.pessoas .dia-opcao--selecionada {
  background: none;
  border: 0;
}

.pessoas .dia-opcao--selecionada .dia-opcao__letra {
  color: var(--x-label-2);
}

.pessoas .dia-opcao--selecionada .dia-opcao__numero {
  background: var(--brand);
  color: var(--on-brand);
  font-weight: 600;
}

/* The service types: the segmented control of the mockups. */
.pessoas .marcar-tipos {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  margin: 16px 0 0;
  padding: 2px;
  border-radius: 9px;
  background: var(--x-fill);
  border: 0;
}

.pessoas .marcar-tipos__sep {
  display: none;
}

.pessoas .marcar-tipos__link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 4px 8px;
  border-radius: 7px;
  font-size: 13px;
  line-height: 16px;
  font-weight: 500;
  text-align: center;
  color: var(--x-label);
  text-decoration: none;
  border: 0;
}

.pessoas .marcar-tipos__link[aria-current="page"] {
  background: var(--x-surface);
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12), 0 3px 1px rgba(0, 0, 0, 0.04);
}

/* The slots: one inset group, a row per slot. */
.pessoas .creneau-lista {
  margin-top: 16px;
  background: var(--x-surface);
  border-radius: 12px;
  overflow: hidden;
  border: 0;
  padding: 0;
}

.pessoas .creneau {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 11px 16px;
  border: 0;
  border-radius: 0;
  background: var(--x-surface);
  color: var(--x-label);
  text-decoration: none;
}

.pessoas .creneau + .creneau::before {
  content: "";
  position: absolute;
  top: 0;
  left: 16px;
  right: 0;
  border-top: 0.5px solid var(--x-sep);
}

.pessoas .creneau:active {
  background: var(--x-fill-2);
}

.pessoas .creneau__hora {
  width: 52px;
  flex: none;
  font-size: 17px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.pessoas .creneau__corpo {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.pessoas .creneau__nome {
  font-size: 17px;
  line-height: 22px;
  color: var(--x-label);
}

.pessoas .creneau__sub {
  font-size: 13px;
  line-height: 18px;
  color: var(--x-label-2);
}

.pessoas .creneau__vagas {
  font-size: 15px;
  font-weight: 400;
  white-space: nowrap;
  color: var(--brand-text);
}

.pessoas .creneau--marcada {
  background: var(--x-surface);
}

.pessoas .creneau--marcada .creneau__vagas,
.pessoas .creneau__marcada {
  color: var(--brand-text);
  font-weight: 600;
}

/* A slot already past: its words in the secondary label, never a
   transparency that would fall under AA (pessoas.css's rule kept). */
.pessoas .creneau--passou .creneau__hora,
.pessoas .creneau--passou .creneau__nome,
.pessoas .creneau--passou .creneau__vagas {
  color: var(--x-label-2);
  font-weight: 400;
}

/* ------------------------------------------------------------------ */
/* Membro: Sessões and Histórico                                        */
/* ------------------------------------------------------------------ */

.pessoas .p-lista-sessoes {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
  border: 0;
}

.pessoas .p-sessao {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  background: var(--x-surface);
  border-radius: 12px;
  border: 0;
}

.pessoas .p-sessao + .p-sessao {
  border: 0;
}

.pessoas .p-sessao__corpo {
  flex: 1;
  min-width: 0;
}

.pessoas .p-sessao__dia {
  margin: 0;
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--x-label-2);
}

.pessoas .p-sessao__hora {
  margin: 2px 0 0;
  font-size: 34px;
  line-height: 40px;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.pessoas .p-sessao .p-com,
.pessoas .p-com {
  margin: 2px 0 0;
  font-size: 15px;
  line-height: 20px;
  color: var(--x-label-2);
}

.pessoas .p-sessao__acoes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 14px;
}

.pessoas .p-sessao__acoes > * {
  margin: 0;
  width: 100%;
}

.pessoas .p-sessao__acoes .p-acao-quieta {
  grid-column: 1 / -1;
  justify-content: flex-start;
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  font-size: 15px;
}

.pessoas .p-codigo {
  margin-top: 4px;
  border-top: 0.5px solid var(--x-sep);
  padding-top: 8px;
}

.pessoas .p-codigo summary {
  min-height: 36px;
  display: flex;
  align-items: center;
  font-size: 15px;
  color: var(--brand-text);
  text-decoration: none;
  cursor: pointer;
}

.pessoas .p-codigo__legenda {
  font-size: 13px;
  color: var(--x-label-2);
}

.pessoas .p-sessoes__mais {
  margin-top: 16px;
}

.pessoas .p-sessoes__mais a,
.pessoas .p-linhas .p-linha {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 11px 36px 11px 16px;
  background: var(--x-surface);
  color: var(--x-label);
  font-size: 17px;
  text-decoration: none;
  border: 0;
}

.pessoas .p-sessoes__mais a {
  border-radius: 12px;
}

.pessoas .p-sessoes__mais a::after,
.pessoas .p-linhas .p-linha::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -4px;
  border-right: 2px solid #C4C4C7;
  border-top: 2px solid #C4C4C7;
  transform: rotate(45deg);
}

/* ------------------------------------------------------------------ */
/* Membro: Conta (/cartao)                                              */
/* ------------------------------------------------------------------ */

.pessoas .p-conta {
  display: flex;
  flex-direction: column;
}

.pessoas .p-conta__avatar {
  align-self: center;
  display: grid;
  place-items: center;
  width: 80px;
  height: 80px;
  margin-top: 8px;
  border-radius: 50%;
  background: #E4E8EE;
  color: #3B4A5E;
  font-size: 30px;
  font-weight: 600;
}

.pessoas h1.p-conta__nome {
  align-self: center;
  margin-top: 10px;
  font-size: 22px;
  line-height: 28px;
  text-align: center;
}

.pessoas .p-cartao {
  margin-top: 20px;
  padding: 22px 20px 20px;
  background: var(--x-surface);
  border-radius: 16px;
  text-align: center;
  border: 0;
}

.pessoas .p-cartao h2 {
  font-size: 17px;
  line-height: 22px;
  font-weight: 600;
  margin: 0;
}

.pessoas .p-cartao .qr-bloco {
  width: 216px;
  max-width: 100%;
  margin: 16px auto 12px;
  padding: 0;
  border: 0;
  background: none;
}

.pessoas .p-cartao .qr-bloco svg {
  width: 100%;
  height: auto;
  display: block;
}

.pessoas .p-cartao__legenda {
  font-size: 15px;
  color: var(--x-label-2);
  margin: 0;
}

.pessoas .p-linhas {
  display: block;
  margin-top: 28px;
  border-radius: 12px;
  overflow: hidden;
  border: 0;
}

.pessoas .p-linhas .p-linha + .p-linha::before {
  content: "";
  position: absolute;
  top: 0;
  left: 16px;
  right: 0;
  border-top: 0.5px solid var(--x-sep);
}

.pessoas .p-conta__fim {
  margin-top: 28px;
}

.pessoas .p-conta__fim .p-sair,
.pessoas .p-conta__fim form {
  display: block;
}

.pessoas .p-conta__fim .p-acao-quieta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  border-radius: 12px;
  background: var(--x-surface);
  color: var(--x-red);
  font-size: 17px;
}

/* ------------------------------------------------------------------ */
/* Membro: Treino (the plan) and an exercise's progress                 */
/* ------------------------------------------------------------------ */

.pessoas .plano-cabecalho {
  margin: 0;
  padding: 0;
  border: 0;
}

.pessoas .plano-cabecalho__titulo {
  font-size: 34px;
  line-height: 41px;
}

.pessoas .plano-cabecalho__periodo,
.pessoas .plano-cabecalho__meta {
  display: inline;
  margin: 0;
  font-size: 15px;
  line-height: 20px;
  font-weight: 400;
  color: var(--x-label-2);
}

.pessoas .plano-cabecalho__periodo + .plano-cabecalho__meta::before,
.pessoas .plano-cabecalho__meta + .plano-cabecalho__meta::before {
  content: " · ";
}

.pessoas .plano-variantes {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0;
  margin: 18px 0 0;
  padding: 2px;
  border-radius: 9px;
  background: var(--x-fill);
  border: 0;
}

.pessoas .plano-variantes__item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  min-width: 0;
  width: auto;
  height: auto;
  padding: 4px 8px;
  border-radius: 7px;
  border: 0;
  background: none;
  color: var(--x-label);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
}

.pessoas .plano-variantes__item[aria-current="page"] {
  background: var(--x-surface);
  color: var(--x-label);
  font-weight: 600;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12), 0 3px 1px rgba(0, 0, 0, 0.04);
}

.pessoas .plano-variante__titulo {
  font-size: 20px;
  margin: 24px 0 8px;
  padding: 0;
  border: 0;
}

.pessoas .plano-elementos {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--x-surface);
  border-radius: 12px;
  overflow: hidden;
  border: 0;
}

.pessoas .plano-elemento {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0;
  padding: 14px 16px;
  border: 0;
  background: var(--x-surface);
}

.pessoas .plano-elemento + .plano-elemento::before {
  content: "";
  position: absolute;
  top: 0;
  left: 36px;
  right: 0;
  border-top: 0.5px solid var(--x-sep);
}

.pessoas .plano-elemento__ordem {
  width: 20px;
  flex: none;
  font-size: 15px;
  line-height: 22px;
  font-weight: 400;
  color: var(--x-label-2);
  font-variant-numeric: tabular-nums;
  background: none;
  border: 0;
  height: auto;
  border-radius: 0;
  display: block;
}

.pessoas .plano-elemento__corpo {
  flex: 1;
  min-width: 0;
}

.pessoas .plano-elemento__nome {
  margin: 0;
  font-size: 17px;
  line-height: 22px;
  font-weight: 600;
}

.pessoas .plano-elemento__equipamento,
.pessoas .plano-elemento__regulacao {
  margin: 0;
  font-size: 15px;
  line-height: 20px;
  color: var(--x-label-2);
}

.pessoas .plano-elemento__prescricao {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 22px;
  font-weight: 400;
  color: var(--x-label);
}

.pessoas .plano-elemento__metrica {
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

.pessoas .plano-elemento__nota {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--x-bg);
  font-size: 15px;
  line-height: 20px;
  color: var(--x-label);
  border: 0;
}

.pessoas .plano-elemento__progresso {
  margin-top: 10px;
  padding: 0;
  border: 0;
}

.pessoas .plano-elemento__ultimo {
  margin: 0;
  font-size: 13px;
  line-height: 18px;
  color: var(--x-label-2);
}

.pessoas .p-tendencia {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  color: var(--brand-text);
}

.pessoas .p-tendencia[data-sentido="desceu"] {
  color: var(--x-orange);
}

.pessoas .plano-elemento__ver {
  margin: 8px 0 0;
}

.pessoas .plano-elemento__ver .link-discreto {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 8px;
  background: var(--brand-tint);
  color: var(--brand-text);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

/* The last workouts */
.pessoas .plano-treinos {
  margin-top: 28px;
}

.pessoas .plano-treinos__titulo {
  margin: 0 0 8px;
}

.pessoas .plano-treinos__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--x-surface);
  border-radius: 12px;
  overflow: hidden;
}

.pessoas .plano-treino {
  position: relative;
  border: 0;
}

.pessoas .plano-treino + .plano-treino::before {
  content: "";
  position: absolute;
  top: 0;
  left: 16px;
  right: 0;
  border-top: 0.5px solid var(--x-sep);
}

.pessoas .plano-treino .dobra {
  margin: 0;
  border-radius: 0;
}

.pessoas .plano-treino__texto {
  display: flex;
  flex-direction: column;
}

.pessoas .plano-treino__dia {
  font-size: 17px;
  color: var(--x-label);
}

.pessoas .plano-treino__segmento {
  font-size: 13px;
  color: var(--x-label-2);
}

.pessoas .plano-treino__feitos {
  list-style: none;
  margin: 0;
  padding: 0 16px 12px;
}

.pessoas .plano-treino__feito {
  padding: 6px 0;
  font-size: 15px;
  color: var(--x-label-2);
  border: 0;
}

.pessoas .plano-treino__nome {
  color: var(--x-label);
  font-weight: 600;
}

/* An exercise's progress */
.pessoas .plano-exercicio__voltar {
  margin: 0 0 4px;
}

.pessoas .plano-exercicio__voltar .link-discreto {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-height: 44px;
  font-size: 17px;
  color: var(--brand-text);
}

.pessoas .plano-exercicio__voltar .link-discreto::before {
  content: "";
  width: 10px;
  height: 10px;
  margin-right: 4px;
  border-left: 2.5px solid currentColor;
  border-bottom: 2.5px solid currentColor;
  transform: rotate(45deg);
}

.pessoas .plano-historico {
  margin-top: 12px;
}

.pessoas .plano-historico > .p-tendencia {
  font-size: 15px;
}

.pessoas .p-grafico {
  margin: 12px 0 0;
  padding: 14px 10px 8px;
  background: var(--x-surface);
  border-radius: 12px;
  border: 0;
}

.pessoas .p-grafico__legenda {
  font-size: 13px;
  color: var(--x-label-2);
  margin: 2px 8px 4px;
}

.pessoas .p-tabela-registos {
  margin-top: 12px;
  background: var(--x-surface);
  border-radius: 12px;
  padding: 2px 16px;
  overflow-x: auto;
}

.pessoas .p-tabela {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.pessoas .p-tabela th,
.pessoas .p-tabela td {
  padding: 10px 0;
  text-align: left;
  font-size: 15px;
  border: 0;
  box-shadow: inset 0 0.5px 0 var(--x-sep);
}

.pessoas .p-tabela thead th {
  font-size: 12px;
  font-weight: 400;
  color: var(--x-label-2);
  box-shadow: none;
  padding: 9px 0 6px;
}

.pessoas .p-tabela tbody th {
  font-weight: 400;
}

/* ------------------------------------------------------------------ */
/* Membro: confirm, cancel, move a session                              */
/* ------------------------------------------------------------------ */

.pessoas .cartao-heroi .rotulo,
.pessoas .cartao > .rotulo:first-child {
  font-size: 15px;
  color: var(--x-label-2);
  margin: 0;
}

.pessoas .cartao .numero-heroi {
  font-size: 40px;
  line-height: 46px;
  margin: 0;
}

.pessoas .cartao-heroi .dado,
.pessoas .cartao > .dado {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 0.5px solid var(--x-sep);
  font-size: 15px;
  font-weight: 600;
}

.pessoas main > h1 + .cartao,
.pessoas main > h1 + section {
  margin-top: 16px;
}

.pessoas main > form {
  margin-top: 16px;
}

.pessoas main > form > .botao,
.pessoas .resultado-links .botao {
  width: 100%;
}

.pessoas .resultado-links {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

/* ------------------------------------------------------------------ */
/* Membro: Entrar                                                       */
/* ------------------------------------------------------------------ */

.pessoas .entrar-capa {
  margin: 12px 0 20px;
}

.pessoas .entrar-capa p {
  margin-top: 6px;
  font-size: 15px;
  line-height: 20px;
  color: var(--x-label-2);
}

.pessoas .formulario {
  display: grid;
  gap: 6px;
}

.pessoas .formulario .botao {
  margin-top: 14px;
  width: 100%;
}

.pessoas .formulario .rotulo {
  margin: 10px 16px 0;
}

.pessoas .entrar-ajuda {
  font-size: 13px;
  line-height: 18px;
  color: var(--x-label-2);
  margin: 12px 16px 0;
}

.pessoas .entrar-coach {
  margin-top: 24px;
  text-align: center;
}

.pessoas a.creneau .creneau__vagas {
  color: var(--brand-text);
}

.pessoas a.creneau.creneau--passou .creneau__vagas,
.pessoas a.creneau.creneau--passou .creneau__hora,
.pessoas a.creneau.creneau--passou .creneau__nome,
.pessoas a.creneau .creneau__vagas--esgotado {
  color: var(--x-label-2);
  font-weight: 400;
}

.pessoas a.creneau .creneau__vagas--alerta {
  color: var(--x-orange);
  font-weight: 600;
}

.pessoas .p-sessoes__mais {
  display: block;
}

.pessoas .p-conta__fim .p-sair,
.pessoas .p-conta__fim .p-sair button {
  width: 100%;
}

/* ------------------------------------------------------------------ */
/* Treinador: frame                                                     */
/* ------------------------------------------------------------------ */

.pessoas-coach .p-topo__acoes {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pessoas-coach .p-topo__acoes .p-acao-quieta {
  font-size: 15px;
}

.pessoas-coach .p-rodape--coach .p-abas__item,
.pessoas-coach .p-abas--coach .p-abas__item {
  font-size: 11px;
  line-height: 13px;
  font-weight: 500;
  min-height: 44px;
  padding: 0 2px;
  border: 0;
  border-bottom: 0;
  text-decoration: none;
}

.pessoas-coach .p-abas--coach .p-abas__item[aria-current="page"] {
  font-weight: 600;
  border: 0;
}

.pessoas-coach main.app-content {
  padding-top: 4px;
}

/* Back links (« Hoje », « Agenda », a member's name): the navigation bar's
   chevron. */
.pessoas-coach .coach-voltar {
  margin: 0 0 2px;
}

.pessoas-coach .coach-voltar .link-discreto {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 17px;
  color: var(--brand-text);
  text-decoration: none;
}

.pessoas-coach .coach-voltar .link-discreto::before {
  content: "";
  width: 10px;
  height: 10px;
  margin-right: 6px;
  border-left: 2.5px solid currentColor;
  border-bottom: 2.5px solid currentColor;
  transform: rotate(45deg);
}

.pessoas-coach h1 {
  font-size: 34px;
  line-height: 41px;
}

.pessoas-coach .eyebrow {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 4px 0 0;
}

/* The day / filter switches: the mockups' segmented control. */
.pessoas-coach .coach-dias {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0;
  margin: 10px 0 0;
  padding: 2px;
  border-radius: 9px;
  background: var(--x-fill);
  border: 0;
}

.pessoas-coach .coach-dias__item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 4px 8px;
  border-radius: 7px;
  border: 0;
  background: none;
  color: var(--x-label);
  font-size: 13px;
  line-height: 16px;
  font-weight: 500;
  text-decoration: none;
  text-align: center;
}

.pessoas-coach .coach-dias__item--atual,
.pessoas-coach .coach-dias__item[aria-current="page"] {
  background: var(--x-surface);
  color: var(--x-label);
  font-weight: 600;
  border: 0;
  text-decoration: none;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12), 0 3px 1px rgba(0, 0, 0, 0.04);
}

.pessoas-coach .coach-dias__item::after,
.pessoas-coach .coach-dias__item--atual::after {
  content: none;
}

/* The day's filter (date, unit, service): an inset row that opens. */
.pessoas-coach .coach-filtros {
  margin-top: 12px;
}

.pessoas-coach .coach-filtros__corpo {
  display: grid;
  gap: 8px;
  padding: 0 16px 16px;
}

.pessoas-coach .coach-filtros__corpo input,
.pessoas-coach .coach-filtros__corpo select {
  background: var(--x-bg);
}

.pessoas-coach .coach-filtros__campo {
  margin: 0;
}

/* ------------------------------------------------------------------ */
/* Treinador: Hoje                                                      */
/* ------------------------------------------------------------------ */

.pessoas-coach .coach-proxima {
  margin-top: 18px;
  padding: 18px 18px 16px;
  border-radius: 20px;
  border: 0;
  background: var(--brand-dark);
  color: #FFFFFF;
}

.pessoas-coach .coach-proxima__cabecalho {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.pessoas-coach .coach-proxima .plate-rotulo {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

.pessoas-coach .coach-proxima__estado {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #8FD3C0;
}

.pessoas-coach .coach-proxima .numero-heroi {
  margin: 4px 0 0;
  font-size: 52px;
  line-height: 1;
  font-weight: 700;
  color: #FFFFFF;
}

.pessoas-coach .coach-proxima .numero-heroi small {
  font-size: 17px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0;
}

.pessoas-coach .coach-proxima__meta {
  margin: 6px 0 0;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.72);
}

.pessoas-coach .coach-participantes {
  list-style: none;
  margin: 16px 0;
  padding: 0;
  border-top: 0.5px solid rgba(255, 255, 255, 0.16);
}

.pessoas-coach .coach-participante {
  display: grid;
  grid-template-columns: 36px 1fr;
  column-gap: 10px;
  align-items: start;
  padding: 11px 0;
  border: 0;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.16);
  background: none;
}

.pessoas-coach .coach-participante > *:not(.p-retrato) {
  grid-column: 2;
}

.pessoas-coach .coach-participante .p-retrato {
  grid-row: 1 / span 4;
  background: rgba(255, 255, 255, 0.14);
  color: #FFFFFF;
}

.pessoas-coach .coach-participante__nome {
  font-size: 15px;
  line-height: 20px;
  font-weight: 600;
  color: #FFFFFF;
  text-decoration: none;
}

.pessoas-coach .coach-participante .coach-perfil,
.pessoas-coach .coach-participante__linha,
.pessoas-coach .coach-participante .p-sinais {
  margin: 0;
  font-size: 13px;
  line-height: 18px;
  color: rgba(255, 255, 255, 0.68);
}

.pessoas-coach .coach-participante .p-dor {
  margin: 2px 0 0;
  font-size: 13px;
  line-height: 18px;
  color: #FFC46B;
}

.pessoas-coach .coach-participante__segmento + .coach-participante__segmento::before {
  content: " · ";
}

.pessoas-coach .coach-participante__estado {
  margin: 4px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: #8FD3C0;
}

.pessoas-coach .coach-participante__gesto {
  margin-top: 8px;
}

.pessoas-coach .coach-proxima .coach-participante__gesto .botao-primario {
  min-height: 40px;
  padding: 0 16px;
  font-size: 15px;
  border-radius: 10px;
  background: #FFFFFF;
  color: var(--brand-dark);
}

.pessoas-coach .coach-proxima .aviso-mensagem {
  background: rgba(255, 196, 107, 0.16);
  color: #FFFFFF;
}

.pessoas-coach .coach-proxima__deixar .botao-fantasma {
  width: 100%;
  min-height: 44px;
  background: rgba(255, 255, 255, 0.14);
  color: #FFFFFF;
}

/* The day's blocks: a caption, then one inset group per session. */
.pessoas-coach .coach-bloco {
  margin-top: 28px;
}

.pessoas-coach .coach-bloco__titulo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0 0 8px;
  font-size: 20px;
  line-height: 25px;
  border: 0;
  padding: 0;
}

.pessoas-coach .coach-contador {
  font-size: 15px;
  font-weight: 400;
  color: var(--x-label-2);
  background: none;
  padding: 0;
  min-width: 0;
  border: 0;
}

.pessoas-coach .coach-sessao-grupo {
  margin-top: 12px;
  background: var(--x-surface);
  border-radius: 12px;
  overflow: hidden;
  border: 0;
}

.pessoas-coach .coach-sessao-grupo__hora {
  margin: 0;
  padding: 12px 16px 4px;
  font-size: 13px;
  line-height: 18px;
  color: var(--x-label-2);
  border: 0;
}

.pessoas-coach .coach-sessao-grupo__hora .dado {
  font-size: 17px;
  font-weight: 600;
  color: var(--x-label);
  margin-right: 6px;
}

.pessoas-coach .coach-sessao-grupo .coach-cartao {
  position: relative;
  display: grid;
  grid-template-columns: 36px 1fr;
  column-gap: 12px;
  margin: 0;
  padding: 11px 16px;
  border-radius: 0;
  background: var(--x-surface);
  border: 0;
}

.pessoas-coach .coach-sessao-grupo .coach-cartao + .coach-cartao::before {
  content: "";
  position: absolute;
  top: 0;
  left: 64px;
  right: 0;
  border-top: 0.5px solid var(--x-sep);
}

.pessoas-coach .coach-cartao > *:not(.p-retrato) {
  grid-column: 2;
}

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

.pessoas-coach .coach-cartao__titulo {
  margin: 0;
  font-size: 17px;
  line-height: 22px;
  font-weight: 400;
}

.pessoas-coach .coach-cartao__ligacao {
  color: var(--x-label);
  text-decoration: none;
}

.pessoas-coach .coach-cartao__estado {
  display: flex;
  flex-wrap: wrap;
  gap: 0 6px;
  margin: 2px 0 0;
  font-size: 13px;
  line-height: 18px;
  color: var(--x-label-2);
}

.pessoas-coach .coach-cartao__estado .rotulo {
  font-size: 13px;
  line-height: 18px;
}

.pessoas-coach .coach-cartao__estado .coach-texto {
  font-weight: 600;
  color: var(--x-label);
  margin-right: 8px;
}

.pessoas-coach .coach-cartao .coach-perfil {
  margin: 0;
  font-size: 13px;
  line-height: 18px;
  color: var(--x-label-2);
}

.pessoas-coach .coach-sessao-grupo__acoes {
  margin: 0;
  padding: 4px 16px 12px;
}

.pessoas-coach .coach-sessao-grupo__acoes .botao-fantasma {
  min-height: 36px;
  padding: 0 14px;
  font-size: 15px;
  border-radius: 10px;
}

.pessoas-coach .coach-vazio {
  margin-top: 18px;
  padding: 22px 16px;
  background: var(--x-surface);
  border-radius: 12px;
  text-align: center;
  font-size: 15px;
  color: var(--x-label-2);
}

/* « Sugestões »: an inset row that opens. */
.pessoas-coach .coach-sugestoes__lista {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ------------------------------------------------------------------ */
/* Treinador: Agenda                                                    */
/* ------------------------------------------------------------------ */

.pessoas-coach .coach-agenda__semana {
  margin: 12px 0 0;
}

.pessoas-coach .coach-agenda__semana .link-discreto {
  font-size: 15px;
}

.pessoas-coach .coach-grelha {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: block;
  background: var(--x-surface);
  border-radius: 12px;
  overflow: hidden;
  border: 0;
}

.pessoas-coach .coach-slot {
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--x-surface);
}

.pessoas-coach .coach-slot + .coach-slot::before {
  content: "";
  position: absolute;
  top: 0;
  left: 16px;
  right: 0;
  border-top: 0.5px solid var(--x-sep);
  z-index: 1;
}

.pessoas-coach .coach-slot__ligacao {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 12px;
  align-items: center;
  padding: 11px 16px;
  color: var(--x-label);
  text-decoration: none;
  border: 0;
  background: none;
}

.pessoas-coach .coach-slot__ligacao > * {
  grid-column: 1;
}

.pessoas-coach .coach-slot__ligacao > .coach-lugares {
  grid-column: 2;
  grid-row: 1 / span 3;
}

.pessoas-coach .coach-slot__hora {
  font-size: 17px;
  line-height: 22px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  margin: 0;
}

.pessoas-coach .coach-slot__quem {
  font-size: 15px;
  line-height: 20px;
  color: var(--x-label);
  margin: 0;
}

.pessoas-coach .coach-slot__quem--sem {
  color: var(--x-orange);
}

.pessoas-coach .coach-slot__sub {
  font-size: 13px;
  line-height: 18px;
  color: var(--x-label-2);
  margin: 0;
}

.pessoas-coach .coach-lugares {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: right;
}

.pessoas-coach .coach-lugares__caixas {
  display: flex;
  gap: 3px;
}

.pessoas-coach .coach-lugares__caixa {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  border: 0;
  background: var(--x-fill);
}

.pessoas-coach .coach-lugares__caixa--cheia {
  background: var(--brand);
}

.pessoas-coach .coach-lugares__texto {
  font-size: 15px;
  font-weight: 600;
  color: var(--x-label);
  font-variant-numeric: tabular-nums;
}

.pessoas-coach .coach-lugares__nivel {
  font-size: 12px;
  color: var(--x-label-2);
}

/* A slot's sheet */
.pessoas-coach .coach-creneau__quem {
  font-size: 15px;
  color: var(--x-label-2);
  margin: 2px 0 0;
}

.pessoas-coach .coach-creneau__lugares {
  margin: 12px 0 0;
}

.pessoas-coach .coach-creneau__lugares .coach-lugares {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.pessoas-coach .coach-nota {
  margin: 12px 0 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--brand-tint);
  font-size: 15px;
  line-height: 20px;
  color: var(--x-label);
  border: 0;
}

/* ------------------------------------------------------------------ */
/* Treinador: lists (Membros, a slot's bookings, the member's plans)    */
/* ------------------------------------------------------------------ */

.pessoas-coach .coach-seccao {
  margin-top: 28px;
}

.pessoas-coach .coach-seccao > h2,
.pessoas-coach .coach-seccao__titulo {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 8px;
  font-size: 20px;
  line-height: 25px;
  border: 0;
  padding: 0;
}

.pessoas-coach .coach-linhas {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: block;
  background: var(--x-surface);
  border-radius: 12px;
  overflow: hidden;
  border: 0;
}

.pessoas-coach .coach-linhas--colunas {
  columns: auto;
}

.pessoas-coach .coach-linha {
  position: relative;
  display: grid;
  grid-template-columns: 36px 1fr;
  column-gap: 12px;
  align-items: start;
  margin: 0;
  padding: 11px 16px;
  border: 0;
  background: var(--x-surface);
  break-inside: avoid;
}

.pessoas-coach .coach-linhas--sem-iniciais .coach-linha {
  grid-template-columns: 1fr;
}

.pessoas-coach .coach-linha + .coach-linha::before {
  content: "";
  position: absolute;
  top: 0;
  left: 64px;
  right: 0;
  border-top: 0.5px solid var(--x-sep);
}

.pessoas-coach .coach-linhas--sem-iniciais .coach-linha + .coach-linha::before {
  left: 16px;
}

.pessoas-coach .coach-linha > *:not(.p-retrato) {
  grid-column: -2;
}

.pessoas-coach .coach-linha .p-retrato {
  grid-row: 1 / span 4;
  grid-column: 1;
}

.pessoas-coach .coach-linha__nome {
  font-size: 17px;
  line-height: 22px;
  font-weight: 400;
  color: var(--x-label);
  text-decoration: none;
}

.pessoas-coach a.coach-linha__nome {
  color: var(--x-label);
}

.pessoas-coach .coach-linha__sub {
  margin: 0;
  font-size: 13px;
  line-height: 18px;
  color: var(--x-label-2);
}

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

.pessoas-coach .coach-linha__forte {
  font-weight: 600;
  color: var(--x-label);
}

.pessoas-coach .coach-linha__gestos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.pessoas-coach .coach-linha__gestos .botao,
.pessoas-coach .coach-linha__gestos .botao-fantasma {
  min-height: 36px;
  padding: 0 14px;
  font-size: 15px;
  border-radius: 10px;
}

.pessoas-coach .coach-paginas {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
}

/* Membros: the search */
.pessoas-coach .coach-pesquisa {
  margin-top: 10px;
}

.pessoas-coach .coach-pesquisa__linha {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}

.pessoas-coach .coach-pesquisa input[type="search"],
.pessoas-coach .coach-pesquisa input[type="text"] {
  min-height: 40px;
  border-radius: 10px;
  background: var(--x-fill);
  padding: 8px 12px;
}

.pessoas-coach .coach-pesquisa .botao {
  min-height: 40px;
  font-size: 15px;
  border-radius: 10px;
}

.pessoas-coach .coach-pesquisa__filtros {
  margin-top: 4px;
}

.pessoas-coach .coach-pesquisa select {
  min-height: 40px;
  border-radius: 10px;
  padding: 8px 12px;
}

.pessoas-coach .coach-membros__total {
  display: block;
  margin: 14px 16px 0;
  font-size: 13px;
  text-transform: uppercase;
  color: var(--x-label-2);
}

/* ------------------------------------------------------------------ */
/* Treinador: a member's sheet                                          */
/* ------------------------------------------------------------------ */

.pessoas-coach .coach-plano-ficha .coach-linha__gestos .botao-primario {
  min-height: 44px;
  width: 100%;
  font-size: 17px;
  border-radius: 12px;
}

.pessoas-coach .coach-plano__todos {
  margin: 8px 16px 0;
}

.pessoas-coach .coach-valores {
  margin: 0;
  padding: 0;
  background: var(--x-surface);
  border-radius: 12px;
  overflow: hidden;
  display: block;
}

.pessoas-coach .coach-valor {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  min-height: 44px;
  margin: 0;
  padding: 11px 16px;
  border: 0;
}

.pessoas-coach .coach-valor + .coach-valor::before {
  content: "";
  position: absolute;
  top: 0;
  left: 16px;
  right: 0;
  border-top: 0.5px solid var(--x-sep);
}

.pessoas-coach .coach-valor .rotulo {
  font-size: 17px;
  color: var(--x-label);
}

.pessoas-coach .coach-valor .coach-texto {
  font-size: 17px;
  font-weight: 400;
  color: var(--x-label-2);
  text-align: right;
}

.pessoas-coach .coach-tarefa-ficha,
.pessoas-coach .formulario--perfil {
  margin-top: 12px;
}

.pessoas-coach .coach-escolha {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pessoas-coach .coach-escolha__opcao {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 10px;
  background: var(--x-fill);
  font-size: 15px;
  border: 0;
}

.pessoas-coach .progresso-cartao {
  margin-top: 12px;
}

/* ------------------------------------------------------------------ */
/* Treinador: Tarefas                                                   */
/* ------------------------------------------------------------------ */

.pessoas-coach .coach-titulo-com-acao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.pessoas-coach .coach-titulo-com-acao .botao {
  min-height: 36px;
  padding: 0 14px;
  font-size: 15px;
  border-radius: 10px;
}

.pessoas-coach .coach-estados {
  margin-top: 8px;
}

/* ------------------------------------------------------------------ */
/* Treinador: the workout                                               */
/* ------------------------------------------------------------------ */

.pessoas-coach .coach-treino-iniciar__linha {
  font-size: 15px;
  color: var(--x-label-2);
}

.pessoas-coach .coach-treino-iniciar__acao .botao,
.pessoas-coach .coach-treino-iniciar__acao .botao-primario {
  width: 100%;
  margin-top: 16px;
}

.pessoas-coach .coach-treino-exercicios {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.pessoas-coach .coach-treino-exercicio {
  padding: 16px;
  background: var(--x-surface);
  border-radius: 12px;
  border: 0;
}

.pessoas-coach .coach-treino-exercicio__ordem {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--x-label-2);
  background: none;
  border: 0;
  width: auto;
  height: auto;
}

.pessoas-coach .coach-treino-exercicio__nome {
  font-size: 22px;
  line-height: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 2px 0 0;
}

.pessoas-coach .coach-treino-exercicio__equipamento,
.pessoas-coach .coach-treino-exercicio__regulacao,
.pessoas-coach .coach-treino-exercicio__leitura {
  font-size: 15px;
  color: var(--x-label-2);
  margin: 0;
}

.pessoas-coach .coach-treino-exercicio__prescricao {
  margin: 10px 0 0;
  font-size: 15px;
}

.pessoas-coach .coach-serie,
.pessoas-coach .coach-treino-registos li {
  border-color: var(--x-sep);
}

.pessoas-coach .coach-serie input {
  background: var(--x-bg);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* The participant's name is the link to the sheet: the chevron of the old
   skin goes, the whole line reads as the row. */
.pessoas-coach .coach-participante__nome::after {
  content: none;
}

.pessoas-coach .coach-treino-exercicio__cabeca {
  align-items: baseline;
}

.pessoas-coach .coach-treino-exercicio__cabeca .coach-treino-exercicio__ordem {
  font-size: 15px;
  text-transform: none;
}

/* A field on a white surface takes the grouped background, as in the mockups. */
.pessoas .cartao input:not([type="hidden"]):not([type="radio"]):not([type="checkbox"]),
.pessoas .coach-treino-exercicio input:not([type="hidden"]):not([type="radio"]):not([type="checkbox"]),
.pessoas .cartao textarea,
.pessoas .coach-treino-exercicio textarea {
  background: var(--x-bg);
  border: 0;
}

.pessoas .formulario .coach-escolha__opcao,
.pessoas .formulario label.coach-escolha__opcao {
  text-transform: none;
  letter-spacing: -0.01em;
  font-size: 15px;
  color: var(--x-label);
}

.pessoas .p-abas--coach .p-abas__item {
  flex: 1;
  justify-content: flex-start;
}

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

/* On a wide screen the segmented controls keep a phone measure. */
@media (min-width: 768px) {
  .pessoas-coach .coach-dias,
  .pessoas-coach .coach-filtros {
    max-width: 560px;
  }
}

/* ------------------------------------------------------------------ */
/* Membro: Progresso (app/evolucao)                                     */
/* ------------------------------------------------------------------ */

.pessoas .p-seg {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  margin: 14px 0 0;
  padding: 2px;
  border-radius: 9px;
  background: var(--x-fill);
}

.pessoas .p-seg__item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  min-width: 0;
  padding: 4px 6px;
  border-radius: 7px;
  font-size: 13px;
  line-height: 16px;
  font-weight: 500;
  text-align: center;
  color: var(--x-label);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pessoas .p-seg__item[aria-current="page"] {
  background: var(--x-surface);
  font-weight: 600;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12), 0 3px 1px rgba(0, 0, 0, 0.04);
}

.pessoas .p-evolucao__outros {
  margin-top: 8px;
}

.pessoas .p-evolucao__outros summary {
  font-size: 15px;
  color: var(--brand-text);
  min-height: 36px;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.pessoas .p-evolucao__valor {
  margin: 18px 2px 12px;
}

.pessoas .p-evolucao__numero {
  margin: 0;
  font-size: 34px;
  line-height: 41px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.pessoas .p-evolucao__delta {
  margin: 0;
  font-size: 15px;
  color: var(--x-label-2);
}

.pessoas .p-evolucao__delta b {
  color: var(--brand-text);
  font-weight: 600;
}

.pessoas .p-evolucao .p-grafico {
  margin-top: 0;
}

.pessoas .p-grafico__linha {
  stroke: var(--brand);
  stroke-width: 2.5;
  fill: none;
}

.pessoas .p-grafico__ponto {
  fill: var(--x-surface);
  stroke: var(--brand);
  stroke-width: 2;
}

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

.pessoas .p-grafico__valor,
.pessoas .p-grafico__dia {
  fill: var(--x-label-2);
  font-family: var(--x-font);
  font-size: 11px;
}

.pessoas .p-evolucao__ver {
  margin: 10px 2px 0;
  font-size: 15px;
}

.pessoas .p-evolucao__nota {
  font-size: 15px;
  color: var(--x-label-2);
  margin: 0;
}

.pessoas .p-barras {
  padding: 16px;
}

.pessoas .p-barras__titulo {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
}

.pessoas .p-barras__sub {
  margin: 2px 0 0;
  font-size: 13px;
  line-height: 18px;
  color: var(--x-label-2);
}

.pessoas .p-barras__grafico {
  position: relative;
  height: 100px;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 10px;
  align-items: end;
  margin-top: 22px;
}

.pessoas .p-barras__alvo {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1.5px dashed rgba(60, 60, 67, 0.28);
}

.pessoas .p-barras__alvo span {
  position: absolute;
  right: 0;
  bottom: 3px;
  font-size: 11px;
  color: var(--x-label-2);
}

.pessoas .p-barras__col {
  height: 100%;
  display: flex;
  flex-direction: column-reverse;
}

.pessoas .p-barras__col i {
  display: block;
  border-radius: 5px;
}

.pessoas .p-barras__feita {
  background: var(--brand);
  min-height: 3px;
}

.pessoas .p-barras__feita--baixa {
  background: var(--brand-soft);
}

.pessoas .p-barras__marcada {
  border: 1.5px dashed var(--brand);
  margin-top: 3px;
  order: -1;
}

.pessoas .p-barras__eixo {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 10px;
  margin-top: 6px;
}

.pessoas .p-barras__eixo span {
  font-size: 11px;
  color: var(--x-label-2);
  text-align: center;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.pessoas .p-barras__eixo span.atual {
  color: var(--x-label);
  font-weight: 600;
}

.pessoas .p-barras__legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 14px 0 0;
  font-size: 12px;
  color: var(--x-label-2);
}

.pessoas .p-barras__legenda span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.pessoas .p-barras__legenda .lg {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.pessoas .lg.cheia { background: var(--brand); }
.pessoas .lg.baixa { background: var(--brand-soft); }
.pessoas .lg.marcada { border: 1.5px dashed var(--brand); }

/* Conta: group captions */
.pessoas .p-sec-cap {
  margin: 28px 16px 7px;
  font-size: 13px;
  line-height: 18px;
  text-transform: uppercase;
  color: var(--x-label-2);
}

.pessoas .p-sec-cap + .p-linhas {
  margin-top: 0;
}