/* =====================================================================
   CortexFit — identidade visual
   Paleta "Neon Cortex": grafite profundo + lima elétrica + ciano.
   A cor primária é sobrescrita por empresa via --cf-primaria (white-label).
   ===================================================================== */

:root {
  --cf-primaria: #B4FF39;
  --cf-secundaria: #22D3EE;

  /* Versão da cor de destaque segura como TEXTO sobre o fundo da página.
     No escuro é a própria cor; no claro o `Tema` escurece até 4.5:1, porque
     lima sobre branco dá 1,29:1 e some. Ver `cortexfit-claro.css`. */
  --cf-primaria-texto: var(--cf-primaria);
  --cf-secundaria-texto: var(--cf-secundaria);

  --cf-fundo: #0B0F14;
  --cf-superficie: #131A22;
  --cf-superficie-2: #1B242E;
  --cf-borda: #263241;

  --cf-texto: #E8EEF4;
  --cf-texto-suave: #93A4B6;
  --cf-texto-fraco: #64748B;

  --cf-sucesso: #34D399;
  --cf-erro: #F87171;
  --cf-aviso: #FBBF24;
  --cf-info: #60A5FA;

  --cf-raio: 14px;
  --cf-raio-sm: 10px;
  --cf-sombra: 0 10px 30px -12px rgba(0, 0, 0, .7);

  /* Área de toque mínima: 44px, exigência de UX mobile do projeto */
  --cf-toque: 44px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--cf-fundo);
  color: var(--cf-texto);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* Fundo com brilho sutil da cor primária, dá o ar "energético" da marca */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(60rem 40rem at 85% -10%, color-mix(in srgb, var(--cf-primaria) 8%, transparent), transparent 70%),
    radial-gradient(50rem 35rem at 10% 110%, color-mix(in srgb, var(--cf-secundaria) 7%, transparent), transparent 70%);
}

a { color: var(--cf-secundaria-texto); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .5rem; font-weight: 700; letter-spacing: -.02em; }
h1 { font-size: 1.75rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.05rem; }

/* ---------------------------------------------------------------- marca */
.cf-marca { display: inline-flex; align-items: center; gap: .55rem; font-weight: 800; letter-spacing: -.03em; color: var(--cf-texto); text-decoration: none; }
.cf-marca:hover { text-decoration: none; }
.cf-marca__icone { width: 30px; height: 30px; flex: none; }
.cf-marca__traco { stroke: var(--cf-primaria-texto); }
.cf-marca__no { fill: var(--cf-primaria-texto); }
.cf-marca__no--secundaria { fill: var(--cf-secundaria-texto); }
.cf-marca__texto { font-size: 1.15rem; }
.cf-marca__texto em { font-style: normal; color: var(--cf-primaria-texto); }

/* ------------------------------------------------------------- estrutura */
.cf-casca { position: relative; z-index: 1; min-height: 100vh; display: flex; flex-direction: column; }
.cf-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 1rem; }
.cf-container--estreito { max-width: 480px; }
.cf-container--medio { max-width: 820px; }
.cf-conteudo { flex: 1; padding: 1.25rem 0 3rem; }

.cf-topo {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--cf-fundo) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--cf-borda);
}
.cf-topo__interno { display: flex; align-items: center; gap: 1rem; height: 60px; }
.cf-topo__espaco { flex: 1; }

/* --------------------------------------------------------------- cartões */
.cf-cartao {
  background: var(--cf-superficie);
  border: 1px solid var(--cf-borda);
  border-radius: var(--cf-raio);
  padding: 1.15rem;
}
.cf-cartao--destaque { border-color: color-mix(in srgb, var(--cf-primaria) 45%, var(--cf-borda)); }
.cf-cartao__titulo { font-size: .78rem; text-transform: uppercase; letter-spacing: .09em; color: var(--cf-texto-fraco); margin-bottom: .35rem; }

.cf-grade { display: grid; gap: 1rem; }
.cf-grade--2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.cf-grade--3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.cf-grade--4 { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }

.cf-metrica { font-size: 2rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.cf-metrica--primaria { color: var(--cf-primaria-texto); }

/* --------------------------------------------------------------- botões */
.cf-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: var(--cf-toque); padding: .6rem 1.15rem;
  border-radius: var(--cf-raio-sm); border: 1px solid transparent;
  font-weight: 600; font-size: .95rem; cursor: pointer;
  transition: transform .08s ease, filter .15s ease, background .15s ease;
  text-decoration: none; font-family: inherit;
}
.cf-btn:hover { text-decoration: none; }
.cf-btn:active { transform: translateY(1px); }
.cf-btn:focus-visible { outline: 2px solid var(--cf-secundaria); outline-offset: 2px; }
.cf-btn[disabled] { opacity: .5; cursor: not-allowed; }

.cf-btn--primario { background: var(--cf-primaria); color: #0B0F14; }
.cf-btn--primario:hover { filter: brightness(1.08); }
.cf-btn--secundario { background: var(--cf-superficie-2); color: var(--cf-texto); border-color: var(--cf-borda); }
.cf-btn--secundario:hover { background: var(--cf-borda); }
.cf-btn--fantasma { background: transparent; color: var(--cf-texto-suave); border-color: var(--cf-borda); }
.cf-btn--fantasma:hover { color: var(--cf-texto); border-color: var(--cf-texto-fraco); }
.cf-btn--perigo { background: transparent; color: var(--cf-erro); border-color: color-mix(in srgb, var(--cf-erro) 40%, transparent); }
.cf-btn--perigo:hover { background: color-mix(in srgb, var(--cf-erro) 12%, transparent); }
.cf-btn--bloco { width: 100%; }
.cf-btn--pequeno { min-height: 34px; padding: .3rem .7rem; font-size: .82rem; }

/* -------------------------------------------------------------- formulário */
.cf-campo { margin-bottom: 1rem; }
.cf-rotulo { display: block; font-size: .85rem; font-weight: 600; color: var(--cf-texto-suave); margin-bottom: .35rem; }
.cf-rotulo span { color: var(--cf-erro); }

.cf-entrada, .cf-selecao, .cf-area {
  width: 100%; min-height: var(--cf-toque);
  padding: .6rem .8rem;
  background: var(--cf-superficie-2);
  border: 1px solid var(--cf-borda);
  border-radius: var(--cf-raio-sm);
  color: var(--cf-texto);
  font-size: 1rem; font-family: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.cf-entrada:focus, .cf-selecao:focus, .cf-area:focus {
  outline: none;
  border-color: var(--cf-primaria);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cf-primaria) 18%, transparent);
}
.cf-entrada::placeholder, .cf-area::placeholder { color: var(--cf-texto-fraco); }
.cf-area { min-height: 90px; resize: vertical; }
.cf-selecao { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2393A4B6' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .7rem center; padding-right: 2.2rem; }

.cf-campo--erro .cf-entrada, .cf-campo--erro .cf-selecao, .cf-campo--erro .cf-area { border-color: var(--cf-erro); }
.cf-erro-campo { display: block; color: var(--cf-erro); font-size: .8rem; margin-top: .3rem; }
.cf-ajuda { display: block; color: var(--cf-texto-fraco); font-size: .8rem; margin-top: .3rem; }

.cf-check { display: flex; align-items: flex-start; gap: .6rem; cursor: pointer; font-size: .9rem; color: var(--cf-texto-suave); }
.cf-check input[type=checkbox], .cf-check input[type=radio] { width: 20px; height: 20px; margin-top: .12rem; accent-color: var(--cf-primaria); flex: none; cursor: pointer; }

.cf-linha { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* --------------------------------------------------------------- tabelas */
.cf-tabela-rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cf-tabela { width: 100%; border-collapse: collapse; font-size: .9rem; }
.cf-tabela th {
  text-align: left; padding: .65rem .75rem; font-size: .72rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--cf-texto-fraco); border-bottom: 1px solid var(--cf-borda); white-space: nowrap;
}
.cf-tabela td { padding: .75rem; border-bottom: 1px solid color-mix(in srgb, var(--cf-borda) 55%, transparent); vertical-align: middle; }
.cf-tabela tbody tr:hover { background: color-mix(in srgb, var(--cf-superficie-2) 60%, transparent); }

/* --------------------------------------------------------------- selos */
.cf-selo {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .18rem .55rem; border-radius: 999px;
  font-size: .74rem; font-weight: 600; white-space: nowrap;
  background: var(--cf-superficie-2); color: var(--cf-texto-suave);
  border: 1px solid var(--cf-borda);
}
.cf-selo--sucesso { background: color-mix(in srgb, var(--cf-sucesso) 14%, transparent); color: var(--cf-sucesso); border-color: color-mix(in srgb, var(--cf-sucesso) 32%, transparent); }
.cf-selo--erro    { background: color-mix(in srgb, var(--cf-erro) 14%, transparent); color: var(--cf-erro); border-color: color-mix(in srgb, var(--cf-erro) 32%, transparent); }
.cf-selo--aviso   { background: color-mix(in srgb, var(--cf-aviso) 14%, transparent); color: var(--cf-aviso); border-color: color-mix(in srgb, var(--cf-aviso) 32%, transparent); }
.cf-selo--info    { background: color-mix(in srgb, var(--cf-info) 14%, transparent); color: var(--cf-info); border-color: color-mix(in srgb, var(--cf-info) 32%, transparent); }
.cf-selo--primario { background: color-mix(in srgb, var(--cf-primaria) 16%, transparent); color: var(--cf-primaria-texto); border-color: color-mix(in srgb, var(--cf-primaria) 35%, transparent); }

/* --------------------------------------------------------------- flash */
.cf-flash-pilha { position: fixed; top: 72px; right: 1rem; left: 1rem; z-index: 60; display: flex; flex-direction: column; gap: .5rem; pointer-events: none; }
@media (min-width: 640px) { .cf-flash-pilha { left: auto; max-width: 380px; } }
.cf-flash {
  pointer-events: auto; cursor: pointer;
  background: var(--cf-superficie-2); border: 1px solid var(--cf-borda);
  border-left: 3px solid var(--cf-texto-fraco);
  border-radius: var(--cf-raio-sm); padding: .75rem .9rem;
  box-shadow: var(--cf-sombra); font-size: .9rem;
  animation: cf-entrada .25s ease;
}
@keyframes cf-entrada { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.cf-flash--sucesso { border-left-color: var(--cf-sucesso); }
.cf-flash--erro    { border-left-color: var(--cf-erro); }
.cf-flash--aviso   { border-left-color: var(--cf-aviso); }
.cf-flash--info    { border-left-color: var(--cf-info); }

/* --------------------------------------------------------- navegação painel */
.cf-painel { display: flex; flex: 1; min-height: 0; }
.cf-lateral {
  width: 232px; flex: none; padding: 1rem .75rem;
  border-right: 1px solid var(--cf-borda);
  background: color-mix(in srgb, var(--cf-superficie) 55%, transparent);
}
.cf-lateral__grupo { font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: var(--cf-texto-fraco); margin: 1.1rem .6rem .4rem; }
.cf-nav-item {
  display: flex; align-items: center; gap: .65rem;
  padding: .6rem .7rem; border-radius: var(--cf-raio-sm);
  color: var(--cf-texto-suave); font-size: .92rem; font-weight: 500;
  min-height: 40px; text-decoration: none;
}
.cf-nav-item:hover { background: var(--cf-superficie-2); color: var(--cf-texto); text-decoration: none; }
.cf-nav-item--ativo { background: color-mix(in srgb, var(--cf-primaria) 14%, transparent); color: var(--cf-primaria-texto); }
.cf-nav-item svg { width: 18px; height: 18px; flex: none; }

.cf-area-principal { flex: 1; min-width: 0; padding: 1.25rem; }
@media (max-width: 900px) {
  .cf-lateral { display: none; }
  .cf-lateral--aberta { display: block; position: fixed; top: 60px; bottom: 0; left: 0; z-index: 50; background: var(--cf-fundo); overflow-y: auto; }
  .cf-area-principal { padding: 1rem; }
}

/* ------------------------------------------------ barra inferior do aluno */
.cf-abas {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 45;
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: color-mix(in srgb, var(--cf-fundo) 94%, transparent);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--cf-borda);
  padding-bottom: env(safe-area-inset-bottom);
}
.cf-aba {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .18rem;
  min-height: 58px; font-size: .68rem; font-weight: 600;
  color: var(--cf-texto-fraco); text-decoration: none;
}
.cf-aba:hover { text-decoration: none; }
.cf-aba--ativa { color: var(--cf-primaria-texto); }
.cf-aba svg { width: 21px; height: 21px; }
.cf-com-abas { padding-bottom: 76px; }

/* ---------------------------------------------------------- estado vazio */
.cf-vazio { text-align: center; padding: 2.5rem 1rem; color: var(--cf-texto-suave); }
.cf-vazio svg { width: 44px; height: 44px; color: var(--cf-texto-fraco); margin-bottom: .75rem; }
.cf-vazio h3 { color: var(--cf-texto); }

/* ---------------------------------------------------------------- extras */
.cf-suave { color: var(--cf-texto-suave); }
.cf-fraco { color: var(--cf-texto-fraco); font-size: .85rem; }
.cf-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85rem; }
.cf-divisor { height: 1px; background: var(--cf-borda); margin: 1.25rem 0; border: 0; }
.cf-pilha > * + * { margin-top: 1rem; }
.cf-entre { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.cf-acoes { display: flex; gap: .5rem; flex-wrap: wrap; }

.cf-faixa-impersonate {
  background: var(--cf-aviso); color: #0B0F14;
  padding: .5rem 1rem; font-size: .87rem; font-weight: 600;
  display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap;
}
.cf-faixa-impersonate button { background: #0B0F14; color: var(--cf-aviso); border: 0; border-radius: 6px; padding: .3rem .7rem; font-weight: 600; cursor: pointer; }

.cf-copiavel { display: flex; gap: .5rem; align-items: center; }
.cf-copiavel input { flex: 1; }

/* Landing */
.cf-heroi { padding: 4rem 0 3rem; text-align: center; }
.cf-heroi h1 { font-size: clamp(2rem, 6vw, 3.4rem); letter-spacing: -.04em; }
.cf-heroi p { font-size: 1.1rem; color: var(--cf-texto-suave); max-width: 620px; margin: 1rem auto 2rem; }
.cf-destaque { color: var(--cf-primaria-texto); }
.cf-secao { padding: 3rem 0; }
.cf-secao__titulo { text-align: center; margin-bottom: 2rem; }

@media print {
  .cf-topo, .cf-lateral, .cf-abas, .cf-flash-pilha, .cf-acoes { display: none !important; }
  body { background: #fff; color: #000; }
}

/* =====================================================================
   Execução da sessão de treino (ETAPA 5)
   Desenhado para uma mão só, entre séries: alvo mínimo de 44px, campos
   numéricos grandes e nada que exija precisão de toque.
   ===================================================================== */
.cf-treino__topo {
  position: sticky; top: 0; z-index: 5;
  background: color-mix(in srgb, var(--cf-fundo) 92%, transparent);
  backdrop-filter: blur(8px);
  padding: .7rem 0 .5rem; margin: -.5rem 0 0;
  border-bottom: 1px solid var(--cf-borda);
}
.cf-barra { height: 8px; border-radius: 99px; background: var(--cf-superficie-2); overflow: hidden; }
.cf-barra__preenchimento {
  height: 100%; border-radius: 99px; width: 0;
  background: linear-gradient(90deg, var(--cf-secundaria), var(--cf-primaria));
  transition: width .35s ease;
}

.cf-exercicio { transition: border-color .2s ease, opacity .2s ease; }
.cf-exercicio--feito { border-color: color-mix(in srgb, var(--cf-primaria) 55%, var(--cf-borda)); }
.cf-exercicio__marca {
  width: 26px; height: 26px; flex: 0 0 26px; border-radius: 99px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--cf-borda); color: transparent; font-size: .8rem; font-weight: 700;
}
.cf-exercicio--feito .cf-exercicio__marca {
  background: var(--cf-primaria); border-color: var(--cf-primaria); color: #0B0F14;
}

.cf-series { margin-top: .7rem; display: flex; flex-direction: column; gap: .4rem; }
.cf-serie { display: flex; align-items: end; gap: .5rem; }
.cf-serie__numero {
  width: 28px; height: 44px; flex: 0 0 28px;
  display: flex; align-items: center; justify-content: center;
  color: var(--cf-texto-fraco); font-size: .85rem; font-weight: 600;
}
.cf-serie__campo { flex: 1; min-width: 0; display: block; }
.cf-serie__campo .cf-rotulo { font-size: .65rem; margin-bottom: .1rem; }
.cf-serie__campo .cf-entrada { min-height: 44px; text-align: center; font-size: 1rem; }
.cf-serie__ok {
  width: 46px; height: 44px; flex: 0 0 46px; cursor: pointer;
  border-radius: var(--cf-raio-sm); border: 1px solid var(--cf-borda);
  background: var(--cf-superficie-2); color: var(--cf-texto-fraco);
  font-size: 1.1rem; font-weight: 700;
}
.cf-serie--feita .cf-serie__ok { background: var(--cf-primaria); border-color: var(--cf-primaria); color: #0B0F14; }
.cf-serie--feita .cf-serie__campo .cf-entrada { opacity: .65; }

.cf-selecao--mini { min-height: 34px; padding: .2rem .5rem; font-size: .8rem; width: auto; }

/* Inicial do nome quando não há foto. O tamanho vem inline (varia por
   chamada); cor e véu vivem aqui para o tema claro poder ajustá-los. */
.cf-avatar-inicial {
  border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--cf-primaria) 18%, var(--cf-superficie-2));
  color: var(--cf-primaria-texto); font-weight: 700;
}

.cf-recorde {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--cf-toque) + 1.5rem);
  z-index: 70; padding: .7rem 1.1rem; border-radius: 99px;
  background: var(--cf-primaria); color: #0B0F14; font-weight: 700; font-size: .9rem;
  box-shadow: var(--cf-sombra); max-width: 90vw; text-align: center;
}
.cf-pendentes {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--cf-toque) + .5rem);
  z-index: 65; padding: .4rem .9rem; border-radius: 99px; font-size: .78rem;
  background: var(--cf-aviso); color: #0B0F14; font-weight: 600;
}

/* =====================================================================
   PWA: estado de conexão e convite de instalação (ETAPA 13)
   ===================================================================== */

/* Barra discreta, não alerta: ficar sem rede na academia é rotina, e
   tratar rotina como erro ensina o aluno a ignorar avisos. */
.cf-conexao {
  position: fixed; left: 0; right: 0; z-index: 66;
  bottom: calc(var(--cf-toque) + env(safe-area-inset-bottom));
  padding: .45rem .9rem; font-size: .78rem; font-weight: 600; text-align: center;
  background: var(--cf-superficie-2); color: var(--cf-texto-suave);
  border-top: 1px solid var(--cf-borda);
  transform: translateY(120%); transition: transform .22s ease;
}
.cf-conexao--visivel { transform: translateY(0); }
.cf-conexao--erro { background: color-mix(in srgb, var(--cf-erro) 16%, var(--cf-superficie-2)); color: var(--cf-erro); }

@media (prefers-reduced-motion: reduce) {
  .cf-conexao { transition: none; }
}

/* No desktop não há barra de abas embaixo: a faixa encosta no rodapé. */
@media (min-width: 900px) {
  .cf-conexao { bottom: 0; }
}

.cf-instalar {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  margin-bottom: 1rem; padding: .85rem 1rem; border-radius: 12px;
  background: var(--cf-superficie-2); border: 1px solid var(--cf-borda);
}
.cf-instalar__texto { flex: 1; min-width: 180px; font-size: .88rem; }

/* =====================================================================
   Avaliação física e evolução (ETAPA 6)
   ===================================================================== */
.cf-grafico { width: 100%; height: 200px; display: block; }
.cf-grafico__grade { stroke: var(--cf-borda); stroke-width: 1; stroke-dasharray: 3 4; }
.cf-grafico__eixo { fill: var(--cf-texto-fraco); font-size: 11px; font-family: inherit; }

/* Grade de medidas: cabe 2 no celular, 4 no desktop, sem media query. */
.cf-medidas { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .6rem; }
.cf-medida .cf-rotulo { display: flex; justify-content: space-between; gap: .3rem; font-size: .72rem; }
.cf-medida .cf-entrada { min-height: var(--cf-toque); text-align: center; }
/* Valor herdado da avaliação anterior: aparece, mas pedindo conferência. */
.cf-entrada--herdada { border-style: dashed; color: var(--cf-texto-suave); }

.cf-medidas--leitura { gap: .5rem; }
.cf-medida-lida {
  display: flex; flex-direction: column; gap: .1rem;
  padding: .5rem .6rem; border-radius: var(--cf-raio-sm);
  background: var(--cf-superficie-2);
}
.cf-medida-lida span { font-size: .72rem; }

.cf-deltas { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .55rem; }
.cf-delta {
  padding: .6rem .7rem; border-radius: var(--cf-raio-sm);
  border: 1px solid var(--cf-borda); background: var(--cf-superficie-2);
  display: flex; flex-direction: column; gap: .15rem;
}
.cf-delta__rotulo { font-size: .72rem; color: var(--cf-texto-fraco); }
.cf-delta__valor { font-size: 1.15rem; font-weight: 700; }
.cf-delta__unidade { font-size: .75rem; font-weight: 400; color: var(--cf-texto-fraco); margin-left: .15rem; }
.cf-delta__variacao { font-size: .78rem; font-weight: 600; color: var(--cf-texto-suave); }
/* Verde = melhorou em direção ao objetivo, não simplesmente "aumentou". */
.cf-delta--bom { border-color: color-mix(in srgb, var(--cf-sucesso) 45%, var(--cf-borda)); }
.cf-delta--bom .cf-delta__variacao { color: var(--cf-sucesso); }
.cf-delta--ruim { border-color: color-mix(in srgb, var(--cf-aviso) 45%, var(--cf-borda)); }
.cf-delta--ruim .cf-delta__variacao { color: var(--cf-aviso); }

.cf-barras { display: flex; flex-direction: column; gap: .35rem; }
.cf-barras__linha { display: flex; align-items: center; gap: .5rem; }
.cf-barras__rotulo { font-size: .72rem; color: var(--cf-texto-fraco); width: 42px; flex: 0 0 42px; }
.cf-barras__trilho { flex: 1; height: 10px; border-radius: 99px; background: var(--cf-superficie-2); overflow: hidden; }
.cf-barras__valor { display: block; height: 100%; border-radius: 99px; background: var(--cf-primaria); }
.cf-barras__valor--antes { background: var(--cf-texto-fraco); }
.cf-barras__numero { font-size: .78rem; font-weight: 600; width: 72px; text-align: right; }

/* Fotos de progresso */
.cf-comparador { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.cf-comparador figure { margin: 0; }
.cf-comparador img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: var(--cf-raio-sm); background: var(--cf-superficie-2);
}
.cf-comparador figcaption { font-size: .75rem; color: var(--cf-texto-fraco); text-align: center; padding-top: .3rem; }

.cf-tiras { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .6rem; }
.cf-tira { margin: 0; display: flex; flex-direction: column; gap: .25rem; }
.cf-tira img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: var(--cf-raio-sm); border: 2px solid transparent;
  background: var(--cf-superficie-2);
}
/* Compartilhada fica visualmente distinta: o aluno precisa saber, sempre. */
.cf-tira--compartilhada img { border-color: var(--cf-secundaria); }
.cf-tira figcaption { font-size: .72rem; color: var(--cf-texto-fraco); text-align: center; }
.cf-tira__acoes { display: flex; gap: .25rem; justify-content: center; }

/* =====================================================================
   Nutrição (ETAPA 7)
   ===================================================================== */
.cf-aneis { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: .5rem; }
.cf-anel { position: relative; display: flex; flex-direction: column; align-items: center; gap: .2rem; }
.cf-anel svg { width: 72px; height: 72px; transform: rotate(-90deg); }
.cf-anel__trilho { fill: none; stroke: var(--cf-superficie-2); stroke-width: 7; }
.cf-anel__valor { fill: none; stroke-width: 7; stroke-linecap: round; transition: stroke-dasharray .4s ease; }
.cf-anel__centro {
  position: absolute; top: 24px; left: 0; right: 0;
  text-align: center; font-size: .8rem; font-weight: 700; pointer-events: none;
}
.cf-anel__legenda { text-align: center; font-size: .72rem; line-height: 1.25; }
.cf-anel__legenda strong { display: block; font-size: .78rem; }
/* Estourar a meta é informação: o anel muda de cor em vez de sumir. */
.cf-anel--estourou .cf-anel__centro { color: var(--cf-aviso); }

.cf-registro { padding: .35rem 0; border-bottom: 1px solid color-mix(in srgb, var(--cf-borda) 40%, transparent); }
.cf-registro:last-child { border-bottom: 0; }

.cf-alimento {
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem 0; border-bottom: 1px solid color-mix(in srgb, var(--cf-borda) 45%, transparent);
}
.cf-alimento__nome { flex: 1; min-width: 0; font-size: .88rem; }
.cf-alimento__qtd { width: 74px; flex: 0 0 74px; min-height: var(--cf-toque); text-align: center; }
.cf-alimento--adicionado { opacity: .5; }

/* Autocomplete do editor de plano */
.cf-busca-alimento__lista { display: flex; flex-direction: column; gap: 2px; margin-top: .25rem; }
.cf-busca-alimento__opcao {
  text-align: left; cursor: pointer; font-size: .82rem;
  padding: .45rem .6rem; border-radius: var(--cf-raio-sm);
  border: 1px solid var(--cf-borda); background: var(--cf-superficie-2); color: var(--cf-texto);
}
.cf-busca-alimento__opcao:hover { border-color: var(--cf-primaria); }

/* Grupos de substituição: "no lugar de X, pode Y ou Z" */
.cf-substituicao {
  border: 1px dashed var(--cf-borda); border-radius: var(--cf-raio-sm);
  padding: .6rem .7rem; display: flex; flex-direction: column; gap: .4rem;
}
.cf-substituicao__titulo {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--cf-texto-fraco);
}
.cf-substituicao__item { display: flex; gap: .5rem; align-items: baseline; }
.cf-substituicao__ou { font-size: .72rem; flex: 0 0 auto; }

/* =====================================================================
   Aulas coletivas e agenda (ETAPA 8)
   ===================================================================== */
.cf-bolinha {
  display: inline-block; width: 10px; height: 10px; border-radius: 99px;
  vertical-align: baseline; margin-right: .3rem;
}

.cf-aula {
  border-left: 3px solid var(--cf-primaria);
  padding: .55rem 0 .55rem .7rem;
}

/* Grade semanal: rola na horizontal no celular em vez de espremer. */
.cf-grade-semanal {
  display: grid; grid-template-columns: repeat(7, minmax(130px, 1fr));
  gap: .4rem; overflow-x: auto; padding-bottom: .3rem;
}
.cf-grade-semanal__dia { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.cf-grade-semanal__cabecalho {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--cf-texto-fraco); text-align: center; padding-bottom: .2rem;
  border-bottom: 1px solid var(--cf-borda);
}
.cf-grade-semanal__aula {
  display: flex; flex-direction: column; gap: .1rem;
  padding: .45rem .55rem; border-radius: var(--cf-raio-sm);
  background: var(--cf-superficie-2); border-left: 3px solid var(--cf-primaria);
  font-size: .78rem;
}
.cf-grade-semanal__aula strong { font-size: .82rem; }

/* Slots da agenda: alvo grande, é escolha de horário no celular. */
.cf-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: .5rem; }
.cf-slot {
  width: 100%; min-height: 60px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem;
  border-radius: var(--cf-raio-sm); border: 1px solid var(--cf-borda);
  background: var(--cf-superficie-2); color: var(--cf-texto);
}
.cf-slot:hover { border-color: var(--cf-primaria); }
.cf-slot strong { font-size: 1.05rem; }
.cf-slot span { font-size: .72rem; color: var(--cf-texto-fraco); }
.cf-slot__valor { color: var(--cf-primaria-texto) !important; font-weight: 600; }

/* =====================================================================
   Gamificação e bonificação (ETAPAS 9 e 9B)
   ===================================================================== */
.cf-conquistas { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: .5rem; }
.cf-conquista {
  display: flex; flex-direction: column; align-items: center; gap: .15rem;
  padding: .6rem .4rem; text-align: center;
  border-radius: var(--cf-raio-sm); border: 1px solid var(--cf-borda);
  background: var(--cf-superficie-2);
  /* Não conquistada fica apagada, mas visível: saber o que existe é
     parte do estímulo. */
  opacity: .45; filter: grayscale(1);
}
.cf-conquista--obtida { opacity: 1; filter: none; border-color: color-mix(in srgb, var(--cf-primaria) 45%, var(--cf-borda)); }
.cf-conquista__icone { font-size: 1.5rem; line-height: 1; }
.cf-conquista__nome { font-size: .7rem; line-height: 1.2; }

.cf-ranking--eu {
  background: color-mix(in srgb, var(--cf-primaria) 10%, transparent);
  border-radius: var(--cf-raio-sm); padding: .3rem .5rem; margin: 0 -.5rem;
}

/* =====================================================================
   Comunicação (ETAPA 14) — sino, central de notificações e mural
   ===================================================================== */

/* O sino é um alvo de toque de 40px: no celular ele fica ao lado do
   seletor de contexto, e um ícone de 19px sem área de toque em volta é
   impossível de acertar com o dedo. */
.cf-sino {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex: none;
  border-radius: var(--cf-raio-sm); border: 1px solid transparent;
  color: var(--cf-texto-suave); text-decoration: none;
}
.cf-sino:hover { background: var(--cf-superficie-2); color: var(--cf-texto); border-color: var(--cf-borda); }
.cf-sino:focus-visible { outline: 2px solid var(--cf-primaria); outline-offset: 2px; }

/* O contador mostra "9+" no lugar do número exato acima de 9: a largura
   do selo é fixa, e "137" estouraria o botão. */
.cf-sino__contador {
  position: absolute; top: 1px; right: 1px;
  min-width: 17px; height: 17px; padding: 0 4px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px; border: 2px solid var(--cf-fundo);
  /* `--cf-sobre-primaria`, não `--cf-fundo`: o texto aqui está sobre o
     LIMA, não sobre a página. No tema escuro os dois valores coincidem, e
     por isso o defeito ficou latente — no claro, `--cf-fundo` é branco e o
     contador virava branco sobre lima (1,2:1, ilegível). */
  background: var(--cf-primaria); color: var(--cf-sobre-primaria);
  font-size: .62rem; font-weight: 800; line-height: 1;
}

.cf-lista-notificacoes { list-style: none; margin: 0; padding: 0; }
.cf-notificacao {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: .85rem 1rem;
  border-bottom: 1px solid color-mix(in srgb, var(--cf-borda) 55%, transparent);
}
.cf-notificacao:last-child { border-bottom: 0; }
.cf-notificacao__corpo { flex: 1; min-width: 0; }
.cf-notificacao__topo { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .3rem; }
.cf-notificacao__topo time { font-size: .75rem; }
.cf-notificacao__titulo { display: block; font-weight: 600; color: var(--cf-texto); text-decoration: none; }
a.cf-notificacao__titulo:hover { color: var(--cf-primaria-texto); }
.cf-notificacao__corpo p { margin: .2rem 0 0; font-size: .85rem; }

/* Não lida ganha uma barra à esquerda em vez de fundo colorido: numa
   lista de 60 itens, fundo em metade deles vira listra de zebra e para
   de comunicar "novo". */
.cf-notificacao--nova { box-shadow: inset 3px 0 0 var(--cf-primaria); }

.cf-filtros { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.cf-filtros .cf-selecao { max-width: 220px; }

.cf-lista-simples { list-style: none; margin: .5rem 0 0; padding: 0; font-size: .85rem; }
.cf-lista-simples li + li { margin-top: .4rem; }
.cf-lista-simples code {
  background: var(--cf-superficie-2); border: 1px solid var(--cf-borda);
  border-radius: 4px; padding: .05rem .3rem; font-size: .8rem;
}

/* A prévia roda em iframe com sandbox vazio: o HTML é do tenant, e o
   painel não empresta origem para ele. */
.cf-previa-email {
  width: 100%; height: 420px; border: 1px solid var(--cf-borda);
  border-radius: var(--cf-raio-sm); background: #0B0F14;
}

/* Checkbox sozinho na célula da tabela: sem o rótulo ao lado, o flex-start
   do .cf-check deixaria ele encostado na borda esquerda. */
.cf-check--solo { display: inline-flex; justify-content: center; }

/* Rótulo só para leitor de tela. A célula da tabela mostra o contexto
   visualmente pelo cabeçalho da coluna, mas quem navega por teclado ouve
   só "caixa de seleção" sem isto. */
.cf-oculto-visual {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* =====================================================================
   Relatórios (ETAPA 15)
   ===================================================================== */
.cf-indicador { display: flex; flex-direction: column; gap: .2rem; padding: .85rem 1rem; }
.cf-indicador__rotulo {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--cf-texto-fraco);
}
.cf-indicador__valor { font-size: 1.35rem; font-weight: 800; line-height: 1.15; color: var(--cf-texto); }

/* Número alinhado à direita e tabular: coluna de valor com dígitos de
   larguras diferentes não deixa comparar duas linhas de olho. */
.cf-numero { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

.cf-filtros-relatorio {
  display: flex; gap: .75rem; align-items: flex-end; flex-wrap: wrap; margin-bottom: 1rem;
}
.cf-filtros-relatorio .cf-campo { margin: 0; min-width: 150px; }
.cf-campo--acao { display: flex; align-items: flex-end; }

/* O relatório é feito para virar papel: a tabela imprime inteira, sem os
   botões e sem o menu lateral. */
@media print {
  .cf-lateral, .cf-topo, .cf-abas, .cf-acoes, .cf-filtros-relatorio,
  .cf-faixa-impersonate, .cf-conexao, .cf-instalar { display: none !important; }
  .cf-area-principal, .cf-conteudo { padding: 0 !important; }
  .cf-cartao { border: 1px solid #ccc !important; break-inside: avoid; }
  .cf-tabela-rolagem { overflow: visible !important; }
  .cf-tabela { font-size: 9pt; }
  .cf-tabela thead { display: table-header-group; }
  .cf-tabela tr { break-inside: avoid; }
}