/*
 * DA « Estúdio à noite » (09/09/2026), component layer.
 *
 * telas.css holds the structure of the screens; this file, loaded last,
 * gives them their skin. A rule here wins over telas.css at equal specificity
 * because it comes after; when a telas.css rule is more
 * specific, its selector is repeated here with the same specificity.
 *
 * Principle: only one thing is large per screen (the time, the load, the
 * kcal). Everything else stays quiet: surfaces, hairlines, muted text.
 */

/* ------------------------------------------------------------------ */
/* Icônes inline                                                        */
/* ------------------------------------------------------------------ */

.icone,
.nav-principal__icone,
.tuila__icone,
.row__icone,
.botao__icone,
.fio-ariane__icone {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  filter: none;
}

.botao__icone {
  width: 20px;
  height: 20px;
}

.fio-ariane__icone {
  width: 16px;
  height: 16px;
  margin-right: 2px;
}

/* Line illustrations (tinta files on transparent): inverted so they
   live on dark, with the hue rotated so teal stays teal. */
.estado-vazio__ilustracao,
.magda-painel__mascote,
.magda-caixa__mascote,
.magda-apoio__mascote,
.resultado-celebracao__mascote,
.marcar-unidade__icone,
.treinador-cartao__avatar img {
  filter: invert(1) hue-rotate(180deg) brightness(1.05);
}

/* ------------------------------------------------------------------ */
/* Fil d'Ariane, liens discrets                                         */
/* ------------------------------------------------------------------ */

.fio-ariane {
  margin-bottom: var(--espaco-curto);
}

.link-discreto {
  text-decoration: none;
  color: var(--marca-texto-atenuado);
  gap: 2px;
}

.link-discreto:hover {
  color: var(--marca-texto);
}

/* ------------------------------------------------------------------ */
/* Barre Magda sous l'en-tête                                           */
/* ------------------------------------------------------------------ */

.magda-painel {
  border-bottom: 1px solid var(--marca-linha);
  background: var(--marca-fundo-pagina);
}

.magda-painel__gatilho {
  min-height: 44px;
  padding: 6px var(--espaco-medio);
  font-size: var(--tamanho-etiqueta);
  font-weight: 500;
  color: var(--marca-texto-secundario);
}

.magda-painel__mascote {
  width: 26px;
  height: 26px;
}

.magda-painel__corpo {
  padding: 0 var(--espaco-medio) var(--espaco-curto);
  color: var(--marca-texto-secundario);
  font-size: 15px;
}

.magda-painel__link {
  color: var(--marca-acento-texto);
  font-weight: 600;
}

/* ------------------------------------------------------------------ */
/* Nav du bas                                                           */
/* ------------------------------------------------------------------ */

.app-rodape-fixo {
  background: var(--marca-fundo-pagina);
  box-shadow: var(--sombra-flutuante);
}

.nav-principal {
  border-top: 1px solid var(--marca-linha);
  background: var(--marca-fundo-pagina);
  min-height: var(--altura-nav-inferior);
}

.nav-principal__item {
  gap: 4px;
  padding: 10px 2px 8px;
  font-size: 10.5px;
  letter-spacing: 0.01em;
  color: var(--marca-texto-atenuado);
  border-top: 0;
  margin-top: 0;
  position: relative;
}

.nav-principal__item::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  width: 0;
  height: 2px;
  transform: translateX(-50%);
  background: var(--marca-acento);
  border-radius: 0 0 2px 2px;
  transition: width var(--duracao-transicao) ease;
}

.nav-principal__item[aria-current="page"] {
  color: var(--marca-acento-texto);
  font-weight: 600;
  border-top-color: transparent;
}

.nav-principal__item[aria-current="page"]::before {
  width: 28px;
}

/* ------------------------------------------------------------------ */
/* Accueil                                                              */
/* ------------------------------------------------------------------ */

.inicio-cabecalho {
  padding: var(--espaco-micro) 0 var(--espaco-medio);
}

.inicio-cabecalho__data {
  font-family: var(--fonte-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--marca-texto-atenuado);
  margin-bottom: 2px;
}

.inicio-cabecalho__saudacao {
  margin-bottom: 0;
  font-size: 26px;
}

.destaque {
  border-color: var(--marca-acento-secundario);
  background: var(--marca-acento-claro);
}

.destaque__frase {
  font-family: var(--fonte-texto);
  font-weight: 500;
  margin-bottom: var(--espaco-curto);
}

/* The next session plate: a quiet surface, with no colored hairline
   on the side (removed on 09/09 at Baptiste's request). The imminent
   state reads only through the status line and the countdown
   bar, in amber. */
.plate {
  position: relative;
  padding: var(--espaco-medio);
  margin-bottom: var(--espaco-medio);
  border: 1px solid var(--marca-linha);
  border-radius: var(--raio-grande);
  background: var(--marca-superficie-cartao);
  overflow: hidden;
}

.plate-rotulo {
  font-family: var(--fonte-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--marca-texto-atenuado);
  margin-bottom: var(--espaco-micro);
}

.plate-state {
  font-family: var(--fonte-mono);
  font-size: 13px;
  color: var(--marca-disc-amarelo);
  margin-bottom: 6px;
}

.plate-state::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--marca-disc-amarelo);
}

.plate .numero-heroi {
  margin: 2px 0 0;
}

.plate .track {
  height: 3px;
  border-radius: 2px;
  margin: var(--espaco-curto) 0 var(--espaco-micro);
}

.plate .track__preenchimento {
  border-radius: 2px;
}

.plate-meta {
  font-family: var(--fonte-texto);
  font-weight: 500;
  font-size: 15px;
  color: var(--marca-texto);
  margin-top: var(--espaco-micro);
}

.plate-meta span {
  color: var(--marca-texto-atenuado);
  font-weight: 400;
}

.link-treinador {
  text-decoration: none;
  color: var(--marca-acento-texto);
}

.plate .acts {
  margin-top: var(--espaco-medio);
  flex-wrap: wrap;
}

.plate .acts .botao-primario {
  flex: 0 0 100%;
  width: 100%;
}

.plate .acts .botao-fantasma {
  flex: 1;
}

/* État vide */
.empty {
  padding: var(--espaco-medio) 0 var(--espaco-medio);
  border-bottom: 0;
}

.empty-h {
  font-size: 22px;
  letter-spacing: -0.015em;
  margin-bottom: var(--espaco-micro);
}

.empty-p {
  color: var(--marca-texto-secundario);
  font-size: 15px;
}

.empty .acts {
  justify-content: center;
}

.empty .acts .botao-primario {
  width: auto;
  flex: 1;
}

.estado-vazio__ilustracao {
  width: 72px;
  height: 72px;
  margin-bottom: var(--espaco-curto);
}

/* Grille de destinations : surfaces sombres, icône menthe, la première
   pleine largeur. */
.tuilas {
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: var(--espaco-micro);
}

.tuila {
  align-items: flex-start;
  justify-content: flex-end;
  aspect-ratio: auto;
  min-height: 96px;
  gap: 10px;
  padding: var(--espaco-curto);
  border: 1px solid var(--marca-linha);
  border-radius: var(--raio-medio);
  background: var(--marca-superficie-cartao);
  color: var(--marca-texto);
  text-align: left;
  transition: border-color var(--duracao-transicao) ease, transform var(--duracao-transicao) ease;
}

.tuila:active {
  transform: scale(0.985);
}

.tuila:first-child {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  min-height: 72px;
  gap: var(--espaco-curto);
  border-color: var(--marca-acento-secundario);
  background: var(--marca-acento-claro);
}

.tuila:first-child .tuila__icone {
  width: 28px;
  height: 28px;
}

.tuila:first-child .tuila__rotulo {
  font-size: 16px;
}

.tuila__sub {
  display: none;
}

.tuila:first-child .tuila__sub {
  display: block;
  margin-left: auto;
  font-family: var(--fonte-mono);
  font-size: 11px;
  color: var(--marca-acento-texto);
  text-align: right;
  max-width: 40%;
}

.tuila__icone {
  color: var(--marca-acento-texto);
}

.tuila__rotulo {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
}

/* Rangées */
.rows {
  margin-top: var(--espaco-medio);
  border-top: 1px solid var(--marca-linha);
}

.row {
  gap: var(--espaco-curto);
  padding: var(--espaco-curto) 0;
  border-bottom: 1px solid var(--marca-linha);
  min-height: 56px;
}

.row__icone {
  color: var(--marca-acento-texto);
}

.row__rotulo {
  flex: 1;
  font-weight: 500;
  font-size: 15px;
}

.row__seta {
  display: inline-flex;
  color: var(--marca-texto-atenuado);
}

.row__seta .icone {
  width: 18px;
  height: 18px;
}

/* Magda en pied d'accueil */
.magda-caixa {
  border-color: var(--marca-linha);
  border-radius: var(--raio-grande);
  background: var(--marca-superficie-cartao);
  margin-top: var(--espaco-medio);
}

.magda-caixa__topo {
  display: flex;
  align-items: flex-start;
  gap: var(--espaco-curto);
  margin-bottom: var(--espaco-curto);
}

.magda-caixa__mascote {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.magda-caixa__nome {
  display: block;
  font-weight: 600;
  margin-bottom: 2px;
}

.magda-caixa__descricao {
  color: var(--marca-texto-secundario);
  font-size: 14px;
  margin: 0;
}

.magda-caixa__acoes {
  display: flex;
  gap: var(--espaco-micro);
}

.magda-caixa__acoes .botao-fantasma {
  flex: 1;
}

.nota-seguranca-inicio {
  margin-top: var(--espaco-medio);
  font-size: 12.5px;
}

.rodape-sair {
  margin-top: var(--espaco-curto);
}

/* ------------------------------------------------------------------ */
/* Formulaires                                                          */
/* ------------------------------------------------------------------ */

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: var(--espaco-curto);
}

.field > span,
.treino-exec__campo > span {
  font-family: var(--fonte-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--marca-texto-atenuado);
}

.field input,
.field textarea,
.field select,
.treino-exec__campo input,
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
textarea,
select {
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  border: 1px solid var(--marca-linha-alta);
  border-radius: var(--raio-medio);
  background: var(--marca-superficie-cartao-2);
  color: var(--marca-texto);
  font-family: var(--fonte-texto);
  font-size: 16px;
  outline: none;
  transition: border-color var(--duracao-transicao) ease;
}

textarea {
  min-height: 96px;
  resize: vertical;
}

input::placeholder,
textarea::placeholder {
  color: var(--marca-texto-atenuado);
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--marca-acento);
}

input[inputmode="numeric"],
input[inputmode="decimal"] {
  font-family: var(--fonte-mono);
  font-variant-numeric: tabular-nums;
}

.cartao--branco {
  background: var(--marca-superficie-cartao);
}

.cartao--sucesso {
  border-color: var(--marca-sucesso);
}

.cartao--recusa {
  border-color: var(--marca-recusa);
}

/* The card title text reused by several screens. */
.treino-exec__nome {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
}

/* ------------------------------------------------------------------ */
/* Entrar                                                               */
/* ------------------------------------------------------------------ */

.entrar-capa {
  padding: var(--espaco-amplo) 0 var(--espaco-largo);
}

.entrar-capa__marca {
  font-family: var(--fonte-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--marca-acento-texto);
  margin-bottom: var(--espaco-curto);
}

.entrar-capa h1 {
  font-size: 34px;
  font-variation-settings: "wdth" 105;
  margin-bottom: var(--espaco-micro);
}

.entrar-capa p {
  color: var(--marca-texto-secundario);
  max-width: 32ch;
}

.entrar-ajuda {
  color: var(--marca-texto-atenuado);
  font-size: 14px;
  margin-top: var(--espaco-medio);
}

/* W2 (18/09) : the single sentence of the email link entry (sent, invalid
   link, session ended). Existing verified pairs only: body text, or the
   refusal text, on the page background. */
.entrar-mensagem {
  color: var(--marca-texto);
  max-width: 36ch;
  margin-bottom: var(--espaco-medio);
}

.entrar-mensagem--alerta {
  color: var(--marca-recusa-texto);
}

/* ------------------------------------------------------------------ */
/* Marcar : jours et créneaux                                           */
/* ------------------------------------------------------------------ */

.dia-opcao {
  min-width: 52px;
  border-radius: var(--raio-medio);
  border-color: var(--marca-linha);
  background: var(--marca-superficie-cartao);
}

.dia-opcao__letra {
  font-family: var(--fonte-mono);
  font-size: 11px;
  letter-spacing: 0.03em;
}

.dia-opcao__numero {
  font-family: var(--fonte-display);
  font-size: 18px;
  font-weight: 640;
}

.dia-opcao--selecionada {
  background: var(--marca-acento);
  border-color: var(--marca-acento);
  color: var(--marca-texto-invertido);
}

.dia-opcao--selecionada .dia-opcao__letra,
.dia-opcao--selecionada .dia-opcao__numero {
  color: var(--marca-texto-invertido);
}

.dia-opcao--hoje:not(.dia-opcao--selecionada) {
  border-color: var(--marca-acento-secundario);
}

.creneau {
  border-radius: var(--raio-medio);
  border-color: var(--marca-linha);
  border-left-width: 1px;
  border-left-color: var(--marca-linha);
  background: var(--marca-superficie-cartao);
}

.creneau__hora {
  font-family: var(--fonte-display);
  font-weight: 640;
  font-size: 20px;
  letter-spacing: -0.02em;
  width: 60px;
}

.creneau--marcada {
  border-color: var(--marca-acento-secundario);
  background: var(--marca-acento-claro);
}

.creneau--esgotado,
.creneau--passou {
  opacity: 0.6;
}

/* ------------------------------------------------------------------ */
/* Cartão de membro                                                     */
/* ------------------------------------------------------------------ */

.cartao-tela {
  gap: var(--espaco-medio);
}

.qr-bloco {
  padding: var(--espaco-medio);
  background: var(--marca-branco);
  border-radius: var(--raio-grande);
  width: min(100%, 300px);
  margin: 0 auto;
}

.qr-bloco svg {
  width: 100%;
  height: auto;
}

.cartao-id {
  text-align: center;
}

.cartao-id__nome {
  font-size: 22px;
  margin-bottom: 4px;
}

/* ------------------------------------------------------------------ */
/* Treino : plano                                                       */
/* ------------------------------------------------------------------ */

.treino-topo {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--espaco-curto);
  margin-bottom: var(--espaco-medio);
}

.treino-topo h1 {
  margin-bottom: 0;
}

.treino-topo__meta {
  font-family: var(--fonte-mono);
  font-size: 12px;
  color: var(--marca-texto-atenuado);
  text-align: right;
  flex-shrink: 0;
}

.treino-em-curso {
  display: flex;
  align-items: center;
  gap: var(--espaco-curto);
  padding: var(--espaco-curto) var(--espaco-medio);
  margin-bottom: var(--espaco-curto);
  border: 1px solid var(--marca-acento-secundario);
  border-radius: var(--raio-medio);
  background: var(--marca-acento-claro);
}

.treino-em-curso__texto {
  flex: 1;
  font-weight: 500;
}

.treino-em-curso__texto small {
  display: block;
  font-family: var(--fonte-mono);
  font-size: 12px;
  color: var(--marca-acento-texto);
}

.treino-em-curso .botao {
  width: auto;
  min-height: 44px;
  padding: 0 var(--espaco-curto);
}

.treino-sessao {
  padding: 0;
  overflow: hidden;
}

.treino-sessao__cabecalho {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--espaco-curto);
  padding: var(--espaco-medio) var(--espaco-medio) var(--espaco-curto);
}

.treino-sessao__titulo {
  font-family: var(--fonte-display);
  font-variation-settings: "wdth" 108;
  font-size: 24px;
  margin: 0;
}

.treino-sessao__titulo small {
  font-family: var(--fonte-mono);
  font-variation-settings: normal;
  font-size: 12px;
  font-weight: 500;
  color: var(--marca-texto-atenuado);
  margin-left: 6px;
}

.treino-sessao__meta {
  font-family: var(--fonte-mono);
  font-size: 12px;
  color: var(--marca-texto-atenuado);
  margin: 0;
}

.treino-lista {
  border-top: 1px solid var(--marca-linha);
}

.treino-exercicio {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 4px var(--espaco-curto);
  padding: var(--espaco-curto) var(--espaco-medio);
  border-bottom: 1px solid var(--marca-linha);
}

.treino-exercicio__ordem {
  font-family: var(--fonte-mono);
  font-size: 12px;
  color: var(--marca-texto-atenuado);
  padding-top: 3px;
}

.treino-exercicio__nome {
  font-weight: 600;
  font-size: 15px;
  margin: 0;
}

.treino-exercicio__series {
  grid-column: 2;
  font-family: var(--fonte-mono);
  font-size: 12px;
  color: var(--marca-texto-atenuado);
  margin: 0;
}

.treino-exercicio__dica {
  grid-column: 2;
  font-size: 13px;
  color: var(--marca-texto-secundario);
  margin: 2px 0 0;
}

.treino-exercicio__carga {
  grid-row: 1 / span 3;
  grid-column: 3;
  font-family: var(--fonte-mono);
  font-size: 13px;
  color: var(--marca-acento-texto);
  white-space: nowrap;
  align-self: start;
  padding-top: 2px;
}

.treino-sessao__pe {
  padding: var(--espaco-curto) var(--espaco-medio) var(--espaco-medio);
}

.treino-nota {
  margin-top: var(--espaco-curto);
  font-size: 13px;
}

.treino-objetivos {
  padding: var(--espaco-curto) var(--espaco-medio);
}

.treino-objetivos summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  font-weight: 600;
}

.treino-objetivos summary::-webkit-details-marker {
  display: none;
}

.treino-objetivos__grelha {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: var(--espaco-curto);
}

.treino-objetivos__grelha .field {
  margin-bottom: 0;
}

.treino-objetivos__grelha .field--largo {
  grid-column: 1 / -1;
}

.treino-objetivos__pe {
  display: flex;
  gap: var(--espaco-micro);
  margin-top: var(--espaco-curto);
}

.treino-objetivos__pe .botao {
  flex: 1;
  width: auto;
}

/* ------------------------------------------------------------------ */
/* Treino : séance en cours                                             */
/* ------------------------------------------------------------------ */

.sessao-topo {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--espaco-curto);
  margin-bottom: var(--espaco-curto);
}

.sessao-topo h1 {
  margin-bottom: 0;
}

.sessao-topo__contagem {
  font-family: var(--fonte-mono);
  font-size: 12px;
  color: var(--marca-texto-atenuado);
  text-align: right;
}

.sessao-topo__contagem strong {
  display: block;
  font-size: 20px;
  font-weight: 500;
  color: var(--marca-texto);
}

.sessao-progresso {
  height: 4px;
  border-radius: 2px;
  background: var(--marca-linha);
  overflow: hidden;
  margin-bottom: var(--espaco-medio);
}

.sessao-progresso__valor {
  display: block;
  height: 100%;
  width: var(--progresso, 0%);
  background: var(--marca-acento);
  border-radius: 2px;
  transition: width var(--duracao-transicao) ease;
}

.aviso-deload {
  display: flex;
  align-items: center;
  gap: var(--espaco-micro);
  padding: 10px var(--espaco-curto);
  margin-bottom: var(--espaco-curto);
  border-radius: var(--raio-medio);
  border: 1px solid var(--marca-disc-amarelo);
  color: var(--marca-disc-amarelo);
  font-size: 14px;
}

.treino-exec {
  background: var(--marca-superficie-cartao);
  padding: var(--espaco-medio);
}

.treino-exec--completo {
  border-color: var(--marca-sucesso);
}

.treino-exec__cabecalho {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--espaco-curto);
}

.treino-exec__conta {
  font-family: var(--fonte-mono);
  font-size: 12px;
  color: var(--marca-texto-atenuado);
  white-space: nowrap;
  padding-top: 3px;
}

.treino-exec__conta--completo {
  color: var(--marca-sucesso-texto);
}

/* The set dots: one per planned set, filled once done. */
.treino-exec__pontos {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}

.treino-exec__ponto {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid var(--marca-linha-alta);
}

.treino-exec__ponto--feito {
  background: var(--marca-acento);
  border-color: var(--marca-acento);
}

.treino-exec__ponto--extra {
  background: var(--marca-sucesso);
  border-color: var(--marca-sucesso);
}

.treino-exec__carga {
  font-family: var(--fonte-display);
  font-variation-settings: "wdth" 110;
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin: 12px 0 0;
}

.treino-exec__carga small {
  font-family: var(--fonte-mono);
  font-variation-settings: normal;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--marca-texto-atenuado);
  margin-left: 4px;
}

.treino-exec__carga--indefinida {
  font-size: 20px;
  font-variation-settings: "wdth" 100;
  letter-spacing: -0.01em;
  color: var(--marca-texto-secundario);
}

.treino-exec__alvo {
  font-family: var(--fonte-mono);
  font-size: 12.5px;
  color: var(--marca-texto-atenuado);
  margin-top: 2px;
}

.treino-exec .treino-exercicio__series {
  grid-column: auto;
  margin-top: 8px;
}

.treino-exec .treino-exercicio__dica {
  grid-column: auto;
  margin-top: 6px;
  padding-left: 10px;
  border-left: 2px solid var(--marca-acento-secundario);
}

/* The set form: two steppers, then the button. The +/- buttons
   only exist with JavaScript (app.js reveals them); without it, the field
   stays editable from the keyboard. */
.treino-exec__form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: var(--espaco-curto);
}

.treino-exec__form .botao-primario {
  grid-column: 1 / -1;
}

.stepper {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.stepper > span {
  font-family: var(--fonte-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--marca-texto-atenuado);
}

.stepper__caixa {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--marca-linha-alta);
  border-radius: var(--raio-medio);
  background: var(--marca-superficie-cartao-2);
  overflow: hidden;
}

.stepper__caixa:focus-within {
  border-color: var(--marca-acento);
}

.stepper__botao {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-height: 52px;
  border: 0;
  background: transparent;
  color: var(--marca-acento-texto);
  cursor: pointer;
  flex-shrink: 0;
}

.stepper__botao:active {
  background: var(--marca-acento-claro);
}

.stepper__botao .icone {
  width: 18px;
  height: 18px;
}

.stepper--js .stepper__botao {
  display: inline-flex;
}

.stepper__caixa input {
  flex: 1;
  min-width: 0;
  min-height: 52px;
  border: 0;
  border-radius: 0;
  background: transparent;
  text-align: center;
  font-family: var(--fonte-mono);
  font-size: 20px;
  font-weight: 500;
  padding: 0 4px;
}

.stepper__caixa input:focus {
  border-color: transparent;
}

.treino-exec__feitas {
  margin-top: var(--espaco-curto);
  border-top: 1px solid var(--marca-linha);
}

.treino-exec__feitas li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 40px;
  padding: 6px 0;
  border-bottom: 1px solid var(--marca-linha);
  font-family: var(--fonte-mono);
  font-size: 13px;
}

.treino-exec__feitas li span:first-child {
  color: var(--marca-texto-atenuado);
}

.treino-exec__desfazer {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0;
  margin-top: 4px;
  border: 0;
  background: none;
  color: var(--marca-texto-atenuado);
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
}

.sessao-terminar {
  margin-top: var(--espaco-medio);
}

/* Descanso timer: floats in the fixed rodapé, above the nav,
   only between two sets (app.js). */
.descanso {
  display: none;
  align-items: center;
  gap: var(--espaco-curto);
  padding: 10px var(--espaco-medio);
  border-top: 1px solid var(--marca-linha);
  background: var(--marca-superficie-cartao);
}

.descanso--ativo {
  display: flex;
}

.descanso__icone {
  color: var(--marca-acento-texto);
}

.descanso__texto {
  flex: 1;
  min-width: 0;
}

.descanso__rotulo {
  display: block;
  font-family: var(--fonte-mono);
  font-size: 11px;
  letter-spacing: 0.03em;
  color: var(--marca-texto-atenuado);
}

.descanso__tempo {
  display: block;
  font-family: var(--fonte-display);
  font-variation-settings: "wdth" 110;
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.descanso--pronto .descanso__tempo {
  color: var(--marca-sucesso-texto);
}

.descanso__barra {
  position: absolute;
  left: 0;
  top: 0;
  height: 2px;
  width: var(--progresso, 100%);
  background: var(--marca-acento);
  transition: width 1s linear;
}

.descanso {
  position: relative;
}

.descanso__acoes {
  display: flex;
  gap: 6px;
}

.descanso__acoes .botao-fantasma {
  min-height: 40px;
  padding: 0 12px;
  font-size: 13px;
}

/* ------------------------------------------------------------------ */
/* Nutrição                                                             */
/* ------------------------------------------------------------------ */

.nut-topo {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-medio);
  padding: var(--espaco-medio);
  margin-bottom: var(--espaco-medio);
  border: 1px solid var(--marca-linha);
  border-radius: var(--raio-grande);
  background: var(--marca-superficie-cartao);
}

.nut-anel-bloco {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.nut-anel {
  width: 168px;
  height: 168px;
}

.nut-anel__fundo {
  fill: none;
  stroke: var(--marca-linha);
  stroke-width: 9;
}

.nut-anel__valor {
  fill: none;
  stroke: var(--marca-acento);
  stroke-width: 9;
  stroke-linecap: round;
}

.nut-anel__texto {
  position: absolute;
  top: 84px;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.nut-anel__numero {
  font-family: var(--fonte-display);
  font-variation-settings: "wdth" 110;
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--marca-texto);
}

.nut-anel__unidade {
  font-family: var(--fonte-mono);
  font-size: 12px;
  color: var(--marca-texto-atenuado);
  margin-top: 4px;
}

.nut-anel__meta {
  font-family: var(--fonte-mono);
  font-size: 12px;
  color: var(--marca-texto-atenuado);
  margin-top: 4px;
}

.nut-anel__meta a {
  color: var(--marca-acento-texto);
  text-decoration: underline;
}

.nut-barra {
  display: flex;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--marca-linha);
}

.nut-barra__parte--hidratos {
  background: var(--marca-acento);
}

.nut-barra__parte--proteina {
  background: var(--marca-disc-amarelo);
}

.nut-barra__parte--gordura {
  background: var(--marca-texto-secundario);
}

.nut-legenda {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--espaco-micro);
  margin-top: 12px;
}

.nut-legenda__nome {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--marca-texto-atenuado);
}

.nut-legenda__ponto {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.nut-legenda__valor {
  font-family: var(--fonte-mono);
  font-size: 15px;
  font-weight: 500;
  margin-top: 2px;
}

.nut-titulo {
  font-size: 15px;
  color: var(--marca-texto-atenuado);
  font-weight: 500;
  margin-bottom: var(--espaco-micro);
}

.nut-refeicao {
  padding: 0;
  overflow: hidden;
}

.nut-refeicao__cabecalho {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: var(--espaco-curto) var(--espaco-medio) 8px;
}

.nut-refeicao__nome {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}

.nut-refeicao__kcal {
  font-family: var(--fonte-mono);
  font-size: 13px;
  color: var(--marca-texto-atenuado);
}

.nut-itens {
  border-top: 1px solid var(--marca-linha);
}

.nut-item {
  display: flex;
  align-items: center;
  gap: var(--espaco-micro);
  padding: 8px var(--espaco-medio) 8px;
  border-bottom: 1px solid var(--marca-linha);
}

.nut-item__texto {
  flex: 1;
  min-width: 0;
}

.nut-item__nome {
  font-size: 15px;
  font-weight: 500;
}

.nut-item__detalhe {
  font-family: var(--fonte-mono);
  font-size: 12px;
  color: var(--marca-texto-atenuado);
}

.nut-item__origem {
  font-size: 12px;
  color: var(--marca-disc-amarelo);
}

.nut-item__apagar {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: var(--raio-pequeno);
  background: transparent;
  color: var(--marca-texto-atenuado);
  font-size: 20px;
  cursor: pointer;
}

.nut-refeicao__vazio {
  padding: 0 var(--espaco-medio) 8px;
  font-size: 14px;
  color: var(--marca-texto-atenuado);
}

.nut-juntar {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 var(--espaco-medio);
  border-top: 1px solid var(--marca-linha);
  color: var(--marca-acento-texto);
  font-weight: 600;
  font-size: 14px;
}

.nut-juntar .icone {
  width: 18px;
  height: 18px;
}

.nut-ligacoes {
  padding: 0;
  overflow: hidden;
}

.nut-ligacao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  padding: 0 var(--espaco-medio);
  border-bottom: 1px solid var(--marca-linha);
  font-weight: 500;
}

.nut-ligacao:last-child {
  border-bottom: 0;
}

.nut-ligacao .icone {
  width: 18px;
  height: 18px;
  color: var(--marca-texto-atenuado);
}

/* Juntar: three paths, the scan first and large. */
.nut-scan-bloco {
  padding: 0;
  overflow: hidden;
}

.nut-scan-cabecalho {
  display: flex;
  align-items: center;
  gap: var(--espaco-micro);
  padding: var(--espaco-curto) var(--espaco-medio) 6px;
}

.nut-scan-cabecalho .icone {
  color: var(--marca-acento-texto);
}

.nut-scan-cabecalho h2 {
  margin: 0;
  font-size: 16px;
}

.nut-scan-visor {
  position: relative;
  aspect-ratio: 4 / 3;
  background: #000;
  display: none;
}

.nut-scan-visor--ativo {
  display: block;
}

.nut-scan {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.nut-scan-visor::after {
  content: "";
  position: absolute;
  inset: 22% 12%;
  border: 2px solid var(--marca-acento);
  border-radius: 10px;
  box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.35);
}

.nut-scan-corpo {
  padding: 6px var(--espaco-medio) var(--espaco-medio);
}

.nut-scan-corpo .rotulo {
  margin: 4px 0 12px;
}

.nut-scan-estado {
  font-family: var(--fonte-mono);
  font-size: 12.5px;
  color: var(--marca-acento-texto);
  margin: 10px 0 0;
}

.nut-scan-manual {
  display: flex;
  gap: 8px;
  margin-top: var(--espaco-curto);
}

.nut-scan-manual .field {
  flex: 1;
  margin-bottom: 0;
}

.nut-scan-manual .botao-fantasma {
  align-self: flex-end;
  min-height: 50px;
}

.nut-resultados {
  margin-top: var(--espaco-curto);
  border-top: 1px solid var(--marca-linha);
}

.nut-resultado {
  display: flex;
  align-items: center;
  gap: var(--espaco-curto);
  width: 100%;
  min-height: 56px;
  padding: 8px 0;
  border: 0;
  border-bottom: 1px solid var(--marca-linha);
  background: none;
  text-align: left;
  cursor: pointer;
}

.nut-resultado__texto {
  flex: 1;
  min-width: 0;
}

.nut-resultado__nome {
  font-size: 15px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nut-resultado__marca {
  font-family: var(--fonte-mono);
  font-size: 12px;
  color: var(--marca-texto-atenuado);
}

.nut-resultado__kcal {
  font-family: var(--fonte-mono);
  font-size: 13px;
  color: var(--marca-acento-texto);
  white-space: nowrap;
}

.nut-proposta__fonte {
  font-family: var(--fonte-mono);
  font-size: 12px;
  color: var(--marca-texto-atenuado);
  margin: 4px 0 var(--espaco-curto);
}

.nut-proposta__fonte a {
  color: var(--marca-acento-texto);
  text-decoration: underline;
}

.nut-macros-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: var(--espaco-curto);
}

.nut-macros-form .treino-exec__campo input {
  font-family: var(--fonte-mono);
}

.nut-porcao {
  display: flex;
  gap: 6px;
  margin: 4px 0 var(--espaco-curto);
}

.nut-porcao__botao {
  flex: 1;
  min-height: 40px;
  border: 1px solid var(--marca-linha-alta);
  border-radius: var(--raio-pequeno);
  background: transparent;
  color: var(--marca-texto-secundario);
  font-family: var(--fonte-mono);
  font-size: 13px;
  cursor: pointer;
}

.nut-porcao__botao:active,
.nut-porcao__botao[aria-pressed="true"] {
  border-color: var(--marca-acento);
  color: var(--marca-acento-texto);
}

/* Écran Nutrição d'entrée */
.nutricao-linha {
  border-color: var(--marca-linha);
  background: var(--marca-superficie-cartao);
  border-radius: var(--raio-medio);
}

/* ------------------------------------------------------------------ */
/* Écrans de résultat, reçus                                            */
/* ------------------------------------------------------------------ */

.receipt {
  border-radius: var(--raio-grande);
}

.resultado-celebracao__carimbo {
  color: var(--marca-acento-texto);
}

/* ------------------------------------------------------------------ */
/* Magda, conversation                                                  */
/* ------------------------------------------------------------------ */

.magda-conversa__sugestao {
  border-radius: var(--raio-medio);
  border: 1px solid var(--marca-linha-alta);
  background: var(--marca-superficie-cartao);
}

.magda-conversa__msg {
  border-radius: var(--raio-medio);
  background: var(--marca-superficie-cartao);
}

.magda-conversa__msg--membro {
  background: var(--marca-acento-claro);
}

/* ------------------------------------------------------------------ */
/* Desktop: the column stays a phone set down on the black.            */
/* ------------------------------------------------------------------ */

@media (min-width: 600px) {
  .app-coquilha {
    border-left-color: var(--marca-linha);
    border-right-color: var(--marca-linha);
  }

  .app-rodape-fixo {
    border-left: 1px solid var(--marca-linha);
    border-right: 1px solid var(--marca-linha);
  }
}

/* Juntar : saisie à la main, repliée. */
.nut-manual__gatilho {
  display: flex;
  align-items: center;
  gap: var(--espaco-micro);
  min-height: 44px;
  list-style: none;
  cursor: pointer;
  font-weight: 600;
}

.nut-manual__gatilho::-webkit-details-marker {
  display: none;
}

.nut-manual__gatilho .icone {
  color: var(--marca-acento-texto);
}

.nut-manual__gatilho span:nth-child(2) {
  flex: 1;
}

/* Priorités musculaires : cases à cocher en pastilles carrées. */
.treino-prioridades {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.treino-prioridade {
  position: relative;
}

.treino-prioridade input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.treino-prioridade span {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--marca-linha-alta);
  border-radius: var(--raio-pequeno);
  font-size: 14px;
  color: var(--marca-texto-secundario);
  cursor: pointer;
}

.treino-prioridade input:checked + span {
  border-color: var(--marca-acento);
  color: var(--marca-acento-texto);
  background: var(--marca-acento-claro);
}

.treino-prioridade input:focus-visible + span {
  outline: var(--foco-largura) solid var(--marca-acento);
  outline-offset: var(--foco-deslocamento);
}

.descanso__acoes .icone {
  width: 16px;
  height: 16px;
}

/* telas.css stretches every <button> in the set form to full width
   (rule .treino-exec__form button): the stepper buttons escape it,
   with the same specificity and a later declaration. */
.treino-exec__form .stepper__botao {
  grid-column: auto;
  width: 44px;
  margin-top: 0;
}

.treino-exec__form .stepper {
  grid-column: auto;
}

.fio-ariane .link-discreto::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-right: 8px;
  border-left: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}

/* Nutrição, écran d'entrée : conseils en une liste compacte. */
.nut-titulo {
  text-transform: none;
  letter-spacing: 0;
}

.nutricao-aviso {
  margin-bottom: var(--espaco-medio);
}

.nutricao-lista .cartao {
  padding: var(--espaco-curto) var(--espaco-medio);
  margin-bottom: 8px;
  font-size: 15px;
  color: var(--marca-texto-secundario);
  border-left: 3px solid var(--marca-acento-secundario);
}

/* Financas (W3, directive 18/09/2026) : rows, never KPI tiles. Existing
   tokens only, no literal colour, only the palette: text on the page background,
   refusal red for a debt, success green (the « moss » of the directive)
   when nothing is owed, imminence amber (its « ochre ») for stale data.
   Figures in Azeret Mono through .dado, text in Archivo. */
.financas-secao {
  margin-top: var(--espaco-largo);
}

.financas-titulo {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: var(--espaco-micro);
  /* W4: the period links jump to the #financas-extrato heading; without
     this it landed flush against the top edge, clipped (390 and 430). */
  scroll-margin-top: var(--espaco-medio);
}

.financas-aviso,
.aviso-guardado {
  color: var(--marca-disc-amarelo);
  border-left: 3px solid var(--marca-disc-amarelo);
  padding-left: var(--espaco-micro);
  margin-top: var(--espaco-curto);
}

.financas-linha {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--espaco-medio);
  padding: var(--espaco-curto) 0;
  border-bottom: 1px solid var(--marca-linha);
}

.financas-linha__rotulo {
  color: var(--marca-texto-secundario);
}

.financas-linha__valor {
  color: var(--marca-texto);
  font-size: 20px;
}

.financas-linha--divida .financas-linha__valor {
  color: var(--marca-recusa-texto);
}

.financas-linha--em-dia .financas-linha__valor {
  color: var(--marca-sucesso-texto);
}

.financas-frescura {
  color: var(--marca-texto-atenuado);
  font-size: 13px;
  margin-top: var(--espaco-micro);
}

.financas-frescura--velha {
  color: var(--marca-disc-amarelo);
}

.financas-periodos {
  display: flex;
  gap: var(--espaco-micro);
  flex-wrap: wrap;
  margin-bottom: var(--espaco-micro);
}

.financas-periodo {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 var(--espaco-curto);
  border: 1px solid var(--marca-linha-alta);
  border-radius: var(--raio-pequeno);
  color: var(--marca-texto-secundario);
  text-decoration: none;
}

.financas-periodo[aria-current="page"] {
  border-color: var(--marca-acento);
  color: var(--marca-texto);
}

.financas-intervalo {
  color: var(--marca-texto-atenuado);
  font-size: 13px;
}

.financas-movimentos,
.financas-dividas,
.financas-inscricoes {
  list-style: none;
  margin: 0;
  padding: 0;
}

.financas-movimento {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--espaco-micro);
  align-items: baseline;
  padding: var(--espaco-micro) 0;
  border-bottom: 1px solid var(--marca-linha);
}

.financas-movimento__data {
  color: var(--marca-texto-atenuado);
  font-size: 13px;
}

.financas-movimento__descricao {
  min-width: 0;
  overflow-wrap: anywhere;
}

.financas-movimento__valor {
  color: var(--marca-texto);
  text-align: right;
}

.financas-nivel {
  margin-top: var(--espaco-curto);
}

.financas-nivel__rotulo {
  font-size: 15px;
  font-weight: 600;
  color: var(--marca-texto-secundario);
  margin-bottom: var(--espaco-nano);
}

.financas-divida {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--espaco-nano) var(--espaco-medio);
  align-items: baseline;
  padding: var(--espaco-micro) 0;
  border-bottom: 1px solid var(--marca-linha);
}

.financas-divida__descricao {
  min-width: 0;
  overflow-wrap: anywhere;
}

.financas-divida__valor {
  text-align: right;
  color: var(--marca-recusa-texto);
}

.financas-divida__meta {
  grid-column: 1 / -1;
  color: var(--marca-texto-atenuado);
  font-size: 13px;
}

/* W4 (18/09, evening): the nested .dado span took the data size and the
   period outgrew the description; it keeps the mono face, not the size. */
.financas-divida__meta .dado {
  font-size: inherit;
  line-height: inherit;
}

/* The penalty line (multa): its own line, named, never merged with the fee. */
.financas-divida__penalidade {
  color: var(--marca-recusa-texto);
  font-weight: 600;
}

.financas-nota {
  color: var(--marca-texto-atenuado);
  font-size: 13px;
  margin-bottom: var(--espaco-nano);
}

.financas-inscricao {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--espaco-nano) var(--espaco-medio);
  padding: var(--espaco-micro) 0;
  border-bottom: 1px solid var(--marca-linha);
}

.financas-inscricao__estado {
  color: var(--marca-texto-secundario);
  text-align: right;
}

.financas-inscricao__datas {
  grid-column: 1 / -1;
  color: var(--marca-texto-atenuado);
  font-size: 13px;
}

.financas-vazio,
.financas-indisponivel {
  color: var(--marca-texto-secundario);
  padding: var(--espaco-micro) 0;
}

/* ============================================================
   W8 (21/09/2026), HOME_PROXIMA_SESSAO_ENABLED: home led by the next
   session, then today, what is due, the menu (templates inicio_proxima*).
   Existing tokens only; no card for the sections, hierarchy by size and
   space.
   ============================================================ */
.inicio-secao {
  margin-top: var(--espaco-largo);
}

.inicio-secao .rows {
  margin-top: var(--espaco-micro);
}

.inicio-secao__detalhe {
  display: block;
  color: var(--marca-texto-secundario);
  font-size: 14px;
}

.inicio-indice {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--espaco-curto);
  margin-top: var(--espaco-micro);
  border-top: 1px solid var(--marca-linha);
}

.inicio-indice__item {
  display: flex;
  align-items: center;
  gap: var(--espaco-micro);
  min-height: 52px;
  border-bottom: 1px solid var(--marca-linha);
  color: var(--marca-texto);
  text-decoration: none;
  font-size: 15px;
  line-height: 1.25;
}

.inicio-indice__icone {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--marca-acento-texto);
}