/* ============================================================================
   LeoGym · painel (PHP)
   ----------------------------------------------------------------------------
   Só layout. Nenhuma cor literal mora aqui: toda cor vem de tokens.css, que é
   cópia byte a byte do arquivo que já governava o painel em React (md5
   conferido no deploy). Duas fontes de cor viram dois amarelos.

   As regras não negociáveis da identidade (texto preto sobre amarelo, foco
   visível, tabular-nums em número, conteúdo largo rolando no próprio
   container) estão implementadas abaixo, não só citadas.
   ============================================================================ */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--lg-bg);
  color: var(--lg-text);
  font-family: var(--lg-font-ui);
  font-size: var(--lg-size-body);
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

.lg-oculto {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.lg-pular {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--lg-brand-primary);
  color: #0B0B0D;
  padding: var(--lg-space-3) var(--lg-space-4);
  z-index: 10;
}
.lg-pular:focus { left: 0; }

/* --- estrutura ----------------------------------------------------------- */
.lg-app {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  min-height: 100vh;
}

@media (max-width: 860px) {
  .lg-app { grid-template-columns: minmax(0, 1fr); }
}

/* --- menu lateral -------------------------------------------------------- */
/* Preto nos dois temas. É assinatura de marca, não consequência do tema. */
.lg-nav {
  background: var(--lg-nav-bg);
  color: var(--lg-nav-text);
  display: flex;
  flex-direction: column;
  gap: var(--lg-space-5);
  padding: var(--lg-space-6) var(--lg-space-4);
  border-right: 1px solid var(--lg-nav-border);
}

.lg-nav-marca {
  display: flex;
  align-items: center;
  gap: var(--lg-space-3);
  font-family: var(--lg-font-display);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.01em;
}

.lg-nav-logo {
  display: inline-grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--lg-brand-primary);
  color: #0B0B0D;              /* regra 1 da identidade */
  font-size: 13px;
  font-weight: 800;
}

.lg-nav-academia {
  font-size: var(--lg-size-meta);
  color: var(--lg-nav-text-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lg-nav-itens { display: flex; flex-direction: column; gap: var(--lg-space-1); }

.lg-nav-item {
  display: block;
  padding: var(--lg-space-3) var(--lg-space-3);
  border-radius: var(--lg-radius-btn);
  color: var(--lg-nav-text-2);
  text-decoration: none;
  font-weight: 500;
}
.lg-nav-item:hover { background: var(--lg-nav-surface); color: var(--lg-nav-text); }

.lg-nav-item--ativo {
  background: var(--lg-nav-surface);
  color: var(--lg-nav-text);
  /* A barra amarela marca a página atual sem depender só de cor de texto. */
  box-shadow: inset 3px 0 0 var(--lg-brand-primary);
}

.lg-nav-rodape {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--lg-space-3);
  border-top: 1px solid var(--lg-nav-border);
  padding-top: var(--lg-space-4);
}

.lg-nav-usuario { display: flex; align-items: center; gap: var(--lg-space-3); min-width: 0; }
.lg-nav-usuario-nome {
  font-size: var(--lg-size-table);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.lg-avatar {
  display: inline-grid; place-items: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--lg-nav-surface);
  border: 1px solid var(--lg-nav-border);
  font-size: 12px; font-weight: 700;
  flex: 0 0 auto;
}

.lg-sair {
  background: none;
  border: 1px solid var(--lg-nav-border);
  color: var(--lg-nav-text-2);
  border-radius: var(--lg-radius-btn);
  padding: var(--lg-space-2) var(--lg-space-3);
  font: inherit;
  font-size: var(--lg-size-meta);
  cursor: pointer;
  width: 100%;
}
.lg-sair:hover { color: var(--lg-nav-text); border-color: var(--lg-nav-text-2); }

/* --- conteúdo ------------------------------------------------------------ */
.lg-main {
  padding: var(--lg-space-8);
  display: flex;
  flex-direction: column;
  gap: var(--lg-space-6);
  min-width: 0;      /* sem isto, a tabela larga estica o grid inteiro */
}

@media (max-width: 860px) {
  .lg-main { padding: var(--lg-space-4); }
}

/* --- faixa de saúde da coleta -------------------------------------------- */
.lg-faixa {
  border-radius: var(--lg-radius-card);
  padding: var(--lg-space-4) var(--lg-space-5);
  border: 1px solid var(--lg-border-soft);
  display: flex;
  flex-direction: column;
  gap: var(--lg-space-3);
}
.lg-faixa--ok     { background: var(--lg-success-bg); border-color: var(--lg-success); }
.lg-faixa--aviso  { background: var(--lg-warning-bg); border-color: var(--lg-warning); }

.lg-faixa-texto { margin: 0; font-size: var(--lg-size-table); }
.lg-faixa-meta  { color: var(--lg-text-2); }
.lg-faixa--ok .lg-faixa-texto    { color: var(--lg-success); }
.lg-faixa--aviso .lg-faixa-texto { color: var(--lg-warning); }

.lg-equips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--lg-space-2); }

.lg-equip {
  display: flex; align-items: baseline; gap: var(--lg-space-2);
  background: var(--lg-surface);
  border: 1px solid var(--lg-border-soft);
  border-radius: var(--lg-radius-pill);
  padding: var(--lg-space-2) var(--lg-space-3);
  font-size: var(--lg-size-meta);
}
/* Estado tem rótulo E marca gráfica, nunca só cor (regra 3). */
.lg-equip--ok::before   { content: "●"; color: var(--lg-success); }
.lg-equip--mudo::before { content: "▲"; color: var(--lg-warning); }
.lg-equip-nome   { font-weight: 600; color: var(--lg-text); }
.lg-equip-estado { color: var(--lg-text-2); }
.lg-equip-quando { color: var(--lg-text-3); font-variant-numeric: tabular-nums; }

/* --- cartões de indicador ------------------------------------------------ */
.lg-cartoes {
  display: grid;
  /* auto-fit + minmax: as colunas cabem sem sobra, e nenhum cartão fica
     esticado sozinho numa linha. */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--lg-space-4);
}

.lg-cartao {
  background: var(--lg-surface);
  border: 1px solid var(--lg-border-soft);
  border-radius: var(--lg-radius-card);
  padding: var(--lg-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--lg-space-1);
}
/* Só o cartão que precisa de atenção ganha tinta. Borda em todos achataria a
   hierarquia e o alerta deixaria de aparecer. */
.lg-cartao--alerta { border-left: 4px solid var(--lg-warning); }
.lg-cartao--ok     { border-left: 4px solid var(--lg-success); }

.lg-cartao-rotulo {
  margin: 0;
  font-family: var(--lg-font-ui);
  font-size: var(--lg-size-meta);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--lg-text-2);
}

.lg-cartao-valor {
  margin: 0;
  font-family: var(--lg-font-display);
  font-size: 34px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.lg-cartao-apoio { margin: 0; font-size: var(--lg-size-meta); color: var(--lg-text-3); }

.lg-nota {
  margin: 0;
  font-size: var(--lg-size-table);
  color: var(--lg-text-2);
  background: var(--lg-neutral-bg);
  border-radius: var(--lg-radius-btn);
  padding: var(--lg-space-3) var(--lg-space-4);
}
/* termos da matrícula online: texto longo rola dentro da caixa */
.lg-termos { max-height: 16rem; overflow-y: auto; line-height: 1.5; }

/* --- bloco genérico ------------------------------------------------------ */
.lg-bloco {
  background: var(--lg-surface);
  border: 1px solid var(--lg-border-soft);
  border-radius: var(--lg-radius-card);
  padding: var(--lg-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--lg-space-4);
  min-width: 0;
}

.lg-bloco-titulo {
  margin: 0;
  font-family: var(--lg-font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.lg-bloco-apoio { margin: 0; font-size: var(--lg-size-meta); color: var(--lg-text-2); }
.lg-vazio       { margin: 0; font-size: var(--lg-size-table); color: var(--lg-text-2); }

/* --- mapa de calor ------------------------------------------------------- */
/* Regra 7: conteúdo largo rola no próprio container. */
.lg-mapa-rolagem { overflow-x: auto; }

.lg-mapa {
  border-collapse: separate;
  border-spacing: 2px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.lg-mapa-canto { width: 40px; }

.lg-mapa-hora {
  width: 26px;
  font-weight: 500;
  color: var(--lg-text-3);
  font-size: 10px;
  padding: 0 0 var(--lg-space-1);
  text-align: center;
}

.lg-mapa-dia {
  width: 40px;
  text-align: right;
  padding-right: var(--lg-space-2);
  font-weight: 600;
  font-size: var(--lg-size-meta);
  color: var(--lg-text-2);
  white-space: nowrap;
}

.lg-celula {
  width: 26px; height: 26px;
  border-radius: 4px;
  text-align: center;
  vertical-align: middle;
  color: var(--lg-heat-ink-baixo);
}

.lg-celula--0 { background: var(--lg-heat-0); }
.lg-celula--1 { background: var(--lg-heat-1); }
.lg-celula--2 { background: var(--lg-heat-2); }
/* Corte no nível 3: dali para cima o fundo é claro o bastante para pedir
   tinta escura, e no tema escuro os níveis baixos pedem tinta clara. */
.lg-celula--3 { background: var(--lg-heat-3); color: var(--lg-heat-ink-alto); }
.lg-celula--4 { background: var(--lg-heat-4); color: var(--lg-heat-ink-alto); }
.lg-celula--5 { background: var(--lg-heat-5); color: var(--lg-heat-ink-alto); }

.lg-legenda {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--lg-space-1);
  font-size: var(--lg-size-meta);
  color: var(--lg-text-3);
}
.lg-legenda-caixa { width: 18px; height: 12px; border-radius: 3px; display: inline-block; }

/* --- tela de entrada ----------------------------------------------------- */
.lg-corpo-entrada {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: var(--lg-space-4);
}

.lg-entrada {
  width: 100%;
  max-width: 380px;
  background: var(--lg-surface);
  border: 1px solid var(--lg-border-soft);
  border-radius: var(--lg-radius-card);
  padding: var(--lg-space-8);
  display: flex;
  flex-direction: column;
  gap: var(--lg-space-5);
}

.lg-entrada-marca {
  display: flex; align-items: center; gap: var(--lg-space-3);
  font-family: var(--lg-font-display); font-weight: 800; font-size: 18px;
}

.lg-entrada-titulo {
  margin: 0;
  font-family: var(--lg-font-display);
  font-size: 22px; font-weight: 700; letter-spacing: -0.01em;
}

.lg-entrada-erro {
  margin: 0;
  background: var(--lg-error-bg);
  color: var(--lg-error);
  border: 1px solid var(--lg-error);
  border-radius: var(--lg-radius-btn);
  padding: var(--lg-space-3) var(--lg-space-4);
  font-size: var(--lg-size-table);
}

.lg-entrada-form { display: flex; flex-direction: column; gap: var(--lg-space-4); }

.lg-campo { display: flex; flex-direction: column; gap: var(--lg-space-2); }

.lg-campo-rotulo {
  font-size: var(--lg-size-meta);
  font-weight: 500;
  color: var(--lg-text-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.lg-campo-controle {
  height: var(--lg-control-h);
  padding: 0 var(--lg-space-3);
  border: 1px solid var(--lg-border);
  border-radius: var(--lg-radius-btn);
  background: var(--lg-surface-2);
  color: var(--lg-text);
  font: inherit;
  font-size: var(--lg-size-body);
}

.lg-botao {
  height: var(--lg-control-h);
  border: none;
  border-radius: var(--lg-radius-btn);
  font: inherit;
  font-family: var(--lg-font-display);
  font-weight: 700;
  font-size: var(--lg-size-body);
  cursor: pointer;
}

.lg-entrada-nota { margin: 0; font-size: var(--lg-size-meta); color: var(--lg-text-3); }

/* ============================================================================
   LeoGym · painel Fase 1 (Alunos, Presença, Catracas) · identidade unificada
   App claro (área de trabalho), menu preto, amarelo na ação. Toda cor vem dos
   tokens; nada de hex solto.
   ============================================================================ */

/* Logo real no menu, no lugar do "LG" de texto. O PNG é o wordmark horizontal
   desenhado para fundo escuro — cai bem no menu preto. */
.lg-nav-logo-img {
  width: 100%;
  max-width: 180px;
  height: auto;
  display: block;
}

/* --- cabeçalho de tela --------------------------------------------------- */
.lg-cabecalho-tela {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--lg-space-4);
  flex-wrap: wrap;
}
.lg-titulo {
  margin: 0;
  font-family: var(--lg-font-display);
  font-size: 26px; font-weight: 800; letter-spacing: -0.02em;
}
.lg-subtitulo { margin: 2px 0 0; font-size: var(--lg-size-meta); color: var(--lg-text-2); }
.lg-subtitulo a { color: var(--lg-info); }

/* --- aviso / flash ------------------------------------------------------- */
.lg-flash {
  background: var(--lg-success-bg); color: var(--lg-success);
  border: 1px solid var(--lg-success);
  border-radius: var(--lg-radius-btn);
  padding: var(--lg-space-3) var(--lg-space-4);
  font-size: var(--lg-size-table);
}
.lg-flash--erro { background: var(--lg-error-bg); color: var(--lg-error); border-color: var(--lg-error); }

/* --- botões (variações) -------------------------------------------------- */
.lg-botao {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--lg-space-2);
  min-height: var(--lg-control-h);
  padding: 0 var(--lg-space-5);
  border: 1px solid transparent;
  border-radius: var(--lg-radius-btn);
  font: inherit; font-family: var(--lg-font-display); font-weight: 700;
  font-size: var(--lg-size-table);
  cursor: pointer; text-decoration: none;
}
.lg-botao--acao { flex: 0 0 auto; }
.lg-botao--secundario {
  background: var(--lg-surface); color: var(--lg-text);
  border-color: var(--lg-border);
}
.lg-botao--secundario:hover { border-color: var(--lg-text-3); }

/* --- busca + chips de filtro -------------------------------------------- */
.lg-busca { display: flex; gap: var(--lg-space-2); margin-bottom: var(--lg-space-3); }
.lg-busca .lg-campo-controle { flex: 1; }
.lg-chips { display: flex; gap: var(--lg-space-2); margin-bottom: var(--lg-space-4); flex-wrap: wrap; }
.lg-chip {
  padding: var(--lg-space-1) var(--lg-space-3);
  border: 1px solid var(--lg-border);
  border-radius: var(--lg-radius-pill);
  font-size: var(--lg-size-meta); color: var(--lg-text-2);
  text-decoration: none; background: var(--lg-surface);
}
.lg-chip--ativo { background: var(--lg-text); color: var(--lg-surface); border-color: var(--lg-text); }

/* --- tabela -------------------------------------------------------------- */
.lg-tabela-rolagem { overflow-x: auto; }
.lg-tabela { width: 100%; border-collapse: collapse; font-size: var(--lg-size-table); }
.lg-tabela th {
  text-align: left; font-weight: 600; color: var(--lg-text-2);
  font-size: var(--lg-size-meta); text-transform: uppercase; letter-spacing: 0.04em;
  padding: var(--lg-space-2) var(--lg-space-3);
  border-bottom: 1px solid var(--lg-border);
  white-space: nowrap;
}
.lg-tabela td {
  padding: var(--lg-space-3);
  border-bottom: 1px solid var(--lg-border-soft);
  vertical-align: middle;
}
.lg-tabela tbody tr:hover { background: var(--lg-surface-2); }
.lg-cel-apoio { color: var(--lg-text-3); font-size: var(--lg-size-meta); }
.lg-cel-acao { text-align: right; white-space: nowrap; }
.lg-link-acao { color: var(--lg-info); font-weight: 500; text-decoration: none; }
.lg-link-acao:hover { text-decoration: underline; }
.lg-vazio-cel { text-align: center; color: var(--lg-text-3); padding: var(--lg-space-8) var(--lg-space-3); }

.lg-pessoa { display: inline-flex; align-items: center; gap: var(--lg-space-2); font-weight: 500; }
.lg-avatar-mini {
  display: inline-grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--lg-neutral-bg); color: var(--lg-text-2);
  font-size: 11px; font-weight: 700; flex: 0 0 auto;
}

/* --- tags/badges --------------------------------------------------------- */
.lg-tag {
  display: inline-block;
  padding: 2px var(--lg-space-2);
  border-radius: var(--lg-radius-pill);
  font-size: var(--lg-size-meta); font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.lg-tag--ok      { background: var(--lg-success-bg); color: var(--lg-success); }
.lg-tag--info    { background: var(--lg-info-bg);    color: var(--lg-info); }
.lg-tag--alerta  { background: var(--lg-warning-bg); color: var(--lg-warning); }
.lg-tag--neutro  { background: var(--lg-neutral-bg); color: var(--lg-text-2); }
.lg-tag--vazio   { background: transparent; color: var(--lg-text-3); border: 1px dashed var(--lg-border); font-weight: 500; }

/* --- paginação ----------------------------------------------------------- */
.lg-paginacao { display: flex; align-items: center; gap: var(--lg-space-3); margin-top: var(--lg-space-4); }
.lg-paginacao-meta { font-size: var(--lg-size-meta); color: var(--lg-text-3); }

/* --- formulário ---------------------------------------------------------- */
.lg-bloco--form { max-width: 820px; }
.lg-form { display: flex; flex-direction: column; gap: var(--lg-space-4); }
.lg-form-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--lg-space-4);
}
.lg-campo--largo { grid-column: 1 / -1; }
.lg-campo--check { flex-direction: row; align-items: center; gap: var(--lg-space-2); font-size: var(--lg-size-table); }
.lg-campo-ajuda { font-size: var(--lg-size-meta); color: var(--lg-text-3); }
.lg-campo-erro { font-size: var(--lg-size-meta); color: var(--lg-error); font-weight: 500; }
.lg-form-acoes { display: flex; gap: var(--lg-space-3); flex-wrap: wrap; }
textarea.lg-campo-controle { height: auto; padding: var(--lg-space-3); resize: vertical; font-family: var(--lg-font-ui); }

/* --- em construção / listas ---------------------------------------------- */
.lg-embreve { display: flex; flex-direction: column; gap: var(--lg-space-3); align-items: flex-start; }
.lg-lista-simples { margin: 0; padding-left: var(--lg-space-5); color: var(--lg-text-2); font-size: var(--lg-size-table); line-height: 1.8; }

/* --- Fase 2: financeiro/planos ------------------------------------------- */
select.lg-campo-controle {
  height: var(--lg-control-h);
  padding: 0 var(--lg-space-3);
  background: var(--lg-surface-2);
  color: var(--lg-text);
  border: 1px solid var(--lg-border);
  border-radius: var(--lg-radius-btn);
  font: inherit; font-size: var(--lg-size-body);
}
.lg-botao--mini { min-height: 34px; padding: 0 var(--lg-space-3); font-size: var(--lg-size-meta); }
.lg-select-mini {
  height: 34px; padding: 0 var(--lg-space-2);
  border: 1px solid var(--lg-border); border-radius: var(--lg-radius-btn);
  background: var(--lg-surface); color: var(--lg-text);
  font: inherit; font-size: var(--lg-size-meta);
}
/* Baixa: select de forma de pagamento + botão, na mesma linha da cobrança. */
.lg-baixa { display: inline-flex; gap: var(--lg-space-2); align-items: center; justify-content: flex-end; }
/* O valor financeiro alinha à direita com tabular-nums (regra da identidade). */
th.lg-money, td.lg-money { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* --- Fase 3: retenção/CRM ------------------------------------------------ */
.lg-inline-form { display: inline-block; margin: 0; }
.lg-inline-form + .lg-inline-form { margin-left: var(--lg-space-2); }

/* --- Fase 4: agenda/metas ------------------------------------------------ */
.lg-agendar { margin-top: var(--lg-space-4); padding-top: var(--lg-space-4); border-top: 1px solid var(--lg-border-soft); }
.lg-form-linha { display: flex; gap: var(--lg-space-2); flex-wrap: wrap; align-items: center; }
.lg-form-linha .lg-select-mini { min-width: 160px; }
/* barra de progresso da meta */
.lg-barra { height: 8px; border-radius: 4px; background: var(--lg-neutral-bg); overflow: hidden; margin-top: var(--lg-space-2); }
.lg-barra-preenche { display: block; height: 100%; border-radius: 4px; }
.lg-barra--ok     { background: var(--lg-success); }
.lg-barra--info   { background: var(--lg-brand-primary); }
.lg-barra--alerta { background: var(--lg-warning); }
/* Largura por classe, em degraus de 5%: a CSP (style-src 'self') ignora estilo
   inline, e com ele a barra saía vazia. Quem monta é Pagina::barra(). */
.lg-largura-0  { width: 0; }    .lg-largura-5  { width: 5%; }   .lg-largura-10 { width: 10%; }
.lg-largura-15 { width: 15%; }  .lg-largura-20 { width: 20%; }  .lg-largura-25 { width: 25%; }
.lg-largura-30 { width: 30%; }  .lg-largura-35 { width: 35%; }  .lg-largura-40 { width: 40%; }
.lg-largura-45 { width: 45%; }  .lg-largura-50 { width: 50%; }  .lg-largura-55 { width: 55%; }
.lg-largura-60 { width: 60%; }  .lg-largura-65 { width: 65%; }  .lg-largura-70 { width: 70%; }
.lg-largura-75 { width: 75%; }  .lg-largura-80 { width: 80%; }  .lg-largura-85 { width: 85%; }
.lg-largura-90 { width: 90%; }  .lg-largura-95 { width: 95%; }  .lg-largura-100 { width: 100%; }

/* --- Fase 5A: treinos/fichas --------------------------------------------- */
.lg-bloco-cabecalho { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--lg-space-3); }
.lg-treino-divisao { margin: var(--lg-space-4) 0 var(--lg-space-2); font: 700 var(--lg-size-meta)/1.2 var(--lg-font-display);
  text-transform: uppercase; letter-spacing: .04em; color: var(--lg-text-2); }
.lg-tabela--compacta td { padding-top: var(--lg-space-2); padding-bottom: var(--lg-space-2); }
.lg-treino-add { margin-top: var(--lg-space-4); padding-top: var(--lg-space-4); border-top: 1px solid var(--lg-border-soft); }
.lg-link-perigo { color: var(--lg-error); }
/* Formulário em linha: adicionar exercício com muitos campos curtos. */
.lg-form--linha .lg-form-grade,
.lg-form--linha { display: flex; flex-wrap: wrap; gap: var(--lg-space-3); align-items: flex-end; }
.lg-form--linha .lg-form-acoes { margin: 0; }
.lg-campo--mini { flex: 0 0 92px; min-width: 72px; }
.lg-form--linha .lg-campo--largo { flex: 1 1 200px; }

/* --- Fase 5B: portal do aluno -------------------------------------------- */
.lg-corpo-portal { background: var(--lg-bg); color: var(--lg-text); margin: 0; }
.lg-portal-topo { display: flex; justify-content: space-between; align-items: center; gap: var(--lg-space-4);
  padding: var(--lg-space-3) var(--lg-space-5); background: var(--lg-nav-bg); border-bottom: 1px solid var(--lg-nav-border); }
.lg-portal-topo .lg-nav-logo-img { height: 26px; width: auto; }
.lg-portal-quem { display: flex; align-items: center; gap: var(--lg-space-3); }
.lg-portal-academia { color: var(--lg-nav-text-2); font-size: var(--lg-size-meta); }
.lg-portal-nome { color: var(--lg-nav-text); font-weight: 600; font-size: var(--lg-size-meta); }
.lg-portal-main { max-width: 980px; margin: 0 auto; padding: var(--lg-space-6) var(--lg-space-5);
  display: flex; flex-direction: column; gap: var(--lg-space-5); }
.lg-portal-colunas { display: grid; grid-template-columns: 1fr 1fr; gap: var(--lg-space-5); align-items: start; }
@media (max-width: 720px) { .lg-portal-colunas { grid-template-columns: 1fr; } }

/* --- Fase 7C: relatórios -------------------------------------------------- */
/* Dinheiro e contagem alinhados à direita, com algarismos de mesma largura. */
.lg-cel-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* --- Fase 7D: portal com aulas e app instalável ---------------------------- */
/* Botão com display próprio ignora o atributo hidden; o painel.js depende dele. */
[hidden] { display: none !important; }
.lg-portal-nav { display: flex; gap: var(--lg-space-4); }
.lg-portal-nav a { color: var(--lg-nav-text-2); text-decoration: none; font-weight: 600; font-size: var(--lg-size-meta);
  padding: var(--lg-space-2) 0; border-bottom: 2px solid transparent; }
.lg-portal-nav a:hover { color: var(--lg-nav-text); }
.lg-portal-nav a[aria-current="page"] { color: var(--lg-nav-text); border-bottom-color: var(--lg-brand-primary); }
@media (max-width: 720px) {
  .lg-portal-topo { flex-wrap: wrap; row-gap: var(--lg-space-2); }
  .lg-portal-academia { display: none; }
}
.lg-flash--erro { background: var(--lg-error-bg); color: var(--lg-error); }