/* =========================================================================
   PimentaPT — folha de estilo única.
   Pensada primeiro para o telemóvel, com uma mão, dentro do ginásio:
   alvos grandes, contraste alto e nada que exija precisão.
   ========================================================================= */

:root {
  --fundo:        #0e1014;
  --fundo-2:      #151922;
  --superficie:   #1a1f29;
  --superficie-2: #212734;
  --borda:        #2b3240;
  --borda-forte:  #3a4354;
  --texto:        #eef1f6;
  --texto-2:      #9aa5b8;
  --texto-3:      #6b7689;
  --chama:        #ff4a1c;
  --chama-2:      #ff6b43;
  --chama-fundo:  rgba(255, 74, 28, .14);
  --ok:           #2fd16d;
  --ok-fundo:     rgba(47, 209, 109, .14);
  --aviso:        #ffb020;
  --erro:         #ff5c5c;
  --erro-fundo:   rgba(255, 92, 92, .14);
  --r:            14px;
  --r-p:          10px;
  --sombra:       0 6px 24px rgba(0, 0, 0, .35);
  --topo-h:       56px;
  --seg:          env(safe-area-inset-bottom, 0px);
  --fonte: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--fonte);
  font-size: 16px;
  line-height: 1.5;
  color: var(--texto);
  background: var(--fundo);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

h1, h2, h3 { line-height: 1.2; margin: 0 0 .5rem; font-weight: 700; letter-spacing: -.015em; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
p  { margin: 0 0 .75rem; }
a  { color: var(--chama-2); text-decoration: none; }
a:hover { text-decoration: underline; }
small { font-size: .8125rem; }

/* ----------------------------------------------------------------- topo --- */

.topo {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 1rem;
  height: var(--topo-h); padding: 0 1rem;
  background: rgba(14, 16, 20, .92);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--borda);
  padding-top: env(safe-area-inset-top, 0px);
  height: calc(var(--topo-h) + env(safe-area-inset-top, 0px));
}

.marca { display: flex; align-items: center; gap: .5rem; color: var(--texto); font-weight: 800; }
.marca:hover { text-decoration: none; }
.marca-nome { letter-spacing: -.02em; }
.marca-nome b { color: var(--chama); }
.marca-chama {
  width: 10px; height: 10px; border-radius: 3px 10px 3px 10px;
  background: linear-gradient(135deg, var(--chama), #ffa03c);
}

.nav-desktop { display: none; gap: .25rem; margin-left: auto; }
.nav-desktop a {
  padding: .4rem .7rem; border-radius: var(--r-p);
  color: var(--texto-2); font-size: .9375rem; font-weight: 600;
}
.nav-desktop a:hover { color: var(--texto); background: var(--superficie); text-decoration: none; }
.nav-desktop a.ativo { color: var(--chama-2); background: var(--chama-fundo); }

.topo-fim { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
/* O botão de sair vive dentro de um <form> (é POST). Sem isto o form virava um
   item de flex com margens próprias e empurrava o ⏻ para fora do alinhamento. */
.topo-fim .sair { display: flex; margin: 0; }
.nav-desktop + .topo-fim { margin-left: 0; }

.avatar {
  display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--chama-fundo); color: var(--chama-2);
  font-size: .75rem; font-weight: 800; letter-spacing: .02em;
}

.btn-icone {
  display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: var(--r-p);
  border: 1px solid var(--borda); background: var(--superficie);
  color: var(--texto-2); font-size: 1rem; cursor: pointer;
}
.btn-icone:hover { color: var(--texto); border-color: var(--borda-forte); text-decoration: none; }

/* ---------------------------------------------------------------- corpo --- */

.main {
  max-width: 720px; margin: 0 auto;
  padding: 1rem 1rem calc(5.5rem + var(--seg));
}
.main-magro {
  max-width: 400px; margin: 0 auto;
  padding: 3rem 1.25rem calc(2rem + var(--seg));
  min-height: 100dvh; display: flex; flex-direction: column; justify-content: center;
}

/* ------------------------------------------------------- navegação móvel --- */

.nav-movel {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex;
  background: rgba(14, 16, 20, .95);
  backdrop-filter: saturate(160%) blur(12px);
  border-top: 1px solid var(--borda);
  padding-bottom: var(--seg);
}
.nav-movel a {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: .5rem 0 .45rem; color: var(--texto-3);
  font-size: .6875rem; font-weight: 600;
}
.nav-movel a:hover { text-decoration: none; }
.nav-movel a.ativo { color: var(--chama-2); }
.nav-movel .ni { font-size: 1.05rem; line-height: 1; }

/* --------------------------------------------------------------- cartões --- */

.cartao {
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--r); padding: 1rem; margin-bottom: .875rem;
}
.cartao-tit { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .75rem; }
.cartao-tit h2, .cartao-tit h3 { margin: 0; }

.seccao-tit {
  display: flex; align-items: baseline; justify-content: space-between; gap: .75rem;
  margin: 1.5rem 0 .625rem;
}
.seccao-tit h2 { margin: 0; font-size: .8125rem; text-transform: uppercase; letter-spacing: .08em; color: var(--texto-3); }

/* ------------------------------------------------------------------ hero --- */

.hero {
  position: relative; overflow: hidden;
  background: linear-gradient(150deg, #241a1a 0%, var(--superficie) 55%);
  border: 1px solid var(--borda-forte); border-radius: var(--r);
  padding: 1.25rem; margin-bottom: 1rem;
}
.hero::after {
  content: ''; position: absolute; inset: auto -60px -80px auto;
  width: 200px; height: 200px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 74, 28, .18), transparent 70%);
}
.hero-dia { font-size: .8125rem; color: var(--texto-2); }
.hero-nome { display: flex; align-items: center; gap: .625rem; margin: .375rem 0 .25rem; }
.hero-nome h1 { margin: 0; font-size: 1.625rem; }
.hero-sub { color: var(--texto-2); font-size: .875rem; margin: 0; }
.hero-acoes { display: flex; gap: .5rem; margin-top: 1rem; position: relative; z-index: 1; }

/* -------------------------------------------------------------- pastilhas --- */

.pastilha {
  display: inline-grid; place-items: center; min-width: 30px; height: 30px;
  padding: 0 .5rem; border-radius: 9px;
  font-size: .8125rem; font-weight: 800; letter-spacing: .02em;
  background: var(--superficie-2); color: var(--texto-2);
  border: 1px solid var(--borda);
}
.p-a { background: rgba(255, 74, 28, .16);  color: #ff8a5c; border-color: rgba(255, 74, 28, .3); }
.p-b { background: rgba(59, 160, 255, .16); color: #6fbcff; border-color: rgba(59, 160, 255, .3); }
.p-c { background: rgba(47, 209, 109, .16); color: #58e08c; border-color: rgba(47, 209, 109, .3); }
.p-extra { background: rgba(255, 176, 32, .16); color: #ffc659; border-color: rgba(255, 176, 32, .3); font-size: .625rem; }

/* --------------------------------------------------------------- botões --- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 46px; padding: 0 1.125rem;
  border: 1px solid transparent; border-radius: var(--r-p);
  background: var(--superficie-2); color: var(--texto);
  font: inherit; font-size: .9375rem; font-weight: 650; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-principal { background: var(--chama); color: #fff; }
.btn-principal:hover { background: var(--chama-2); }
.btn-contorno { background: transparent; border-color: var(--borda-forte); color: var(--texto); }
.btn-contorno:hover { border-color: var(--texto-3); }
.btn-perigo { background: transparent; border-color: rgba(255, 92, 92, .4); color: var(--erro); }
.btn-largo { width: 100%; }
.btn-grande { min-height: 54px; font-size: 1.0625rem; }
.btn-pequeno { min-height: 34px; padding: 0 .625rem; font-size: .8125rem; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* ------------------------------------------------------------ formulários --- */

.campo { margin-bottom: .875rem; }
.campo label { display: block; margin-bottom: .3125rem; font-size: .8125rem; font-weight: 650; color: var(--texto-2); }
/* Nota curta debaixo de um campo, de um botão ou de um cartão.
   Esteve definida SÓ dentro de `.campo`: fora dele saía com o tamanho e a cor
   do texto normal e lia-se como se fosse o principal — por cima do que era
   mesmo o principal. */
.dica { font-size: .75rem; color: var(--texto-3); }
.campo .dica { margin-top: .3125rem; }

input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=search], select, textarea {
  width: 100%; min-height: 46px; padding: .5rem .75rem;
  border: 1px solid var(--borda); border-radius: var(--r-p);
  background: var(--fundo-2); color: var(--texto);
  font: inherit; font-size: 16px;   /* 16px trava o zoom automático do Safari */
}
textarea { min-height: 88px; resize: vertical; line-height: 1.5; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--chama); box-shadow: 0 0 0 3px var(--chama-fundo);
}
input::placeholder, textarea::placeholder { color: var(--texto-3); }

/* Tira as setas dos campos numéricos: no telemóvel só roubam área ao dedo. */
input[type=number] { -moz-appearance: textfield; }
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* -------------------------------------------------------------- avisos --- */

.aviso {
  padding: .75rem .875rem; border-radius: var(--r-p); margin-bottom: 1rem;
  font-size: .875rem; border: 1px solid transparent;
}
.aviso-ok   { background: var(--ok-fundo);   border-color: rgba(47, 209, 109, .3); color: #86e6ab; }
.aviso-erro { background: var(--erro-fundo); border-color: rgba(255, 92, 92, .3);  color: #ff9b9b; }
.aviso-info { background: var(--chama-fundo); border-color: rgba(255, 74, 28, .3); color: #ffab8a; }

/* De quem são os dados deste ecrã. Só o treinador a vê, e vê-a em todas as
   páginas: é o que torna honesto escolher-lhe um atleta por omissão. */
.quem {
  display: flex; align-items: center; gap: .375rem; flex-wrap: wrap;
  margin: -.25rem 0 1rem; padding: .5rem .75rem;
  border: 1px solid var(--borda); border-radius: var(--r-p);
  background: var(--fundo-2); font-size: .8125rem;
}
.quem-txt { color: var(--texto-3); }
.quem-nome { font-weight: 700; color: var(--texto); }
.quem-trocar { margin-left: auto; color: var(--chama-2); font-weight: 650; }

/* Cada atleta é uma linha inteira que se submete: o alvo do dedo é a linha,
   não só o botão à direita. */
.escolher-atleta { width: 100%; }

.vazio { padding: 2rem 1rem; text-align: center; color: var(--texto-3); }
.vazio p { margin: 0; }
.vazio-sub { font-size: .8125rem; margin-top: .375rem !important; }

/* ============================ ECRÃ DE TREINO ============================= */

.barra-treino {
  position: sticky; top: calc(var(--topo-h) + env(safe-area-inset-top, 0px)); z-index: 30;
  display: flex; align-items: center; gap: .75rem;
  margin: -1rem -1rem 1rem; padding: .625rem 1rem;
  background: rgba(21, 25, 34, .96);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--borda);
}
.bt-relogio { font-size: 1.375rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.bt-meta { font-size: .75rem; color: var(--texto-3); line-height: 1.25; }
.bt-fim { margin-left: auto; }

.progresso { height: 4px; border-radius: 2px; background: var(--superficie-2); overflow: hidden; }
.progresso i { display: block; width: 0; height: 100%; background: var(--chama); transition: width .25s ease; }

/* ---- cartão de exercício ---- */

.ex {
  border: 1px solid var(--borda); border-radius: var(--r);
  background: var(--superficie); margin-bottom: .625rem; overflow: hidden;
}
.ex.completo { border-color: rgba(47, 209, 109, .35); }
.ex.completo .ex-topo { background: var(--ok-fundo); }

.ex-topo {
  display: flex; align-items: center; gap: .75rem;
  width: 100%; padding: .875rem; text-align: left;
  background: none; border: 0; color: inherit; font: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ex-num {
  flex: none; display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 8px;
  background: var(--superficie-2); color: var(--texto-3);
  font-size: .75rem; font-weight: 800;
}
.ex.completo .ex-num { background: var(--ok); color: #06240f; }
.ex-info { flex: 1; min-width: 0; }
.ex-nome { display: block; font-weight: 650; font-size: .9375rem; line-height: 1.3; }
.ex-meta { display: block; font-size: .75rem; color: var(--texto-3); margin-top: .1875rem; }
.ex-conta { flex: none; font-size: .8125rem; font-weight: 700; color: var(--texto-3); font-variant-numeric: tabular-nums; }
.ex.completo .ex-conta { color: var(--ok); }
.ex-seta { flex: none; color: var(--texto-3); font-size: .75rem; transition: transform .18s ease; }
.ex[open] .ex-seta, .ex.aberto .ex-seta { transform: rotate(180deg); }

.ex-corpo { padding: 0 .875rem .875rem; }
.ex-obs {
  font-size: .8125rem; color: var(--aviso);
  background: rgba(255, 176, 32, .1); border-radius: 8px;
  padding: .375rem .5rem; margin-bottom: .625rem;
}
.ex-ultima { font-size: .75rem; color: var(--texto-3); margin-bottom: .625rem; }
.ex-ultima b { color: var(--texto-2); font-weight: 650; }
/* As sessões de trás: mesma linha de leitura, um tom abaixo — quem
   procura a carga de hoje lê a primeira e pára.                        */
.ex-antes { display: block; margin-top: .1875rem; color: var(--texto-3); }

.serie {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) minmax(0, 1fr) 52px;
  align-items: center; gap: .5rem; margin-bottom: .5rem;
}
.serie.tempo { grid-template-columns: 26px minmax(0, 1fr) 52px; }
.serie.feito { grid-template-columns: 26px minmax(0, 1fr) 52px; }
/* Com o treino a decorrer entra a coluna do botão de nota. Só aí: no treino
   fechado essa coluna seria um vazio de 38px em todas as linhas. */
.serie.editavel { grid-template-columns: 26px minmax(0, 1fr) minmax(0, 1fr) 38px 52px; }
.serie.editavel.tempo,
.serie.editavel.feito { grid-template-columns: 26px minmax(0, 1fr) 38px 52px; }
.serie-n { font-size: .8125rem; font-weight: 700; color: var(--texto-3); text-align: center; }
.serie input {
  min-height: 48px; text-align: center; font-size: 17px; font-weight: 650;
  padding: .375rem .25rem; font-variant-numeric: tabular-nums;
}
.serie .un {
  position: absolute; right: .5rem; top: 50%; transform: translateY(-50%);
  font-size: .6875rem; color: var(--texto-3); pointer-events: none;
}
.serie-campo { position: relative; }

.serie input.sugerido { color: var(--texto-3); font-weight: 500; }

.serie-ok {
  display: grid; place-items: center;
  width: 52px; height: 48px; border-radius: var(--r-p);
  border: 1px solid var(--borda-forte); background: var(--fundo-2);
  color: var(--texto-3); font-size: 1.25rem; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  opacity: .45;
  transition: background .15s ease, color .15s ease, border-color .15s ease, opacity .15s ease;
}
.serie-ok[aria-pressed="true"] {
  background: var(--ok); border-color: var(--ok); color: #06240f; opacity: 1;
}
.serie-ok:disabled { cursor: default; }
.serie-ok:active { transform: scale(.96); }
.serie.a-gravar .serie-ok { opacity: .55; }
.serie.falhou .serie-ok { border-color: var(--erro); color: var(--erro); }

/* A nota de uma série: o sítio onde se escreve «o ombro doeu na terceira».
   O botão é discreto de propósito — é para se usar de vez em quando, e o ✓ ao
   lado não pode perder protagonismo. */
.serie-nota-btn {
  display: grid; place-items: center;
  width: 38px; height: 48px; border-radius: var(--r-p);
  border: 1px solid transparent; background: none;
  color: var(--texto-3); font-size: .9375rem; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.serie-nota-btn.tem-nota { color: var(--chama-2); background: var(--chama-fundo); }
.serie-nota-btn:active { transform: scale(.96); }

/* Ocupa a linha toda por baixo da série a que pertence. */
.serie .serie-nota { grid-column: 1 / -1; text-align: left; font-size: .875rem; font-weight: 500; }
.serie-nota-lida {
  grid-column: 1 / -1; font-size: .75rem; color: var(--texto-2);
  border-left: 2px solid var(--borda-forte); padding-left: .5rem;
}

.ex-rodape { display: flex; gap: .5rem; align-items: center; margin-top: .25rem; }

/* ---- cronómetro de descanso ---- */

.descanso-barra {
  position: fixed; left: 0; right: 0; z-index: 45;
  bottom: calc(58px + var(--seg));
  display: none; align-items: center; gap: .75rem;
  padding: .75rem 1rem;
  background: var(--chama); color: #fff;
  box-shadow: var(--sombra);
}
.descanso-barra.visivel { display: flex; }
.descanso-barra.acabou { background: var(--ok); color: #06240f; }
.db-tempo { font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; min-width: 68px; }
.db-txt { font-size: .8125rem; opacity: .9; line-height: 1.25; flex: 1; }
.db-acoes { display: flex; gap: .375rem; }
.db-btn {
  min-height: 38px; padding: 0 .75rem; border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .16);
  color: inherit; font: inherit; font-size: .8125rem; font-weight: 700; cursor: pointer;
}
.descanso-barra.acabou .db-btn { border-color: rgba(0, 0, 0, .3); background: rgba(0, 0, 0, .12); }

/* --------------------------------------------------------------- listas --- */

.lista { list-style: none; margin: 0; padding: 0; }
.lista li { border-bottom: 1px solid var(--borda); }
.lista li:last-child { border-bottom: 0; }
.lista-item {
  display: flex; align-items: center; gap: .75rem;
  padding: .75rem .25rem; color: var(--texto);
}
.lista-item:hover { text-decoration: none; }
.li-info { flex: 1; min-width: 0; }
.li-tit { display: block; font-weight: 650; font-size: .9375rem; }
.li-sub { display: block; font-size: .75rem; color: var(--texto-3); margin-top: .125rem; }
.li-fim { flex: none; text-align: right; }
/* Linha de lista com uma acção ao lado do link principal. */
.lista li.com-acao { display: flex; align-items: center; gap: .5rem; padding-right: .25rem; }
.lista li.com-acao .lista-item { flex: 1; min-width: 0; }
/* Botão do vídeo dentro do cartão do exercício, no ecrã do treino. */
.ex-video { margin-bottom: .625rem; }
/* Bloco de comando para copiar (a linha do cron). */
.bloco-codigo {
  display: block; margin: .5rem 0; padding: .625rem .75rem;
  background: var(--fundo-2); border: 1px solid var(--borda); border-radius: var(--r-p);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: .8125rem; color: var(--texto); overflow-x: auto; white-space: pre;
}
.li-valor { font-weight: 700; font-size: .9375rem; font-variant-numeric: tabular-nums; }
.li-seta { flex: none; color: var(--texto-3); }

/* ---------------------------------------------------------- tira semanal --- */

.semana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .375rem; }
.semana-dia {
  display: flex; flex-direction: column; align-items: center; gap: .3125rem;
  padding: .5rem .125rem; border-radius: var(--r-p);
  border: 1px solid var(--borda); background: var(--fundo-2);
  color: var(--texto-3); font-size: .6875rem; font-weight: 600;
}
.semana-dia:hover { text-decoration: none; }
.semana-dia.hoje { border-color: var(--chama); background: var(--chama-fundo); color: var(--chama-2); }
.semana-dia .sd-cod {
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px;
  background: var(--superficie-2); color: var(--texto-3); font-size: .6875rem; font-weight: 800;
}
.semana-dia.feito .sd-cod { background: var(--ok); color: #06240f; }
.semana-dia.tem-treino .sd-cod { background: var(--chama); color: #fff; }
.semana-dia.feito.tem-treino .sd-cod { background: var(--ok); color: #06240f; }
.semana-dia .sd-desc { color: var(--texto-3); font-size: .875rem; line-height: 22px; }
/* Calorias do dia, por baixo da letra do treino. Sete células em ~360px dão
   ~48px cada: o número tem de ser pequeno e sem unidade — a unidade está na
   métrica logo abaixo, e repeti-la aqui não caberia. */
.semana-dia .sd-kcal {
  display: block; margin-top: .125rem;
  font-size: .625rem; font-weight: 700; color: var(--texto-3);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.semana-dia.feito .sd-kcal { color: var(--texto-2); }

/* ------------------------------------------------------------- métricas --- */

.metricas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
/* Com quatro, três numa linha e uma sozinha ficava torto: vão 2x2. */
.metricas.quatro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.metrica {
  background: var(--fundo-2); border: 1px solid var(--borda);
  border-radius: var(--r-p); padding: .75rem .625rem; text-align: center;
}
.metrica-v { font-size: 1.375rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
/* ------------------------------------------------ escolha de cumprimento --- */

.escolhas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .375rem; }
.escolha {
  display: block; width: 100%; padding: .625rem .375rem; text-align: center; cursor: pointer;
  border-radius: var(--r-p); border: 1px solid var(--borda);
  background: var(--superficie-2); color: var(--texto-2);
  font-family: inherit; font-size: .8125rem; font-weight: 650; line-height: 1.2;
  -webkit-appearance: none; appearance: none;
}
.escolha:hover { border-color: var(--borda-forte); }
/* :has() dá o estado logo ao tocar; a classe vem do servidor e cobre o resto. */
.escolha:has(input:checked), .escolha.escolhida {
  border-color: var(--chama); background: var(--chama-fundo); color: var(--chama-2);
}

/* --------------------------------------------------------- abas do plano --- */

.abas { display: flex; gap: .375rem; margin-bottom: .875rem; }
.aba {
  flex: 1; padding: .5rem .75rem; text-align: center; border-radius: var(--r-p);
  border: 1px solid var(--borda); background: var(--superficie-2);
  color: var(--texto-2); font-size: .875rem; font-weight: 650; text-decoration: none;
}
.aba:hover { border-color: var(--borda-forte); text-decoration: none; }
.aba.ativa { border-color: var(--chama); background: var(--chama-fundo); color: var(--chama-2); }
.aba-conta { font-size: .75rem; opacity: .75; }

/* ------------------------------------------------------------ conversa --- */

.sino { position: relative; }
.sino-conta {
  position: absolute; top: -.25rem; right: -.25rem; min-width: 1.05rem; height: 1.05rem;
  padding: 0 .2rem; border-radius: 999px; background: var(--chama); color: #fff;
  font-size: .625rem; font-weight: 800; line-height: 1.05rem; text-align: center;
}
.cabeca-chat { margin-bottom: .75rem; }
.cabeca-chat h1 { margin-bottom: .125rem; }

.conversa { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1rem; }
.conversa-dia { text-align: center; margin: .5rem 0 .25rem; }
.conversa-dia span {
  display: inline-block; padding: .125rem .5rem; border-radius: 999px;
  background: var(--superficie-2); color: var(--texto-3);
  font-size: .6875rem; text-transform: uppercase; letter-spacing: .05em;
}
.balao {
  position: relative; max-width: 82%; padding: .5rem .75rem 1.25rem;
  border-radius: var(--r-p); border: 1px solid var(--borda); background: var(--superficie-2);
}
.balao-meu  { align-self: flex-end; background: var(--chama-fundo); border-color: var(--borda-forte); }
.balao-dele { align-self: flex-start; }
.balao-refeicao { border-left: 3px solid var(--chama); }
.balao-corpo { margin: 0; font-size: .9375rem; overflow-wrap: anywhere; }
.balao-hora {
  position: absolute; right: .625rem; bottom: .375rem;
  font-size: .625rem; color: var(--texto-3); font-variant-numeric: tabular-nums;
}
.anexo {
  display: flex; align-items: center; gap: .5rem; margin-top: .375rem;
  padding: .5rem .625rem; border-radius: 10px; border: 1px solid var(--borda);
  background: var(--superficie); color: inherit; text-decoration: none;
}
.anexo:hover { border-color: var(--chama); }
.anexo-icone { font-size: 1.125rem; color: var(--chama); }
.anexo-nome  { flex: 1; font-size: .8125rem; font-weight: 650; overflow-wrap: anywhere; }
.anexo-tam   { font-size: .6875rem; color: var(--texto-3); white-space: nowrap; }

.campo-msg { min-height: 4.5rem; resize: vertical; }

/* «O que comi» — um `<details>` de HTML puro, sem javascript (o CSP não deixa
   entrar nenhum). O resumo é o comando: alvo alto para o polegar e a contagem
   à direita, porque um comando fechado que não diz o que esconde não se abre. */
.comi { border-top: 1px solid var(--borda); margin-top: .75rem; padding-top: .625rem; }
.comi[open] { padding-bottom: .25rem; }
.comi-tit {
  display: flex; align-items: center; gap: .5rem; cursor: pointer;
  min-height: 40px; font-size: .9375rem; font-weight: 650; color: var(--texto-2);
  list-style: none;
}
.comi-tit::-webkit-details-marker { display: none; }
.comi-tit::after { content: '▾'; margin-left: auto; color: var(--texto-3); }
.comi[open] .comi-tit::after { content: '▴'; }
.comi-conta {
  font-size: .75rem; font-weight: 600; color: var(--texto-3);
  border: 1px solid var(--borda); border-radius: 999px; padding: .0625rem .5rem;
}
.comi textarea { min-height: 56px; }
.escrever.a-largar { outline: 2px dashed var(--chama); outline-offset: 3px; }
.largar-alvo { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 55%; }

.metrica-un { font-size: .8125rem; font-weight: 650; color: var(--texto-3); letter-spacing: 0; margin-left: .1875rem; }
.metrica-r { font-size: .6875rem; color: var(--texto-3); text-transform: uppercase; letter-spacing: .05em; margin-top: .125rem; }

/* --------------------------------------------------------------- tabela --- */

.tabela-envolve { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -1rem; padding: 0 1rem; }
table.dados { width: 100%; border-collapse: collapse; font-size: .875rem; }
table.dados th, table.dados td { padding: .5rem .625rem; text-align: left; border-bottom: 1px solid var(--borda); white-space: nowrap; }
table.dados td:first-child, table.dados th:first-child { white-space: normal; min-width: 9.5rem; }
/* Coluna de prosa (as séries de um treino): parte a linha em vez de cortar o
   ecrã fora — a terceira série era invisível num telemóvel. */
table.dados td.envolve { white-space: normal; min-width: 11rem; }
table.dados td:first-child a { color: inherit; }
table.dados td:first-child a:hover { color: var(--chama-2); }
table.dados th { font-size: .6875rem; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-3); font-weight: 700; }
table.dados td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- login --- */

.login-marca { text-align: center; margin-bottom: 1.75rem; }
.login-marca .lm-chama {
  display: inline-block; width: 44px; height: 44px; border-radius: 12px 30px 12px 30px;
  background: linear-gradient(135deg, var(--chama), #ffa03c); margin-bottom: .75rem;
}
.login-marca h1 { font-size: 1.5rem; margin: 0; }
.login-marca h1 b { color: var(--chama); }
.login-marca p { color: var(--texto-3); font-size: .875rem; margin: .25rem 0 0; }

/* ----------------------------------------------------------- indicadores --- */

/* Fila de reenvio: só aparece quando há alguma coisa por gravar. */
.fila {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 50;
  bottom: calc(64px + var(--seg));
  display: none; align-items: center; gap: .5rem;
  padding: .5rem .875rem; border-radius: 999px;
  background: var(--aviso); color: #2a1c00;
  font-size: .8125rem; font-weight: 700; box-shadow: var(--sombra);
}
.fila.visivel { display: flex; }
.fila.erro { background: var(--erro); color: #fff; }

/* --------------------------------------------------------------- ecrãs --- */

@media (min-width: 700px) {
  .nav-desktop { display: flex; }
  .nav-movel { display: none; }
  .main { padding-bottom: 3rem; }
  .descanso-barra { bottom: 0; }
  .fila { bottom: 1rem; }
  h1 { font-size: 1.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* Impressão: o resumo semanal sai em papel ou em PDF pelo próprio browser. */
@media print {
  .topo, .nav-movel, .barra-treino, .descanso-barra, .fila, .btn, .no-print { display: none !important; }
  body { background: #fff; color: #000; }
  .cartao, .hero { border-color: #ccc; background: #fff; page-break-inside: avoid; }
  .main { max-width: none; padding: 0; }
}

/* =========================================================================
   Utilitários

   Existem por uma razão concreta: o Content-Security-Policy desta app não
   permite `style=""` nos elementos (o nonce cobre blocos <style>, não
   atributos). Em vez de abrir a política com 'unsafe-inline', o que era
   estilo solto passa a ter nome aqui.
   ========================================================================= */

.centro       { text-align: center; }
.suave        { color: var(--texto-3); }
.mini         { font-size: .75rem; }
.sem-margem   { margin: 0 !important; }
.mt-1         { margin-top: .75rem; }
.mt-2         { margin-top: 1.5rem; }
.mb-1         { margin-bottom: .5rem; }
.mb-2         { margin-bottom: 1rem; }
.linha        { display: flex; gap: .5rem; }
.cresce       { flex: 1; }

.nota-rodape  { text-align: center; color: var(--texto-3); font-size: .75rem; }
.link-mini    { font-size: .8125rem; }

/* ---- ecrã de treino ---- */

.progresso-treino { margin-bottom: 1rem; }
.hero-compacto    { padding: .875rem 1rem; }
.hero-titulo      { font-size: 1.25rem; }

.opcao {
  display: flex; align-items: center; gap: .625rem;
  padding: .75rem .875rem; cursor: pointer;
}
.opcao input[type=checkbox] {
  width: 20px; height: 20px; min-height: 20px; flex: none;
  accent-color: var(--chama); margin: 0;
}
.opcao span { font-size: .8125rem; color: var(--texto-2); }

.serie-nada { color: var(--texto-3); font-size: .8125rem; }
.notas-texto { margin: 0; color: var(--texto-2); font-size: .875rem; white-space: pre-wrap; }

/* ---- caixa de diálogo ---- */

dialog.dialogo {
  max-width: 420px; width: calc(100% - 2rem);
  border: 1px solid var(--borda); border-radius: var(--r);
  background: var(--superficie); color: var(--texto);
  padding: 1rem;
}
dialog.dialogo::backdrop { background: rgba(0, 0, 0, .6); }
dialog.dialogo h2 { margin-top: 0; }
dialog.dialogo .dialogo-txt { color: var(--texto-2); font-size: .875rem; }

/* ---- listas de escolha ---- */

.btn-lista { justify-content: flex-start; gap: .75rem; }

/* =========================================================================
   ENTRADA POR PERFIL E CÓDIGO

   O ecrã que se abre com uma mão. Nada aqui deve chamar o teclado do sistema:
   ele salta por cima da página e tapa metade do que interessa.
   ========================================================================= */

.perfil {
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  margin-bottom: 1.25rem;
}
.perfil-avatar {
  display: grid; place-items: center;
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--chama-fundo); color: var(--chama-2);
  border: 1px solid rgba(255, 74, 28, .3);
  font-size: 1.25rem; font-weight: 800; letter-spacing: .02em;
}
.perfil-avatar.pequeno { width: 38px; height: 38px; font-size: .8125rem; border-radius: 12px; }
.perfil-nome { font-size: 1rem; font-weight: 700; letter-spacing: -.01em; }

/* Escolha entre perfis. Só aparece quando há mais do que um — com um só,
   uma fila de um elemento seria uma pergunta sem alternativa. */
.perfis { display: flex; justify-content: center; gap: .5rem; margin-bottom: 1rem; flex-wrap: wrap; }
.perfil-escolha {
  display: flex; align-items: center; gap: .5rem;
  padding: .375rem .75rem .375rem .375rem; border-radius: 999px;
  border: 1px solid var(--borda); background: var(--superficie);
  color: var(--texto-2); font-size: .8125rem; font-weight: 650;
}
.perfil-escolha:hover { text-decoration: none; border-color: var(--borda-forte); }
.perfil-escolha.escolhido { border-color: var(--chama); background: var(--chama-fundo); color: var(--chama-2); }
.perfil-escolha .perfil-avatar { width: 28px; height: 28px; font-size: .6875rem; border-radius: 50%; }

.etiqueta-papel {
  font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--texto-3); background: var(--superficie-2);
  border: 1px solid var(--borda); border-radius: 999px; padding: .125rem .5rem;
}

/* Os quatro pontos: dizem quantos dígitos já entraram sem mostrar nenhum. */
.pontos { display: flex; justify-content: center; gap: .75rem; margin-bottom: 1.25rem; }
.pontos i {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--borda-forte); background: transparent;
  transition: background .12s ease, border-color .12s ease, transform .12s ease;
}
.pontos i.cheio { background: var(--chama); border-color: var(--chama); transform: scale(1.12); }
.pontos.errado i { border-color: var(--erro); background: transparent; animation: abanar .4s; }
@keyframes abanar {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-6px); }
  75%      { transform: translateX(6px); }
}

/* O campo real continua no formulário — é ele que submete e é ele que serve
   quando não há JavaScript. Com JavaScript, quem se vê é o teclado abaixo. */
.campo-codigo {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.teclado {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .625rem; margin-bottom: 1rem;
}
.tecla {
  min-height: 64px; border-radius: var(--r);
  border: 1px solid var(--borda); background: var(--superficie-2);
  color: var(--texto); font: inherit; font-size: 1.5rem; font-weight: 600;
  font-variant-numeric: tabular-nums; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .1s ease, transform .1s ease;
}
.tecla:active { background: var(--chama); border-color: var(--chama); color: #fff; transform: scale(.96); }
.tecla-apagar { font-size: 1.125rem; color: var(--texto-2); }
.tecla-vazia { min-height: 64px; }

/* Com o teclado activo, o quarto dígito é que entra. O botão fica como rede —
   e uma rede não deve ser a coisa mais berrante do ecrã. */
.tem-teclado #entrar-codigo {
  background: transparent; border-color: var(--borda-forte); color: var(--texto-2);
  min-height: 44px; font-size: .9375rem;
}

.visualmente-oculto {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Campo de leitura com um link para copiar. Monoespaçado e pequeno: serve
   para se ver que está lá inteiro, não para se ler. */
.campo-link {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .75rem; text-overflow: ellipsis;
}

/* Definir o código: aqui o teclado do sistema serve, são dois campos curtos. */
.campo-pin {
  text-align: center; font-size: 1.5rem; font-weight: 700;
  letter-spacing: .5em; text-indent: .5em; font-variant-numeric: tabular-nums;
}

/* =========================================================================
   EDITOR DE PLANOS
   ========================================================================= */

.cartao-ativo { border-color: var(--chama); background: linear-gradient(160deg, #241a1a 0%, var(--superficie) 60%); }

.etiqueta-ativo {
  flex: none; font-size: .6875rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--chama-2); background: var(--chama-fundo);
  border: 1px solid rgba(255, 74, 28, .3); border-radius: 999px; padding: .125rem .5rem;
}

/* Fila de botões que se enrola em vez de empurrar o cartão para fora. */
.linha-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; }
.linha-acoes form { margin: 0; }

/* No editor o cabeçalho leva as setas de ordem ao lado, por isso não pode ser
   ele próprio um botão — o que abre é a zona do nome. */
.ex-topo-fixo { display: flex; align-items: center; gap: .75rem; padding: .875rem; }
.ex-abrir {
  flex: 1; min-width: 0; text-align: left; cursor: pointer;
  background: none; border: 0; padding: 0; color: inherit; font: inherit;
  -webkit-tap-highlight-color: transparent;
}

/* Campos lado a lado que sabem encolher — três num telemóvel é o limite. */
.linha .campo { margin-bottom: 0; }
.linha > .cresce { min-width: 0; }

select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--texto-3) 50%),
                    linear-gradient(135deg, var(--texto-3) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2rem;
}

/* =========================================================================
   PESO E GRÁFICO

   Uma série só — o peso. A faixa da meta é mobiliário do gráfico, não uma
   segunda série: por isso não leva cor de identidade nem legenda. O título
   diz o que a linha é, e a tabela por baixo tem todos os valores.
   ========================================================================= */

/* Números grandes com figuras proporcionais: tabular-nums a este tamanho
   deixa «121» com buracos. As tabelas é que precisam de alinhamento. */
.figura { font-size: 2.75rem; font-variant-numeric: proportional-nums; letter-spacing: -.03em; }
.figura-un { font-size: 1.125rem; font-weight: 600; color: var(--texto-2); letter-spacing: 0; }

/* A fila da página de sem-rede: cada linha é uma série que ainda não subiu.
   Não é uma tabela — são poucas, e uma tabela larga num telemóvel arrasta-se. */
.lista-fila { list-style: none; margin: 0 0 .75rem; padding: 0; display: grid; gap: .25rem; }
.lista-fila li { padding: .375rem .5rem; border-radius: var(--r-p);
                 background: var(--superficie-2); color: var(--texto-2); font-size: .8125rem; }
.lista-fila b { color: var(--texto); font-weight: 650; }

.grafico-envolve { position: relative; margin: 0 -.25rem; }
.grafico { display: block; width: 100%; height: auto; overflow: visible; }

.g-meta   { fill: rgba(107, 118, 137, .16); }
.g-grelha { stroke: var(--borda); stroke-width: 1; }            /* fino e sólido */
.g-linha  { fill: none; stroke: var(--chama); stroke-width: 2;
            stroke-linejoin: round; stroke-linecap: round; }
/* Com a média de 7 dias desenhada, a linha crua recua: continua toda lá — é a
   verdade dos dias — mas deixa de disputar a leitura com a direcção.         */
.g-linha-crua { opacity: .38; }
.g-tendencia  { fill: none; stroke: var(--chama); stroke-width: 2.5;
                stroke-linejoin: round; stroke-linecap: round; }
/* A marca não recebe toques: quem os recebe e o dedo agradece                */
/* é a coluna por baixo dela. Sem isto, entrar na marca a partir da coluna    */
/* disparava um pointerout e a dica piscava.                                  */
.g-ponto  { fill: var(--chama); stroke: var(--superficie); stroke-width: 2; pointer-events: none; }
.g-toque  { fill: transparent; }                    /* coluna de alto a baixo */
.g-marca  { cursor: pointer; }
.g-alvo   { stroke: var(--texto-3); stroke-width: 1.5; stroke-dasharray: 5 4; }  /* limiar, não grelha */
.g-limiar { stroke: var(--texto-3); stroke-width: 1.5; }   /* meta de valor único */
.g-tick   { fill: var(--texto-3); font-size: 13px; font-variant-numeric: tabular-nums; }
.g-rotulo { fill: var(--texto); font-size: 14px; font-weight: 700; }
.g-rotulo-meta { fill: var(--texto-3); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }

.grafico-dica {
  position: absolute; z-index: 5; pointer-events: none;
  padding: .3125rem .5rem; border-radius: 8px;
  background: var(--fundo); border: 1px solid var(--borda-forte);
  color: var(--texto); font-size: .75rem; font-weight: 650;
  white-space: nowrap; transform: translate(-50%, -140%);
  box-shadow: var(--sombra);
}

.campo-peso {
  font-size: 1.75rem; font-weight: 700; text-align: center;
  font-variant-numeric: tabular-nums; min-height: 58px;
}

.campo-resumo {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .75rem; line-height: 1.55; min-height: 260px;
}

table.dados td.bom { color: var(--ok); }

.delta { font-size: .8125rem; font-weight: 650; margin-left: .375rem; }
.delta.bom { color: var(--ok); }
.delta.mau { color: var(--texto-3); }

/* Dia sugerido pela ficha do PT: indicação, não ordem — por isso esbatido.
   O que manda é a rotação, e o que se fez aparece a verde. */
.semana-dia.sugerido .sd-cod { background: var(--superficie-2); color: var(--texto-3); }

/* Quantos treinos já foram esta semana. Bolinhas em vez de barra: uma barra
   precisaria de largura inline, e o CSP desta app não deixa passar style="". */
.pips { display: flex; gap: .375rem; justify-content: center; }
.pip {
  width: 10px; height: 10px; border-radius: 50%;
  border: 1.5px solid var(--borda-forte); background: transparent;
}
.pip.cheio { background: var(--ok); border-color: var(--ok); }
.pip.cheio.extra { background: var(--chama); border-color: var(--chama); }

/* A ordem do ciclo, numerada — é a lista que decide o treino do dia. */
.ciclo { list-style: none; counter-reset: c; margin: 0; padding: 0; }
.ciclo li {
  display: flex; align-items: center; gap: .75rem;
  padding: .625rem .25rem; border-bottom: 1px solid var(--borda);
  counter-increment: c;
}
.ciclo li:last-child { border-bottom: 0; }
.ciclo li::before {
  content: counter(c); flex: none;
  width: 20px; text-align: center;
  color: var(--texto-3); font-size: .75rem; font-weight: 800;
}