/* =====================================================================================================
   Base visual Legacy 6.0 — catálogo de peças (1.F)
   - Usa só as variáveis de tokens.css (importe tokens.css antes deste arquivo).
   - Todas as classes começam com "lg-" para não colidir com o CSS antigo (style.css, tc.css, wp3.css,
     portal-app.css, public/css/*). Nenhuma regra solta em elemento fora de .lg-base.
   - Estados: padrão, pressionado (:active), foco visível (:focus-visible), desativado (:disabled /
     aria-disabled), carregando (aria-busy="true") e erro (aria-invalid="true" / --erro).
   - Pontos de quebra: celular ≤ 767 | tablet 768–1023 | PC ≥ 1024 | PC largo ≥ 1440.
   - Sem !important, exceto em @media print e na classe .lg-so-leitor (comentado onde aparece).
   Índice: 0 base · 1 botões · 2 links · 3 campos · 4 formulários e etapas · 5 cartão · 6 lista compacta ·
   7 tabela · 8 abas · 9 menu "⋯" · 10 filtros · 11 modal e gaveta · 12 confirmação · 13 avisos ·
   14 etiqueta · 15 vazio · 16 carregando · 17 erro e páginas de estado · 18 paginação, caminho, avatar,
   número, linha do tempo · 19 ícones · 20 imagens · 21 datas e valores · E estrutura da página ·
   23 peças do público · 22 impressão
   ===================================================================================================== */

/* ===================================== 0. Base ===================================== */
.lg-base {
  margin: 0;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte-interface);
  font-size: var(--texto-16);
  line-height: var(--altura-linha-texto);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-wrap: break-word; /* nome longo de equipe/atleta quebra em vez de estourar a largura */
}
.lg-base *, .lg-base *::before, .lg-base *::after { box-sizing: border-box; }
.lg-base :where(h1, h2, h3, h4, p, ul, ol, dl, dd, figure, fieldset) { margin: 0; }
.lg-base :where(ul, ol) { padding: 0; }
.lg-base :where(img, svg, video) { max-width: 100%; }
.lg-base :where(button, input, select, textarea) { font: inherit; color: inherit; }
.lg-base :where(table) { border-collapse: collapse; }
.lg-base :focus-visible { outline: var(--linha-grossa) solid var(--cor-foco); outline-offset: var(--linha-grossa); }
.lg-base [hidden] { display: none; }

.lg-titulo-1, .lg-titulo-2, .lg-titulo-3, .lg-titulo-4 {
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-forte);
  line-height: var(--altura-linha-titulo);
  letter-spacing: 0.005em;
  color: var(--cor-texto);
}
.lg-titulo-1 { font-size: var(--titulo-pagina); }
.lg-titulo-2 { font-size: var(--titulo-secao); }
.lg-titulo-3 { font-size: var(--texto-18); font-family: var(--fonte-interface); font-weight: var(--peso-semi); }
.lg-titulo-4 { font-size: var(--texto-16); font-family: var(--fonte-interface); font-weight: var(--peso-semi); }
/* título de seção com o filete da Legado */
.lg-titulo-secao { display: flex; align-items: center; gap: var(--esp-12); }
.lg-titulo-secao::before {
  content: "";
  flex: none;
  inline-size: var(--esp-16);
  block-size: var(--linha-marca);
  background: var(--cor-primaria);
}
.lg-texto { max-inline-size: var(--largura-texto); }
.lg-texto-apoio { color: var(--cor-texto-secundario); font-size: var(--texto-apoio); }
.lg-texto-pequeno { font-size: var(--texto-12); color: var(--cor-texto-secundario); }
.lg-forte { font-weight: var(--peso-semi); }

/* campo "isca" contra robôs nos formulários públicos: nunca aparece, nem para leitor de tela (o servidor recusa quando vem preenchido) */
.lg-isca { display: none; }
/* Só para leitor de tela. !important: precisa vencer qualquer regra de exibição da peça onde é usado. */
.lg-so-leitor {
  position: absolute !important;
  inline-size: var(--linha) !important;
  block-size: var(--linha) !important;
  padding: 0 !important;
  margin: calc(var(--linha) * -1) !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.lg-pular {
  position: absolute;
  inset-inline-start: var(--esp-8);
  inset-block-start: calc(var(--alvo-minimo) * -2);
  z-index: var(--camada-aviso);
  padding: var(--esp-12) var(--esp-16);
  background: var(--cor-superficie);
  color: var(--cor-link);
  border-radius: var(--raio-4);
}
.lg-pular:focus { inset-block-start: var(--esp-8); }

/* Arranjos: pilha (vertical), linha (horizontal que quebra), grade (colunas automáticas) */
.lg-pilha { display: flex; flex-direction: column; gap: var(--esp-16); min-inline-size: 0; }
.lg-pilha--8 { gap: var(--esp-8); }
.lg-pilha--24 { gap: var(--esp-24); }
.lg-pilha--secoes { gap: var(--secao-espaco); }
.lg-linha { display: flex; flex-wrap: wrap; align-items: center; gap: var(--alvo-espaco); min-inline-size: 0; }
.lg-linha--entre { justify-content: space-between; }
.lg-linha--fim { justify-content: flex-end; }
.lg-linha--topo { align-items: flex-start; }
.lg-linha > .lg-cresce { flex: 1 1 auto; min-inline-size: 0; }
.lg-grade { display: grid; gap: var(--esp-16); grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--largura-coluna)), 1fr)); }
.lg-grade--larga { grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--largura-coluna-g)), 1fr)); }
.lg-grade--estreita { grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--largura-coluna-p)), 1fr)); } /* indicadores: poucos itens ocupam a linha toda */
.lg-separador { border: 0; border-block-start: var(--linha) solid var(--cor-borda); margin: 0; }
.lg-recolhido > summary {
  display: flex;
  align-items: center;
  gap: var(--esp-8);
  min-block-size: var(--controle-altura-p);
  color: var(--cor-link);
  font-weight: var(--peso-semi);
  cursor: pointer;
}
.lg-recolhido > summary::after { content: ""; inline-size: var(--esp-8); block-size: var(--esp-8); border-inline-end: var(--linha-grossa) solid currentColor; border-block-end: var(--linha-grossa) solid currentColor; transform: rotate(45deg) translateY(-25%); }
.lg-recolhido[open] > summary::after { transform: rotate(-135deg); }
.lg-recolhido > summary::-webkit-details-marker { display: none; }
.lg-recolhido-corpo { padding-block-start: var(--esp-12); display: flex; flex-direction: column; gap: var(--esp-12); }
/* Só para a vitrine: mostra um estado parado (pressionado / foco) sem precisar interagir. */
.lg-botao.lg-estado-pressionado { background: var(--botao-fundo-pressionado); }
.lg-estado-foco { outline: var(--linha-grossa) solid var(--cor-foco); outline-offset: var(--linha-grossa); }

/* ===================================== 1. Botões =====================================
   Principal (no máximo um por área), secundário, discreto (texto), perigo e só ícone (com aria-label).
   Tamanhos: --p, (M padrão), --g. No celular nunca abaixo de 44 px (tokens). */
.lg-botao {
  --botao-fundo: var(--cor-superficie);
  --botao-texto: var(--cor-texto);
  --botao-borda: var(--cor-borda-controle);
  --botao-fundo-pressionado: var(--cor-superficie-2);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-8);
  min-block-size: var(--controle-altura);
  min-inline-size: var(--controle-altura);
  padding: var(--esp-8) var(--controle-pad-x);
  border: var(--linha) solid var(--botao-borda);
  border-radius: var(--raio-4);
  background: var(--botao-fundo);
  color: var(--botao-texto);
  font-family: var(--fonte-interface);
  font-size: var(--texto-16);
  font-weight: var(--peso-semi);
  line-height: var(--altura-linha-compacta);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--duracao-rapida) var(--curva), border-color var(--duracao-rapida) var(--curva), box-shadow var(--duracao-rapida) var(--curva);
}
.lg-botao:hover { box-shadow: inset 0 0 0 var(--linha) var(--botao-borda); }
.lg-botao:active { background: var(--botao-fundo-pressionado); }
.lg-botao--principal.lg-estado-pressionado, .lg-botao--principal:active { background: var(--cor-primaria-forte); }
.lg-botao:focus-visible { outline: var(--linha-grossa) solid var(--cor-foco); outline-offset: var(--linha-grossa); }
.lg-botao--principal {
  --botao-fundo: var(--cor-primaria);
  --botao-texto: var(--cor-primaria-contraste);
  --botao-borda: var(--cor-primaria);
  --botao-fundo-pressionado: var(--cor-primaria-forte);
}
.lg-botao--principal:hover { background: var(--cor-primaria-forte); box-shadow: none; }
.lg-botao--secundario { --botao-fundo: var(--cor-superficie); --botao-borda: var(--cor-borda-controle); }
.lg-botao--discreto {
  --botao-fundo: transparent;
  --botao-borda: transparent;
  --botao-texto: var(--cor-link);
  --botao-fundo-pressionado: var(--cor-primaria-suave);
}
.lg-botao--discreto:hover { box-shadow: none; background: var(--cor-primaria-suave); }
/* Perigo: contorno vermelho de erro + ícone; nunca ao lado do principal. Cheio só dentro da confirmação. */
.lg-botao--perigo { --botao-texto: var(--cor-erro-texto); --botao-borda: var(--cor-erro-borda); --botao-fundo-pressionado: var(--cor-erro-fundo); }
.lg-botao--perigo-cheio {
  --botao-fundo: var(--cor-erro);
  --botao-texto: var(--cor-erro-contraste);
  --botao-borda: var(--cor-erro);
  --botao-fundo-pressionado: var(--cor-erro-texto);
}
.lg-botao--icone { padding: 0; inline-size: var(--controle-altura); }
.lg-botao--p { min-block-size: var(--controle-altura-p); min-inline-size: var(--controle-altura-p); font-size: var(--texto-14); padding-inline: var(--esp-12); }
.lg-botao--p.lg-botao--icone { inline-size: var(--controle-altura-p); padding: 0; }
.lg-botao--g { min-block-size: var(--controle-altura-g); font-size: var(--texto-18); padding-inline: var(--esp-32); }
.lg-botao--bloco { display: flex; inline-size: 100%; }
.lg-botao .lg-icone { flex: none; }
/* desativado */
.lg-botao:disabled, .lg-botao[aria-disabled="true"] {
  --botao-fundo: var(--cor-desativado-fundo);
  --botao-texto: var(--cor-desativado);
  --botao-borda: var(--cor-desativado-fundo);
  cursor: not-allowed;
  box-shadow: none;
}
/* carregando: mostra o giro e bloqueia o clique duplo (pecas.js também ignora o segundo clique) */
.lg-botao[aria-busy="true"] { pointer-events: none; color: transparent; }
.lg-botao[aria-busy="true"] > * { opacity: 0; } /* some da tela, mas o nome continua para o leitor de tela */
.lg-botao[aria-busy="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  inline-size: var(--icone-20);
  block-size: var(--icone-20);
  border: var(--linha-grossa) solid var(--botao-texto);
  border-inline-end-color: transparent;
  border-radius: var(--raio-redondo);
  animation: lg-giro var(--duracao-giro) linear infinite;
}
@keyframes lg-giro { to { transform: rotate(360deg); } }
/* grupo de ações: 8 px entre alvos; no celular, ação principal fica por último (perto do polegar) */
.lg-acoes { display: flex; flex-wrap: wrap; gap: var(--alvo-espaco); align-items: center; }
.lg-acoes--fim { justify-content: flex-end; }

/* ===================================== 2. Links ===================================== */
.lg-link { color: var(--cor-link); text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: var(--linha); }
.lg-link:hover { text-decoration-thickness: var(--linha-grossa); }
.lg-link:visited { color: var(--cor-link); }
.lg-link--sozinho { display: inline-flex; align-items: center; gap: var(--esp-4); min-block-size: var(--controle-altura-p); font-weight: var(--peso-semi); }

/* ===================================== 3. Campos =====================================
   Rótulo sempre visível acima; "(opcional)" no opcional; ajuda e erro abaixo; letra de 16 px sempre. */
.lg-campo { display: flex; flex-direction: column; gap: var(--esp-4); min-inline-size: 0; }
.lg-rotulo { font-weight: var(--peso-semi); font-size: var(--texto-16); line-height: var(--altura-linha-compacta); color: var(--cor-texto); }
.lg-opcional { font-weight: var(--peso-normal); color: var(--cor-texto-secundario); }
.lg-ajuda { font-size: var(--texto-apoio); color: var(--cor-texto-secundario); }
.lg-erro-campo {
  display: flex;
  gap: var(--esp-4);
  align-items: flex-start;
  font-size: var(--texto-apoio);
  font-weight: var(--peso-semi);
  color: var(--cor-erro-texto);
}
.lg-erro-campo .lg-icone { margin-block-start: calc(var(--esp-4) / 2); }
.lg-entrada {
  inline-size: 100%;
  min-block-size: var(--controle-altura);
  padding: var(--esp-8) var(--esp-12);
  border: var(--linha) solid var(--cor-borda-controle);
  border-radius: var(--raio-4);
  background: var(--cor-superficie);
  color: var(--cor-texto);
  font-family: var(--fonte-interface);
  font-size: var(--texto-16); /* nunca menos: o iPhone dá zoom abaixo de 16 px */
  line-height: var(--altura-linha-compacta);
  transition: border-color var(--duracao-rapida) var(--curva), box-shadow var(--duracao-rapida) var(--curva);
}
.lg-entrada::placeholder { color: var(--cor-texto-secundario); opacity: 1; }
.lg-entrada:hover { border-color: var(--cor-texto-secundario); }
.lg-entrada:focus-visible, .lg-entrada:focus {
  outline: var(--linha-grossa) solid var(--cor-foco);
  outline-offset: 0;
  border-color: var(--cor-foco);
}
.lg-entrada:disabled { background: var(--cor-desativado-fundo); color: var(--cor-desativado); border-color: var(--cor-desativado-fundo); cursor: not-allowed; }
.lg-entrada[readonly] { background: var(--cor-superficie-2); border-style: dashed; }
.lg-entrada[aria-invalid="true"], .lg-campo--erro .lg-entrada { border-color: var(--cor-erro-borda); box-shadow: inset var(--linha-marca) 0 0 var(--cor-erro-borda); }
textarea.lg-entrada { min-block-size: calc(var(--controle-altura) * 2.5); resize: vertical; line-height: var(--altura-linha-texto); }
.lg-entrada--numero { text-align: end; font-variant-numeric: tabular-nums; }
.lg-entrada--curta { max-inline-size: var(--largura-campo-curto); }
.lg-entrada--media { max-inline-size: var(--largura-campo-medio); }
/* prefixo (R$) e sufixo */
.lg-entrada-grupo { display: flex; align-items: stretch; min-inline-size: 0; }
.lg-entrada-grupo > .lg-entrada { border-start-start-radius: 0; border-end-start-radius: 0; min-inline-size: 0; }
.lg-entrada-prefixo {
  display: inline-flex;
  align-items: center;
  padding-inline: var(--esp-12);
  border: var(--linha) solid var(--cor-borda-controle);
  border-inline-end: 0;
  border-start-start-radius: var(--raio-4);
  border-end-start-radius: var(--raio-4);
  background: var(--cor-superficie-2);
  color: var(--cor-texto-secundario);
  font-weight: var(--peso-semi);
  white-space: nowrap;
}
/* seleção: seta desenhada em CSS (acompanha a cor do texto e o modo escuro) */
.lg-selecao { position: relative; display: block; min-inline-size: 0; }
.lg-selecao:has(> .lg-entrada--curta) { max-inline-size: var(--largura-campo-curto); }
.lg-selecao:has(> .lg-entrada--media) { max-inline-size: var(--largura-campo-medio); }
.lg-selecao > select.lg-entrada { appearance: none; -webkit-appearance: none; padding-inline-end: var(--esp-48); cursor: pointer; }
.lg-selecao::after {
  content: "";
  position: absolute;
  inset-inline-end: var(--esp-16);
  inset-block-start: 50%;
  inline-size: var(--esp-8);
  block-size: var(--esp-8);
  border-inline-end: var(--linha-grossa) solid var(--cor-texto-secundario);
  border-block-end: var(--linha-grossa) solid var(--cor-texto-secundario);
  transform: translateY(-75%) rotate(45deg);
  pointer-events: none;
}
/* seleção com busca: campo de busca + lista (datalist ou lista própria) */
.lg-busca { position: relative; }
.lg-busca > .lg-entrada { padding-inline-start: var(--esp-48); }
.lg-busca > .lg-icone { position: absolute; inset-inline-start: var(--esp-12); inset-block-start: 50%; transform: translateY(-50%); color: var(--cor-texto-secundario); pointer-events: none; }
/* caixa de marcar e opção única: o input fica por cima da caixa desenhada (clicável e focável) */
.lg-marcar, .lg-opcao {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--esp-12);
  min-block-size: var(--controle-altura-p);
  padding-block: calc((var(--controle-altura-p) - var(--caixa-marcar)) / 2);
  cursor: pointer;
  line-height: var(--altura-linha-compacta);
}
.lg-marcar > input, .lg-opcao > input, .lg-chave > input {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  inline-size: 100%;
  block-size: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.lg-marcar-caixa, .lg-opcao-bola {
  position: relative;
  flex: none;
  inline-size: var(--caixa-marcar);
  block-size: var(--caixa-marcar);
  border: var(--linha-grossa) solid var(--cor-borda-controle);
  border-radius: var(--raio-4);
  background: var(--cor-superficie);
  transition: background-color var(--duracao-rapida) var(--curva), border-color var(--duracao-rapida) var(--curva);
}
.lg-opcao-bola { border-radius: var(--raio-redondo); }
.lg-marcar > input:checked + .lg-marcar-caixa, .lg-marcar > input:indeterminate + .lg-marcar-caixa { background: var(--cor-primaria); border-color: var(--cor-primaria); }
.lg-marcar > input:checked + .lg-marcar-caixa::after {
  content: "";
  position: absolute;
  inset-inline-start: 30%;
  inset-block-start: 8%;
  inline-size: 34%;
  block-size: 62%;
  border-inline-end: var(--linha-grossa) solid var(--cor-primaria-contraste);
  border-block-end: var(--linha-grossa) solid var(--cor-primaria-contraste);
  transform: rotate(45deg);
}
.lg-marcar > input:indeterminate + .lg-marcar-caixa::after {
  content: "";
  position: absolute;
  inset: 45% 20% auto;
  block-size: var(--linha-grossa);
  background: var(--cor-primaria-contraste);
}
.lg-opcao > input:checked + .lg-opcao-bola { border-color: var(--cor-primaria); }
.lg-opcao > input:checked + .lg-opcao-bola::after {
  content: "";
  position: absolute;
  inset: 20%;
  border-radius: var(--raio-redondo);
  background: var(--cor-primaria);
}
.lg-marcar > input:focus-visible + .lg-marcar-caixa,
.lg-opcao > input:focus-visible + .lg-opcao-bola,
.lg-chave > input:focus-visible + .lg-chave-trilho { outline: var(--linha-grossa) solid var(--cor-foco); outline-offset: var(--linha-grossa); }
.lg-marcar > input:disabled ~ *, .lg-opcao > input:disabled ~ *, .lg-chave > input:disabled ~ * { opacity: 0.55; cursor: not-allowed; }
.lg-marcar > input[aria-invalid="true"] + .lg-marcar-caixa { border-color: var(--cor-erro-borda); }
.lg-opcao--cartao {
  align-items: center;
  padding: var(--esp-16);
  border: var(--linha) solid var(--cor-borda-controle);
  border-radius: var(--raio-8);
  background: var(--cor-superficie);
}
.lg-opcao--cartao:has(input:checked) { border-color: var(--cor-primaria-texto); box-shadow: inset 0 0 0 var(--linha) var(--cor-primaria-texto); background: var(--cor-primaria-suave); }
.lg-opcao--cartao .lg-opcao-texto { flex: 1 1 auto; display: flex; flex-direction: column; gap: calc(var(--esp-4) / 2); min-inline-size: 0; }
.lg-opcoes--cartoes { gap: var(--esp-8); }
.lg-opcoes { display: flex; flex-direction: column; gap: var(--alvo-espaco); border: 0; padding: 0; min-inline-size: 0; }
.lg-opcoes > legend { padding: 0; margin-block-end: var(--esp-4); }
.lg-opcoes--linha { flex-direction: row; flex-wrap: wrap; column-gap: var(--esp-24); }
/* chave liga/desliga (input role="switch") */
.lg-chave {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--esp-12);
  min-block-size: var(--controle-altura-p);
  cursor: pointer;
}
.lg-chave-trilho {
  position: relative;
  flex: none;
  inline-size: calc(var(--caixa-marcar) * 2);
  block-size: var(--caixa-marcar);
  border: var(--linha-grossa) solid var(--cor-borda-controle);
  border-radius: var(--raio-redondo);
  background: var(--cor-superficie);
  transition: background-color var(--duracao-rapida) var(--curva);
}
.lg-chave-trilho::after {
  content: "";
  position: absolute;
  inset-block: var(--linha-grossa);
  inset-inline-start: var(--linha-grossa);
  aspect-ratio: 1;
  border-radius: var(--raio-redondo);
  background: var(--cor-borda-controle);
  transition: transform var(--duracao-rapida) var(--curva);
}
.lg-chave > input:checked + .lg-chave-trilho { background: var(--cor-primaria); border-color: var(--cor-primaria); }
.lg-chave > input:checked + .lg-chave-trilho::after { background: var(--cor-primaria-contraste); transform: translateX(calc(var(--caixa-marcar) - var(--linha-grossa))); }
.lg-chave-estado { color: var(--cor-texto-secundario); font-size: var(--texto-apoio); }
/* chips de seleção múltipla */
.lg-chips { display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; gap: var(--alvo-espaco); border: 0; padding: 0; margin: 0; min-inline-size: 0; }
.lg-chips > legend { padding: 0; margin-block-end: var(--esp-8); }
.lg-chip-opcao { position: relative; display: inline-flex; }
.lg-chip-opcao > input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.lg-chip-opcao > span {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-4);
  min-block-size: var(--controle-altura-p);
  padding-inline: var(--esp-16);
  border: var(--linha) solid var(--cor-borda-controle);
  border-radius: var(--raio-redondo);
  background: var(--cor-superficie);
  font-weight: var(--peso-medio);
}
.lg-chip-opcao > input:checked + span { background: var(--cor-primaria-suave); border-color: var(--cor-primaria-texto); color: var(--cor-texto); box-shadow: inset 0 0 0 var(--linha) var(--cor-primaria-texto); }
.lg-chip-opcao > input:checked + span::before { content: "✓"; font-weight: var(--peso-forte); color: var(--cor-primaria-texto); }
.lg-chip-opcao > input:focus-visible + span { outline: var(--linha-grossa) solid var(--cor-foco); outline-offset: var(--linha-grossa); }
/* upload de arquivo e de imagem com prévia */
.lg-upload {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--esp-16);
  min-block-size: var(--controle-altura-g);
  padding: var(--esp-16);
  border: var(--linha) dashed var(--cor-borda-controle);
  border-radius: var(--raio-8);
  background: var(--cor-superficie);
  cursor: pointer;
}
.lg-upload > input[type="file"] { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; opacity: 0; cursor: pointer; }
.lg-upload:hover { border-color: var(--cor-texto-secundario); }
.lg-upload:focus-within { outline: var(--linha-grossa) solid var(--cor-foco); outline-offset: var(--linha-grossa); }
.lg-upload-texto { display: flex; flex-direction: column; min-inline-size: 0; }
.lg-upload-previa {
  flex: none;
  inline-size: var(--icone-48);
  block-size: var(--icone-48);
  border-radius: var(--raio-4);
  background: var(--cor-superficie-2);
  object-fit: cover;
  display: grid;
  place-items: center;
  color: var(--cor-texto-secundario);
}
.lg-upload--imagem .lg-upload-previa { inline-size: calc(var(--icone-48) * 2); block-size: calc(var(--icone-48) * 2); }
.lg-campo--erro .lg-upload { border-color: var(--cor-erro-borda); }

/* ===================================== 4. Formulários e etapas ===================================== */
.lg-formulario { display: flex; flex-direction: column; gap: var(--esp-24); max-inline-size: var(--largura-formulario); }
.lg-grupo { display: flex; flex-direction: column; gap: var(--esp-16); border: 0; padding: 0; margin: 0; min-inline-size: 0; }
.lg-grupo > legend, .lg-grupo-titulo { padding: 0; margin-block-end: var(--esp-16); font-family: var(--fonte-titulo); font-weight: var(--peso-forte); font-size: var(--texto-20); line-height: var(--altura-linha-titulo); }
.lg-grade-campos { display: grid; gap: var(--esp-16); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) {
  .lg-grade-campos--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg-grade-campos--2 > .lg-inteiro { grid-column: 1 / -1; }
}
/* rodapé com a ação da tela: fixo no celular (Salvar, Inscrever, Pagar) */
.lg-rodape-acao {
  display: flex;
  flex-wrap: wrap;
  gap: var(--alvo-espaco);
  align-items: center;
  justify-content: flex-end;
  padding-block-start: var(--esp-8);
}
.lg-rodape-acao-resumo { margin-inline-end: auto; display: flex; flex-direction: column; line-height: var(--altura-linha-compacta); }
@media (max-width: 767px) {
  .lg-rodape-acao {
    position: sticky;
    inset-block-end: 0;
    z-index: var(--camada-fixo);
    margin-inline: calc(var(--esp-16) * -1);
    padding: var(--esp-12) var(--esp-16);
    padding-block-end: calc(var(--esp-12) + env(safe-area-inset-bottom, 0px));
    background: var(--cor-superficie);
    border-block-start: var(--linha) solid var(--cor-borda);
    box-shadow: var(--sombra-2);
  }
  .lg-rodape-acao > .lg-botao--principal { flex: 1 1 auto; }
}
/* etapas (inscrição e pagamento): no celular só a etapa atual + barra de progresso */
.lg-etapas { list-style: none; display: flex; gap: var(--esp-8); padding: 0; margin: 0; counter-reset: etapa; }
.lg-etapa {
  counter-increment: etapa;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: var(--esp-8);
  min-inline-size: 0;
  color: var(--cor-texto-secundario);
  font-size: var(--texto-14);
  font-weight: var(--peso-semi);
}
.lg-etapa::before {
  content: "";
  block-size: var(--esp-4);
  border-radius: var(--raio-redondo);
  background: var(--cor-borda);
}
.lg-etapa > span::before { content: counter(etapa) ". "; }
.lg-etapa--feita::before, .lg-etapa[aria-current="step"]::before { background: var(--cor-primaria); }
.lg-etapa[aria-current="step"] { color: var(--cor-texto); }
.lg-etapa--feita { color: var(--cor-texto); }
.lg-etapas-resumo { display: none; font-weight: var(--peso-semi); }
@media (max-width: 767px) {
  .lg-etapa > span { position: absolute; inline-size: var(--linha); block-size: var(--linha); overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .lg-etapas-resumo { display: block; }
}

/* ===================================== 5. Cartão ===================================== */
.lg-cartao {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--esp-12);
  min-inline-size: 0;
  padding: var(--cartao-pad);
  background: var(--cor-superficie);
  border: var(--linha) solid var(--cor-borda);
  border-radius: var(--raio-8);
  box-shadow: var(--sombra-1);
  --abas-fundo: var(--cor-superficie); /* abas dentro do cartão: a sombra de "tem mais" usa o fundo certo */
}
.lg-cartao-topo { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--esp-8) var(--esp-12); min-inline-size: 0; }
.lg-cartao-titulo { font-weight: var(--peso-semi); font-size: var(--texto-18); line-height: var(--altura-linha-titulo); }
.lg-cartao-subtitulo { color: var(--cor-texto-secundario); font-size: var(--texto-apoio); }
.lg-cartao-cabeca { flex: 1 1 var(--largura-campo-curto); min-inline-size: 0; display: flex; flex-direction: column; gap: var(--esp-4); }
.lg-cartao-acoes { display: flex; flex-wrap: wrap; gap: var(--alvo-espaco); align-items: center; padding-block-start: var(--esp-4); }
.lg-cartao--plano { box-shadow: none; }
.lg-cartao--destaque { border-block-start: var(--linha-marca) solid var(--cor-primaria); }
/* clicável inteiro: o link do título estica sobre o cartão; botões internos ficam por cima */
.lg-cartao--clicavel .lg-cartao-link { color: inherit; text-decoration: none; }
.lg-cartao--clicavel .lg-cartao-link::after { content: ""; position: absolute; inset: 0; border-radius: var(--raio-8); }
.lg-cartao--clicavel:hover { border-color: var(--cor-borda-controle); }
.lg-cartao--clicavel:has(.lg-cartao-link:focus-visible) { outline: var(--linha-grossa) solid var(--cor-foco); outline-offset: var(--linha-grossa); }
.lg-cartao--clicavel .lg-cartao-link:focus-visible { outline: none; }
.lg-cartao--clicavel :is(button:not(.lg-cartao-link), .lg-botao, .lg-menu-mais) { position: relative; z-index: 1; }
.lg-cartao--clicavel:active { background: var(--cor-superficie-2); }

/* ===================================== 6. Lista compacta =====================================
   Até 5 itens + "Ver todos (N)". Acima de 10: busca e filtros. Acima de 25: paginação ou "carregar mais". */
.lg-lista { list-style: none; margin: 0; padding: 0; background: var(--cor-superficie); border: var(--linha) solid var(--cor-borda); border-radius: var(--raio-8); }
.lg-lista-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--esp-12);
  min-block-size: var(--alvo-minimo);
  padding: var(--lista-pad-y) var(--esp-16);
  border-block-start: var(--linha) solid var(--cor-borda);
}
.lg-lista-item:first-child { border-block-start: 0; }
.lg-lista-principal { flex: 1 1 auto; min-inline-size: 0; display: flex; flex-direction: column; gap: calc(var(--esp-4) / 2); }
.lg-lista-titulo { font-weight: var(--peso-semi); color: inherit; text-decoration: none; }
a.lg-lista-titulo::after { content: ""; position: absolute; inset: 0; }
a.lg-lista-titulo:focus-visible { outline: none; }
.lg-lista-item:has(a.lg-lista-titulo:focus-visible) { outline: var(--linha-grossa) solid var(--cor-foco); outline-offset: calc(var(--linha-grossa) * -1); }
.lg-lista-item:has(a.lg-lista-titulo):hover { background: var(--cor-superficie-2); }
.lg-lista-secundaria { color: var(--cor-texto-secundario); font-size: var(--texto-apoio); }
.lg-lista-lado { flex: none; display: flex; align-items: center; gap: var(--esp-8); position: relative; z-index: 1; }
.lg-lista-rodape { display: flex; justify-content: center; padding: var(--esp-4); border-block-start: var(--linha) solid var(--cor-borda); }
.lg-lista-rodape > .lg-botao { inline-size: 100%; }
.lg-lista-busca { padding: var(--esp-12) var(--esp-16); border-block-end: var(--linha) solid var(--cor-borda); }
@media (max-width: 767px) {
  /* no celular a informação principal encolhe e quebra linha; status e "⋯" ficam à direita */
  .lg-lista-principal { flex-basis: 0; }
  .lg-lista-lado { gap: var(--esp-4); max-inline-size: 50%; flex-wrap: wrap; justify-content: flex-end; }
  .lg-lista-lado .lg-etiqueta { white-space: normal; }
}

/* ===================================== 7. Tabela (modo Gestão) =====================================
   Cada célula tem data-prioridade (1, 2 ou 3) e data-rotulo (nome da coluna, usado no cartão do celular).
   PC: tabela completa, cabeçalho fixo, rola dentro da caixa com sombra na borda.
   Tablet: colunas 3 somem ("Mostrar todas as colunas" devolve).
   Celular: vira lista de cartões (coluna 1 = título, colunas 2 = linhas, colunas 3 em "Ver detalhes").
   .lg-tabela--fixa (ex.: classificação) continua tabela no celular, só escondendo colunas 3. */
.lg-tabela-bloco { display: flex; flex-direction: column; gap: var(--esp-12); min-inline-size: 0; }
.lg-tabela-barra { display: flex; flex-wrap: wrap; align-items: center; gap: var(--alvo-espaco); min-inline-size: 0; }
.lg-tabela-lote {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--alvo-espaco);
  padding: var(--esp-8) var(--esp-12);
  border-radius: var(--raio-8);
  background: var(--cor-primaria-suave);
  border: var(--linha) solid var(--cor-primaria-texto);
}
.lg-tabela-caixa {
  max-inline-size: 100%;
  overflow: auto;
  border: var(--linha) solid var(--cor-borda);
  border-radius: var(--raio-8);
  /* sombra na borda quando há conteúdo escondido para o lado (some quando chega ao fim) */
  background:
    linear-gradient(to right, var(--cor-superficie) 30%, transparent) left center / var(--esp-48) 100% no-repeat local,
    linear-gradient(to left, var(--cor-superficie) 30%, transparent) right center / var(--esp-48) 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, var(--cor-sombra-forte), transparent) left center / var(--esp-16) 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, var(--cor-sombra-forte), transparent) right center / var(--esp-16) 100% no-repeat scroll,
    var(--cor-superficie);
}
@media (min-width: 1024px) {
  .lg-tabela-caixa { max-block-size: calc(100dvh - var(--altura-cabecalho) - var(--esp-64) * 2); }
}
.lg-tabela { inline-size: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--texto-tabela); }
.lg-tabela caption { text-align: start; padding: var(--esp-12) var(--tabela-pad-x); font-weight: var(--peso-semi); }
.lg-tabela th, .lg-tabela td {
  padding: var(--tabela-pad-y) var(--tabela-pad-x);
  text-align: start;
  vertical-align: middle;
  border-block-end: var(--linha) solid var(--cor-borda);
}
.lg-tabela thead th {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--camada-fixo);
  background: var(--cor-superficie-2);
  color: var(--cor-texto-secundario);
  font-size: var(--texto-14);
  font-weight: var(--peso-semi);
  white-space: nowrap;
}
.lg-tabela tbody tr:last-child > * { border-block-end: 0; }
.lg-tabela tbody tr:hover > * { background: var(--cor-superficie-2); }
.lg-tabela tbody tr[aria-selected="true"] > *, .lg-tabela tbody tr:has(.lg-tabela-selecao input:checked) > * { background: var(--cor-primaria-suave); }
.lg-tabela .lg-num, .lg-tabela [data-tipo="numero"] { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lg-tabela-titulo { font-weight: var(--peso-semi); color: var(--cor-texto); text-decoration: none; }
a.lg-tabela-titulo:hover { text-decoration: underline; }
.lg-tabela-sub { display: block; color: var(--cor-texto-secundario); font-size: var(--texto-12); }
/* ordenação: botão no cabeçalho, com aria-sort no <th> */
.lg-tabela-ordenar {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-4);
  min-block-size: var(--controle-altura-p);
  margin-inline: calc(var(--esp-8) * -1);
  padding: 0 var(--esp-8);
  border: 0;
  border-radius: var(--raio-4);
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.lg-tabela-ordenar:hover { color: var(--cor-texto); background: var(--cor-borda); }
.lg-tabela-ordenar::after { content: "↕"; font-size: var(--texto-12); opacity: 0.6; }
th[aria-sort="ascending"] .lg-tabela-ordenar::after { content: "↑"; opacity: 1; }
th[aria-sort="descending"] .lg-tabela-ordenar::after { content: "↓"; opacity: 1; }
th[aria-sort] .lg-tabela-ordenar { color: var(--cor-texto); }
.lg-tabela-selecao { inline-size: var(--alvo-minimo); }
.lg-tabela-selecao .lg-marcar { min-block-size: var(--controle-altura-p); min-inline-size: var(--controle-altura-p); padding-block: 0; align-items: center; justify-content: center; }
.lg-tabela-acoes { inline-size: var(--alvo-minimo); text-align: end; }
.lg-tabela-ver-celula { display: none; }
.lg-tabela-ver { white-space: nowrap; }
/* tablet: colunas 3 somem */
@media (min-width: 768px) and (max-width: 1023px) {
  .lg-tabela [data-prioridade="3"] { display: none; }
  .lg-tabela-caixa[data-colunas="todas"] .lg-tabela [data-prioridade="3"] { display: table-cell; }
}
.lg-tabela-todas { display: none; }
@media (min-width: 768px) and (max-width: 1023px) { .lg-tabela-todas { display: inline-flex; } }
/* celular: lista de cartões */
@media (max-width: 767px) {
  .lg-tabela-caixa { overflow: visible; border: 0; background: none; max-block-size: none; }
  .lg-tabela:not(.lg-tabela--fixa) { display: block; }
  /* no celular o cabeçalho some: ordenar fica em "Filtros" e "Selecionar todas" na barra da tabela */
  .lg-tabela:not(.lg-tabela--fixa) thead { display: none; }
  .lg-tabela:not(.lg-tabela--fixa) tbody { display: flex; flex-direction: column; gap: var(--esp-12); }
  .lg-tabela:not(.lg-tabela--fixa) tr {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: var(--esp-8);
    padding: var(--esp-8) var(--esp-16);
    background: var(--cor-superficie);
    border: var(--linha) solid var(--cor-borda);
    border-radius: var(--raio-8);
    box-shadow: var(--sombra-1);
  }
  .lg-tabela:not(.lg-tabela--fixa) tr:has(.lg-tabela-selecao input:checked) { border-color: var(--cor-primaria-texto); background: var(--cor-primaria-suave); }
  .lg-tabela:not(.lg-tabela--fixa) td { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--esp-4) var(--esp-16); padding: var(--esp-8) 0; border: 0; grid-column: 1 / -1; background: none; text-align: end; }
  .lg-tabela:not(.lg-tabela--fixa) tbody tr:hover > * { background: none; }
  .lg-tabela:not(.lg-tabela--fixa) td[data-rotulo]::before { content: attr(data-rotulo); color: var(--cor-texto-secundario); font-weight: var(--peso-medio); text-align: start; flex: none; max-inline-size: 45%; }
  .lg-tabela:not(.lg-tabela--fixa) td[data-prioridade="1"] { grid-row: 1; grid-column: 2; display: block; text-align: start; font-size: var(--texto-16); align-self: center; }
  .lg-tabela:not(.lg-tabela--fixa) td[data-prioridade="1"]::before { content: none; }
  .lg-tabela:not(.lg-tabela--fixa) td[data-prioridade="1"] .lg-tabela-titulo { display: inline-flex; align-items: center; min-block-size: var(--alvo-minimo); }
  .lg-tabela:not(.lg-tabela--fixa) td.lg-tabela-selecao { grid-row: 1; grid-column: 1; inline-size: auto; padding: 0; align-items: center; }
  .lg-tabela:not(.lg-tabela--fixa) td.lg-tabela-acoes { grid-row: 1; grid-column: 3; inline-size: auto; padding: 0; align-items: center; }
  .lg-tabela:not(.lg-tabela--fixa) td[data-prioridade="2"] { border-block-start: var(--linha) solid var(--cor-borda); }
  .lg-tabela:not(.lg-tabela--fixa) td .lg-etiqueta { white-space: normal; }
  .lg-tabela:not(.lg-tabela--fixa) td[data-prioridade="3"] { display: none; }
  .lg-tabela:not(.lg-tabela--fixa) tr.lg-aberta td[data-prioridade="3"] { display: flex; border-block-start: var(--linha) dashed var(--cor-borda); }
  .lg-tabela:not(.lg-tabela--fixa) td.lg-tabela-ver-celula { display: flex; justify-content: flex-start; padding-block: var(--esp-4) 0; border-block-start: var(--linha) solid var(--cor-borda); }
  .lg-tabela--fixa [data-prioridade="3"] { display: none; }
  .lg-tabela--fixa th, .lg-tabela--fixa td { padding-inline: var(--esp-8); }
  .lg-tabela-caixa:has(.lg-tabela--fixa) { overflow: auto; border: var(--linha) solid var(--cor-borda); background: var(--cor-superficie); }
}

/* ===================================== 8. Abas =====================================
   Rolam dentro delas (nunca quebram linha), com sombra indicando que há mais. Mais de 6: vira seleção no celular. */
.lg-abas {
  display: flex;
  gap: var(--alvo-espaco);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  border-block-end: var(--linha) solid var(--cor-borda);
  scroll-snap-type: x proximity;
  background:
    linear-gradient(to right, var(--abas-fundo, var(--cor-fundo)) 30%, transparent) left center / var(--esp-32) 100% no-repeat local,
    linear-gradient(to left, var(--abas-fundo, var(--cor-fundo)) 30%, transparent) right center / var(--esp-32) 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, var(--cor-sombra-forte), transparent) left center / var(--esp-12) 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, var(--cor-sombra-forte), transparent) right center / var(--esp-12) 100% no-repeat scroll;
}
.lg-abas::-webkit-scrollbar { display: none; }
.lg-aba {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--esp-8);
  min-block-size: var(--controle-altura);
  padding: 0 var(--esp-16);
  border: 0;
  border-block-end: var(--linha-marca) solid transparent;
  background: transparent;
  color: var(--cor-texto-secundario);
  font-family: var(--fonte-interface);
  font-size: var(--texto-16);
  font-weight: var(--peso-semi);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  scroll-snap-align: start;
}
.lg-aba:hover { color: var(--cor-texto); }
.lg-aba[aria-selected="true"], .lg-aba[aria-current="page"] { color: var(--cor-texto); border-block-end-color: var(--cor-primaria); }
.lg-aba:focus-visible { outline-offset: calc(var(--linha-grossa) * -1); }
.lg-aba:disabled { color: var(--cor-desativado); cursor: not-allowed; }
.lg-aba-contador { padding: 0 var(--esp-8); border-radius: var(--raio-redondo); background: var(--cor-superficie-2); color: var(--cor-texto-secundario); font-size: var(--texto-12); }
.lg-abas-selecao { display: none; }
@media (max-width: 767px) {
  .lg-abas--muitas { display: none; }
  .lg-abas-selecao { display: block; }
}

/* ===================================== 9. Menu "⋯" =====================================
   <details class="lg-menu-mais"><summary class="lg-botao lg-botao--icone" aria-label="Mais ações">…</summary>
   <div class="lg-menu-mais-lista" role="menu">…</div></details>. Perigosas no fim, separadas e em vermelho.
   No celular abre como folha de ações embaixo (nunca sai da tela). */
.lg-menu-mais { position: relative; display: inline-block; }
.lg-menu-mais > summary { list-style: none; }
.lg-menu-mais > summary::-webkit-details-marker { display: none; }
.lg-menu-mais-lista {
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: calc(100% + var(--esp-4));
  z-index: var(--camada-menu-flutuante);
  display: flex;
  flex-direction: column;
  min-inline-size: var(--largura-menu-flutuante);
  padding: var(--esp-4);
  background: var(--cor-superficie-elevada);
  border: var(--linha) solid var(--cor-borda);
  border-radius: var(--raio-8);
  box-shadow: var(--sombra-2);
}
.lg-menu-mais:not([open]) > .lg-menu-mais-lista { display: none; }
.lg-menu-mais--esquerda .lg-menu-mais-lista { inset-inline-end: auto; inset-inline-start: 0; }
.lg-menu-item {
  display: flex;
  align-items: center;
  gap: var(--esp-12);
  inline-size: 100%;
  min-block-size: var(--controle-altura);
  padding: 0 var(--esp-12);
  border: 0;
  border-radius: var(--raio-4);
  background: transparent;
  color: var(--cor-texto);
  font: inherit;
  font-size: var(--texto-16);
  text-align: start;
  text-decoration: none;
  cursor: pointer;
}
.lg-menu-item:hover, .lg-menu-item:focus-visible { background: var(--cor-superficie-2); }
.lg-menu-item:focus-visible { outline-offset: calc(var(--linha-grossa) * -1); }
.lg-menu-item:disabled { color: var(--cor-desativado); cursor: not-allowed; }
.lg-menu-item--perigo { color: var(--cor-erro-texto); }
.lg-menu-item--perigo:hover { background: var(--cor-erro-fundo); }
.lg-menu-separador { block-size: var(--linha); margin: var(--esp-4) 0; background: var(--cor-borda); border: 0; }
@media (max-width: 767px) {
  .lg-menu-mais-lista {
    position: fixed;
    inset: auto var(--esp-16) var(--esp-16);
    min-inline-size: 0;
    max-block-size: 70dvh;
    overflow: auto;
    padding: var(--esp-8);
    border-radius: var(--raio-12);
    box-shadow: var(--sombra-3);
  }
  .lg-menu-mais[open]::before { content: ""; position: fixed; inset: 0; z-index: var(--camada-menu-flutuante); background: var(--cor-sobreposicao); }
  .lg-menu-item { min-block-size: var(--alvo-minimo); }
}

/* ===================================== 10. Filtros =====================================
   PC: barra com campos, chips dos filtros ativos e "Limpar". Celular: botão "Filtros (N)" abre a gaveta. */
.lg-filtros { display: flex; flex-direction: column; gap: var(--esp-12); min-inline-size: 0; }
.lg-filtros-barra { display: flex; flex-wrap: wrap; gap: var(--alvo-espaco); align-items: flex-end; min-inline-size: 0; }
.lg-filtros-barra > .lg-campo { flex: 1 1 var(--largura-campo-curto); min-inline-size: 0; }
.lg-filtros-barra > .lg-campo--busca { flex: 2 1 var(--largura-coluna); }
.lg-filtros-ativos { display: flex; flex-wrap: wrap; gap: var(--alvo-espaco); align-items: center; }
.lg-filtro-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-8);
  min-block-size: var(--controle-altura-p);
  padding: 0 var(--esp-8) 0 var(--esp-12);
  border: var(--linha) solid var(--cor-borda-controle);
  border-radius: var(--raio-redondo);
  background: var(--cor-superficie);
  color: var(--cor-texto);
  font: inherit;
  font-size: var(--texto-14);
  cursor: pointer;
}
.lg-filtro-chip:hover { background: var(--cor-superficie-2); }
.lg-filtro-chip .lg-icone { color: var(--cor-texto-secundario); }
.lg-filtros-abrir { display: none; }
@media (max-width: 767px) {
  .lg-filtros-barra--recolhe { display: none; }
  .lg-filtros-abrir { display: inline-flex; }
}

/* ===================================== 11. Modal e gaveta =====================================
   <dialog class="lg-modal"> (confirmação curta) e <dialog class="lg-gaveta"> (editar sem sair da tela).
   No celular, os dois ocupam a tela cheia, com o fechar visível; o voltar do celular fecha (pecas.js). */
.lg-modal, .lg-gaveta {
  padding: 0;
  border: 0;
  background: var(--cor-superficie-elevada);
  color: var(--cor-texto);
  box-shadow: var(--sombra-3);
  max-inline-size: 100vw;
  max-block-size: 100dvh;
  overflow: hidden;
}
.lg-modal { inline-size: min(var(--largura-modal), calc(100vw - var(--esp-32))); border-radius: var(--raio-12); }
.lg-gaveta {
  margin: 0 0 0 auto;
  inline-size: min(var(--largura-gaveta), 100vw);
  block-size: 100dvh;
  border-radius: var(--raio-12) 0 0 var(--raio-12);
}
.lg-gaveta--esquerda { margin: 0 auto 0 0; border-radius: 0 var(--raio-12) var(--raio-12) 0; }
.lg-modal::backdrop, .lg-gaveta::backdrop { background: var(--cor-sobreposicao); }
.lg-modal[open], .lg-gaveta[open] { display: flex; flex-direction: column; }
.lg-modal[open] { animation: lg-surgir var(--duracao-media) var(--curva); }
.lg-gaveta[open] { animation: lg-deslizar var(--duracao-media) var(--curva); }
.lg-gaveta--esquerda[open] { animation-name: lg-deslizar-esquerda; }
@keyframes lg-surgir { from { opacity: 0; transform: translateY(var(--esp-8)); } }
@keyframes lg-deslizar { from { transform: translateX(100%); } }
@keyframes lg-deslizar-esquerda { from { transform: translateX(-100%); } }
.lg-dialogo-topo {
  display: flex;
  align-items: center;
  gap: var(--esp-12);
  padding: var(--esp-12) var(--esp-12) var(--esp-12) var(--esp-24);
  border-block-end: var(--linha) solid var(--cor-borda);
}
.lg-dialogo-topo > .lg-titulo-2 { flex: 1 1 auto; min-inline-size: 0; }
.lg-dialogo-corpo { flex: 1 1 auto; overflow: auto; padding: var(--esp-24); display: flex; flex-direction: column; gap: var(--esp-16); }
.lg-dialogo-rodape {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--alvo-espaco);
  padding: var(--esp-16) var(--esp-24);
  border-block-start: var(--linha) solid var(--cor-borda);
  background: var(--cor-superficie-elevada);
}
@media (max-width: 767px) {
  .lg-modal, .lg-gaveta, .lg-gaveta--esquerda { inline-size: 100vw; block-size: 100dvh; margin: 0; border-radius: 0; }
  .lg-dialogo-corpo { padding: var(--esp-16); }
  .lg-dialogo-topo { padding-inline-start: var(--esp-16); }
  .lg-dialogo-rodape { padding: var(--esp-12) var(--esp-16); padding-block-end: calc(var(--esp-12) + env(safe-area-inset-bottom, 0px)); }
  .lg-dialogo-rodape > .lg-botao { flex: 1 1 auto; }
}

/* ===================================== 12. Confirmação de ação perigosa ===================================== */
.lg-confirmacao .lg-dialogo-corpo { flex-direction: row; align-items: flex-start; }
.lg-confirmacao-icone {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: var(--icone-48);
  block-size: var(--icone-48);
  border-radius: var(--raio-redondo);
  background: var(--cor-erro-fundo);
  color: var(--cor-erro-texto);
}
.lg-confirmacao-texto { display: flex; flex-direction: column; gap: var(--esp-8); min-inline-size: 0; }
.lg-confirmacao-reforco { display: flex; flex-direction: column; gap: var(--esp-4); }

/* ===================================== 13. Avisos =====================================
   Aviso rápido (toast, 4 a 6 s, não cobre botão), faixa de alerta na página e erro no campo (seção 3). */
.lg-avisos {
  position: fixed;
  inset-inline: 0;
  inset-block-end: var(--esp-24);
  z-index: var(--camada-aviso);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--esp-8);
  padding-inline: var(--esp-16);
  pointer-events: none;
}
/* sobe acima do rodapé de ação e da barra inferior para não cobrir botão */
.lg-base:has(.lg-rodape-acao) .lg-avisos { inset-block-end: calc(var(--altura-rodape-acao) + var(--esp-16)); }
.lg-base:has(.lg-barra-inferior) .lg-avisos { inset-block-end: calc(var(--altura-barra-inferior) + var(--esp-16)); }
@media (min-width: 768px) {
  .lg-base:has(.lg-rodape-acao) .lg-avisos, .lg-base:has(.lg-barra-inferior) .lg-avisos { inset-block-end: var(--esp-24); }
}
.lg-aviso-rapido {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: var(--esp-12);
  max-inline-size: min(var(--largura-aviso), 100%);
  min-block-size: var(--alvo-minimo);
  padding: var(--esp-8) var(--esp-8) var(--esp-8) var(--esp-16);
  border-radius: var(--raio-12);
  background: var(--cor-secundaria);
  color: var(--cor-secundaria-contraste);
  box-shadow: var(--sombra-3);
  animation: lg-surgir var(--duracao-media) var(--curva);
}
.lg-aviso-rapido .lg-icone { color: var(--cor-destaque-sobre-secundaria); }
.lg-aviso-rapido > span { flex: 1 1 auto; }
.lg-aviso-rapido .lg-botao--discreto { --botao-texto: var(--cor-secundaria-contraste); --cor-foco: var(--cor-foco-sobre-secundaria); }
.lg-aviso-rapido .lg-botao--discreto:hover { background: transparent; text-decoration: underline; }
/* faixa de alerta */
.lg-faixa {
  --faixa-fundo: var(--cor-info-fundo);
  --faixa-borda: var(--cor-info-borda);
  --faixa-texto: var(--cor-info-texto);
  display: flex;
  align-items: flex-start;
  gap: var(--esp-12);
  padding: var(--esp-12) var(--esp-16);
  border: var(--linha) solid var(--faixa-borda);
  border-inline-start-width: var(--linha-marca);
  border-radius: var(--raio-8);
  background: var(--faixa-fundo);
  color: var(--cor-texto);
}
.lg-faixa > .lg-icone { color: var(--faixa-texto); margin-block-start: calc(var(--esp-4) / 2); flex: none; }
.lg-faixa-corpo { flex: 1 1 auto; min-inline-size: 0; display: flex; flex-direction: column; gap: var(--esp-4); }
.lg-faixa-titulo { font-weight: var(--peso-semi); color: var(--faixa-texto); }
.lg-faixa--sucesso { --faixa-fundo: var(--cor-sucesso-fundo); --faixa-borda: var(--cor-sucesso-borda); --faixa-texto: var(--cor-sucesso-texto); }
.lg-faixa--aviso { --faixa-fundo: var(--cor-aviso-fundo); --faixa-borda: var(--cor-aviso-borda); --faixa-texto: var(--cor-aviso-texto); }
.lg-faixa--erro { --faixa-fundo: var(--cor-erro-fundo); --faixa-borda: var(--cor-erro-borda); --faixa-texto: var(--cor-erro-texto); }

/* ===================================== 14. Etiqueta de status =====================================
   Sempre com texto (nunca só cor). Cores de significado fixas nos dois sistemas. */
.lg-etiqueta {
  --etiqueta-fundo: var(--cor-neutro-fundo);
  --etiqueta-borda: var(--cor-neutro-borda);
  --etiqueta-texto: var(--cor-neutro-texto);
  display: inline-flex;
  align-items: center;
  gap: var(--esp-4);
  padding: calc(var(--esp-4) / 2) var(--esp-8);
  border: var(--linha) solid var(--etiqueta-borda);
  border-radius: var(--raio-4);
  background: var(--etiqueta-fundo);
  color: var(--etiqueta-texto);
  font-size: var(--texto-14);
  font-weight: var(--peso-semi);
  line-height: var(--altura-linha-compacta);
  white-space: nowrap;
}
.lg-etiqueta::before { content: ""; inline-size: var(--esp-8); block-size: var(--esp-8); border-radius: var(--raio-redondo); background: var(--etiqueta-borda); flex: none; }
.lg-etiqueta--sucesso, .lg-etiqueta--pago, .lg-etiqueta--confirmado, .lg-etiqueta--publicado { --etiqueta-fundo: var(--cor-sucesso-fundo); --etiqueta-borda: var(--cor-sucesso-borda); --etiqueta-texto: var(--cor-sucesso-texto); }
.lg-etiqueta--aviso, .lg-etiqueta--pendente, .lg-etiqueta--em-analise { --etiqueta-fundo: var(--cor-aviso-fundo); --etiqueta-borda: var(--cor-aviso-borda); --etiqueta-texto: var(--cor-aviso-texto); }
.lg-etiqueta--erro, .lg-etiqueta--vencido { --etiqueta-fundo: var(--cor-erro-fundo); --etiqueta-borda: var(--cor-erro-borda); --etiqueta-texto: var(--cor-erro-texto); }
.lg-etiqueta--info, .lg-etiqueta--inscrito { --etiqueta-fundo: var(--cor-info-fundo); --etiqueta-borda: var(--cor-info-borda); --etiqueta-texto: var(--cor-info-texto); }
.lg-etiqueta--neutro, .lg-etiqueta--rascunho { --etiqueta-fundo: var(--cor-neutro-fundo); --etiqueta-borda: var(--cor-neutro-borda); --etiqueta-texto: var(--cor-neutro-texto); }
.lg-etiqueta--cancelado { --etiqueta-fundo: var(--cor-neutro-fundo); --etiqueta-borda: var(--cor-neutro-borda); --etiqueta-texto: var(--cor-neutro-texto); }
.lg-etiqueta--cancelado::before { border-radius: 0; block-size: var(--linha-grossa); }
.lg-etiqueta--em-analise::before { background: transparent; border: var(--linha-grossa) solid var(--etiqueta-borda); }
.lg-etiqueta--vencido::before, .lg-etiqueta--erro::before { border-radius: 0; transform: rotate(45deg); }
.lg-etiqueta--ao-vivo { --etiqueta-fundo: var(--cor-destaque); --etiqueta-borda: var(--cor-destaque); --etiqueta-texto: var(--cor-destaque-contraste); }
.lg-etiqueta--ao-vivo::before { background: var(--cor-destaque-contraste); }

/* ===================================== 15. Estado vazio ===================================== */
.lg-vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--esp-12);
  padding: var(--esp-32) var(--esp-16);
  text-align: center;
  border: var(--linha) dashed var(--cor-borda-controle);
  border-radius: var(--raio-8);
  background: var(--cor-superficie);
}
.lg-vazio-icone {
  display: grid;
  place-items: center;
  inline-size: var(--icone-48);
  block-size: var(--icone-48);
  border-radius: var(--raio-redondo);
  background: var(--cor-superficie-2);
  color: var(--cor-texto-secundario);
}
.lg-vazio-texto { max-inline-size: var(--largura-texto-curto); }
.lg-vazio-texto > strong { display: block; font-size: var(--texto-18); }

/* ===================================== 16. Carregando (esqueleto) ===================================== */
.lg-esqueleto {
  display: block;
  block-size: var(--texto-16);
  border-radius: var(--raio-4);
  background: linear-gradient(90deg, var(--cor-esqueleto) 25%, var(--cor-esqueleto-brilho) 50%, var(--cor-esqueleto) 75%) 0 0 / 200% 100%;
  animation: lg-brilho calc(var(--duracao-media) * 6) linear infinite;
}
.lg-esqueleto--titulo { block-size: var(--texto-24); inline-size: 60%; }
.lg-esqueleto--linha { inline-size: 100%; }
.lg-esqueleto--curta { inline-size: 40%; }
.lg-esqueleto--bloco { block-size: var(--controle-altura-g); }
.lg-esqueleto--avatar { inline-size: var(--icone-48); block-size: var(--icone-48); border-radius: var(--raio-redondo); flex: none; }
@keyframes lg-brilho { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .lg-esqueleto { animation: none; } }
.lg-carregando-area[aria-busy="true"] { cursor: progress; }

/* ===================================== 17. Erro e páginas de estado ===================================== */
.lg-erro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--esp-12);
  padding: var(--esp-24);
  border: var(--linha) solid var(--cor-erro-borda);
  border-radius: var(--raio-8);
  background: var(--cor-erro-fundo);
}
.lg-erro-titulo { display: flex; gap: var(--esp-8); align-items: center; font-weight: var(--peso-semi); color: var(--cor-erro-texto); }
.lg-estado {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--esp-16);
  max-inline-size: var(--largura-formulario);
  margin-inline: auto;
  padding: var(--esp-48) var(--esp-16);
}
.lg-estado-codigo { font-family: var(--fonte-titulo); font-weight: var(--peso-forte); font-size: var(--texto-36); line-height: var(--altura-linha-titulo); color: var(--cor-primaria-texto); overflow-wrap: anywhere; }
.lg-estado::before { content: ""; inline-size: var(--esp-48); block-size: var(--linha-marca); background: var(--cor-primaria); }

/* ===================================== 18. Paginação, caminho, avatar, número, linha do tempo ===================================== */
.lg-paginacao { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-12); }
.lg-paginacao-paginas { display: flex; flex-wrap: wrap; gap: var(--alvo-espaco); list-style: none; margin: 0; padding: 0; }
.lg-pagina-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: var(--controle-altura);
  min-block-size: var(--controle-altura);
  padding-inline: var(--esp-8);
  border: var(--linha) solid transparent;
  border-radius: var(--raio-4);
  color: var(--cor-texto);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  font-weight: var(--peso-medio);
}
.lg-pagina-num:hover { border-color: var(--cor-borda-controle); }
.lg-pagina-num[aria-current="page"] { background: var(--cor-primaria); border-color: var(--cor-primaria); color: var(--cor-primaria-contraste); }
@media (max-width: 767px) { .lg-paginacao-paginas .lg-pagina-longe { display: none; } }
/* caminho (breadcrumb): no celular, só o "voltar" para o nível de cima */
.lg-caminho ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-4); list-style: none; margin: 0; padding: 0; font-size: var(--texto-14); }
.lg-caminho li { display: inline-flex; align-items: center; gap: var(--esp-4); min-inline-size: 0; color: var(--cor-texto-secundario); }
.lg-caminho li + li::before { content: "›"; color: var(--cor-texto-secundario); }
.lg-caminho a { color: var(--cor-texto-secundario); text-decoration: underline; text-underline-offset: 0.18em; }
.lg-caminho a:hover { color: var(--cor-texto); }
.lg-caminho [aria-current="page"] { color: var(--cor-texto); font-weight: var(--peso-semi); }
.lg-caminho-voltar { display: none; }
@media (max-width: 767px) {
  .lg-caminho ol { display: none; }
  .lg-caminho-voltar { display: inline-flex; align-items: center; gap: var(--esp-4); min-block-size: var(--alvo-minimo); color: var(--cor-texto-secundario); text-decoration: none; font-weight: var(--peso-semi); }
}
/* avatar (pessoa, redondo) e escudo (equipe/escola, quadrado), com a inicial quando não há imagem */
.lg-avatar {
  display: inline-grid;
  place-items: center;
  flex: none;
  inline-size: var(--icone-32);
  block-size: var(--icone-32);
  border-radius: var(--raio-redondo);
  background: var(--cor-secundaria);
  color: var(--cor-secundaria-contraste);
  font-weight: var(--peso-forte);
  font-size: var(--texto-14);
  line-height: 1;
  overflow: hidden;
}
.lg-avatar > img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.lg-avatar--escudo { border-radius: var(--raio-4); background: var(--cor-superficie-2); color: var(--cor-texto); border: var(--linha) solid var(--cor-borda); }
.lg-avatar--escudo > img { object-fit: contain; background: var(--cor-superficie); }
.lg-avatar--g { inline-size: var(--icone-48); block-size: var(--icone-48); font-size: var(--texto-18); }
/* número de destaque (indicador com rótulo e variação) */
.lg-numero { display: flex; flex-direction: column; gap: var(--esp-4); min-inline-size: 0; }
.lg-numero-rotulo { color: var(--cor-texto-secundario); font-size: var(--texto-apoio); font-weight: var(--peso-medio); }
.lg-numero-valor { font-family: var(--fonte-titulo); font-weight: var(--peso-forte); font-size: var(--texto-36); line-height: var(--altura-linha-titulo); font-variant-numeric: tabular-nums; }
.lg-numero-variacao { display: inline-flex; gap: var(--esp-4); align-items: center; font-size: var(--texto-14); font-weight: var(--peso-semi); color: var(--cor-texto-secundario); }
.lg-numero-variacao--sobe { color: var(--cor-sucesso-texto); }
.lg-numero-variacao--desce { color: var(--cor-erro-texto); }
.lg-numero-variacao--sobe::before { content: "▲"; font-size: var(--texto-12); }
.lg-numero-variacao--desce::before { content: "▼"; font-size: var(--texto-12); }
/* linha do tempo */
.lg-linha-tempo { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.lg-linha-tempo-item { position: relative; display: grid; grid-template-columns: var(--icone-24) minmax(0, 1fr); column-gap: var(--esp-12); padding-block-end: var(--esp-16); }
.lg-linha-tempo-item::before {
  content: "";
  grid-row: 1 / span 2;
  justify-self: center;
  inline-size: var(--esp-12);
  block-size: var(--esp-12);
  margin-block-start: var(--esp-4);
  border-radius: var(--raio-redondo);
  border: var(--linha-grossa) solid var(--cor-borda-controle);
  background: var(--cor-superficie);
  z-index: 1;
}
.lg-linha-tempo-item::after {
  content: "";
  position: absolute;
  inset-block: var(--esp-16) 0;
  inset-inline-start: calc(var(--icone-24) / 2 - var(--linha));
  inline-size: var(--linha-grossa);
  background: var(--cor-borda);
}
.lg-linha-tempo-item:last-child::after { display: none; }
.lg-linha-tempo-item--feito::before { background: var(--cor-primaria); border-color: var(--cor-primaria); }
.lg-linha-tempo-quando { color: var(--cor-texto-secundario); font-size: var(--texto-14); }

/* ===================================== 19. Ícones =====================================
   Um conjunto só (icones.svg, traço de 2 px). Tamanho fixo; decorativo com aria-hidden="true",
   sozinho num botão só com aria-label no botão. */
.lg-icone { inline-size: var(--icone-20); block-size: var(--icone-20); flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.lg-icones-conjunto { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; }
.lg-icone--16 { inline-size: var(--icone-16); block-size: var(--icone-16); }
.lg-icone--24 { inline-size: var(--icone-24); block-size: var(--icone-24); }

/* ===================================== 20. Imagens ===================================== */
.lg-imagem { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--cor-superficie-2); border-radius: var(--raio-8); }
.lg-imagem--1x1 { aspect-ratio: 1; }
.lg-imagem--4x3 { aspect-ratio: 4 / 3; }
.lg-imagem--3x4 { aspect-ratio: 3 / 4; }
.lg-imagem--contida { object-fit: contain; }

/* ===================================== 21. Datas, horas e valores (pt-BR: 24/10/2026, 14h30, R$ 1.234,56) ===================================== */
.lg-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.lg-valor { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: var(--peso-semi); }

/* ===================================== E. Estrutura da página (1.D) =====================================
   <body class="lg-base modo-gestao"> <div class="lg-app"> cabeçalho + menu lateral + <main class="lg-pagina"> */
.lg-app { min-block-size: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
@media (min-width: 1024px) {
  .lg-app--com-menu { grid-template-columns: var(--largura-menu) minmax(0, 1fr); background: linear-gradient(to right, var(--cor-secundaria) var(--largura-menu), var(--cor-fundo) 0); }
  .lg-app--com-menu > .lg-cabecalho { grid-column: 1 / -1; }
}
/* cabeçalho: logo, nome da área, busca (Gestão), avisos e menu da conta */
.lg-cabecalho {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--camada-cabecalho);
  display: flex;
  align-items: center;
  gap: var(--esp-12);
  min-block-size: var(--altura-cabecalho);
  padding: var(--esp-4) var(--esp-16);
  background: var(--cor-superficie);
  border-block-end: var(--linha) solid var(--cor-borda);
}
.lg-cabecalho--marca { background: var(--cor-secundaria); color: var(--cor-secundaria-contraste); border-block-end: var(--linha-marca) solid var(--cor-destaque-sobre-secundaria); --cor-foco: var(--cor-foco-sobre-secundaria); }
.lg-marca { display: inline-flex; align-items: center; gap: var(--esp-8); min-block-size: var(--alvo-minimo); min-inline-size: 0; color: inherit; text-decoration: none; }
.lg-marca > img, .lg-marca > svg { max-block-size: var(--marca-altura); max-inline-size: var(--marca-largura); inline-size: auto; block-size: var(--marca-altura); object-fit: contain; }
.lg-marca-nome { font-family: var(--fonte-titulo); font-weight: var(--peso-forte); font-size: var(--texto-20); line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* logo sem versão para fundo escuro: fundo claro atrás */
.lg-marca--fundo-claro > img { background: var(--cor-superficie); padding: var(--esp-4); border-radius: var(--raio-4); box-sizing: content-box; max-block-size: calc(var(--marca-altura) - var(--esp-8)); }
.lg-cabecalho-area { color: var(--cor-texto-secundario); font-weight: var(--peso-semi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-inline-size: 0; }
.lg-cabecalho--marca .lg-cabecalho-area { color: var(--cor-secundaria-contraste); }
.lg-cabecalho-busca { flex: 1 1 auto; max-inline-size: var(--largura-aviso); margin-inline-start: auto; }
.lg-cabecalho-acoes { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: var(--esp-8); min-inline-size: 0; margin-inline-start: auto; }
.lg-cabecalho-busca + .lg-cabecalho-acoes { margin-inline-start: 0; }
/* 6.2.2: com texto grande ou tela estreita o cabeçalho da marca não rola de lado: a marca encolhe (nome com reticências),
   as ações quebram de linha se faltar lugar e, abaixo de 22rem de largura útil (acompanha o tamanho do texto), "Seguir" vira só o ícone (o nome fica no aria-label) */
.lg-cabecalho--marca .lg-marca { flex: 0 1 auto; }
.lg-app > .lg-cabecalho--marca { container: lg-topo / inline-size; }
@container lg-topo (max-width: 22rem) {
  .lg-cabecalho-acoes .lg-botao-rotulo { position: absolute; inline-size: var(--linha); block-size: var(--linha); margin: calc(var(--linha) * -1); overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .lg-cabecalho-acoes .lg-botao:has(> .lg-botao-rotulo) { inline-size: var(--alvo-minimo); min-inline-size: var(--alvo-minimo); min-block-size: var(--alvo-minimo); padding-inline: 0; }
}
.lg-cabecalho .lg-botao--icone { --botao-borda: transparent; --botao-fundo: transparent; }
.lg-cabecalho--marca .lg-botao--icone { --botao-texto: var(--cor-secundaria-contraste); --botao-fundo-pressionado: var(--cor-secundaria-forte); }
.lg-contador { position: absolute; inset-block-start: var(--esp-4); inset-inline-end: var(--esp-4); min-inline-size: var(--esp-16); padding: 0 var(--esp-4); border-radius: var(--raio-redondo); background: var(--cor-primaria); color: var(--cor-primaria-contraste); font-size: var(--texto-12); font-weight: var(--peso-forte); line-height: var(--altura-linha-texto); }
.lg-menu-abrir { display: none; }
.lg-botao--icone.lg-botao--discreto { --botao-texto: var(--cor-texto); }
@media (max-width: 1023px) {
  .lg-app--com-menu .lg-menu-abrir { display: inline-flex; }
  .lg-cabecalho-busca { display: none; }
}
@media (max-width: 767px) {
  .lg-app:has(.lg-barra-inferior) .lg-menu-abrir { display: none; } /* modo Escola: a barra inferior é o menu */
  .lg-cabecalho-area { display: none; }
  .lg-marca-nome { font-size: var(--texto-18); }
}
/* menu lateral (Gestão): grupos recolhíveis, item atual destacado; abaixo de 1024 vira gaveta */
.lg-menu-lateral {
  --cor-foco: var(--cor-foco-sobre-secundaria);
  position: sticky;
  inset-block-start: var(--altura-cabecalho);
  block-size: calc(100dvh - var(--altura-cabecalho));
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: var(--esp-4);
  padding: var(--esp-12) var(--esp-8) var(--esp-24);
  background: var(--cor-secundaria);
  color: var(--cor-secundaria-contraste);
}
.lg-menu-grupo > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-block-size: var(--controle-altura-p);
  padding: 0 var(--esp-12);
  border-radius: var(--raio-4);
  font-size: var(--texto-14);
  font-weight: var(--peso-semi);
  letter-spacing: 0.02em;
  cursor: pointer;
  list-style: none;
}
.lg-menu-grupo > summary::-webkit-details-marker { display: none; }
.lg-menu-grupo > summary::after { content: ""; inline-size: var(--esp-8); block-size: var(--esp-8); border-inline-end: var(--linha-grossa) solid currentColor; border-block-end: var(--linha-grossa) solid currentColor; transform: rotate(-45deg); transition: transform var(--duracao-rapida) var(--curva); }
.lg-menu-grupo[open] > summary::after { transform: rotate(45deg); }
.lg-menu-grupo > summary:hover { background: var(--cor-secundaria-forte); }
.lg-menu-grupo-itens { display: flex; flex-direction: column; gap: calc(var(--esp-4) / 2); padding-block: var(--esp-4) var(--esp-8); }
.lg-menu-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--esp-12);
  min-block-size: var(--controle-altura);
  padding: var(--esp-4) var(--esp-12);
  border-radius: var(--raio-4);
  color: inherit;
  text-decoration: none;
  font-size: var(--texto-16);
  line-height: var(--altura-linha-compacta);
}
.lg-menu-link:hover { background: var(--cor-secundaria-forte); }
.lg-menu-link .lg-icone { opacity: 0.85; }
.lg-menu-link[aria-current="page"] { background: var(--cor-secundaria-forte); font-weight: var(--peso-semi); }
.lg-menu-link[aria-current="page"]::before { content: ""; position: absolute; inset-block: var(--esp-8); inset-inline-start: 0; inline-size: var(--linha-marca); border-radius: var(--raio-redondo); background: var(--cor-destaque-sobre-secundaria); }
.lg-menu-link[aria-current="page"] .lg-icone { opacity: 1; color: var(--cor-destaque-sobre-secundaria); }
.lg-menu-voltar { font-size: var(--texto-14); }
.lg-menu-cabeca { display: flex; align-items: center; gap: var(--esp-12); padding: var(--esp-8) var(--esp-12) var(--esp-12); border-block-end: var(--linha) solid var(--cor-secundaria-forte); margin-block-end: var(--esp-8); font-weight: var(--peso-semi); }
.lg-menu-fundo { display: none; }
a.lg-menu-cabeca { color: inherit; text-decoration: none; }
/* menu da conta (avatar no cabeçalho): nome e e-mail no topo da lista */
.lg-menu-conta-nome { display: flex; flex-direction: column; gap: calc(var(--esp-4) / 2); padding: var(--esp-8) var(--esp-12); border-block-end: var(--linha) solid var(--cor-borda); font-weight: var(--peso-semi); overflow-wrap: anywhere; }
@media (max-width: 1023px) {
  .lg-menu-lateral {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    z-index: var(--camada-gaveta);
    block-size: 100dvh;
    inline-size: min(var(--largura-menu), 86vw);
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform var(--duracao-media) var(--curva), visibility 0s linear var(--duracao-media);
    box-shadow: var(--sombra-3);
  }
  .lg-app--menu-aberto .lg-menu-lateral { transform: none; visibility: visible; transition: transform var(--duracao-media) var(--curva); }
  .lg-app--menu-aberto .lg-menu-fundo { display: block; position: fixed; inset: 0; z-index: calc(var(--camada-gaveta) - 1); background: var(--cor-sobreposicao); border: 0; }
  .lg-menu-link, .lg-menu-grupo > summary { min-block-size: var(--alvo-minimo); }
}
/* conteúdo da página */
.lg-pagina {
  display: flex;
  flex-direction: column;
  gap: var(--secao-espaco);
  inline-size: 100%;
  max-inline-size: var(--largura-pagina);
  min-inline-size: 0;
  margin-inline: auto;
  padding: var(--esp-24) var(--esp-24) var(--esp-48);
}
.lg-pagina--formulario { max-inline-size: calc(var(--largura-formulario) + var(--esp-48)); }
@media (max-width: 767px) { .lg-pagina { padding: var(--esp-16) var(--esp-16) var(--esp-32); } }
/* cabeçalho da página: caminho, título, 1 linha de descrição, UMA ação principal à direita e "⋯" */
.lg-cabecalho-pagina { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--esp-8) var(--esp-16); align-items: end; }
.lg-cabecalho-pagina > .lg-caminho { grid-column: 1 / -1; }
.lg-cabecalho-pagina-texto { display: flex; flex-direction: column; gap: var(--esp-4); min-inline-size: 0; }
.lg-cabecalho-pagina-descricao { color: var(--cor-texto-secundario); max-inline-size: var(--largura-texto); }
.lg-cabecalho-pagina-acoes { display: flex; align-items: center; gap: var(--alvo-espaco); }
@media (max-width: 767px) {
  .lg-cabecalho-pagina { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
  /* a ação principal da tela vai para o rodapé fixo (.lg-rodape-acao); aqui fica só o "⋯" */
  .lg-cabecalho-pagina-acoes .lg-so-pc { display: none; }
}
/* só no celular / só a partir do tablet (a peça mantém o próprio display onde aparece) */
@media (min-width: 768px) { .lg-so-celular { display: none; } }
@media (max-width: 767px) { .lg-so-pc { display: none; } }
.lg-secao { display: flex; flex-direction: column; gap: var(--esp-16); min-inline-size: 0; }
.lg-secao-cabeca { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-8) var(--esp-16); }
/* barra inferior (modo Escola, celular): até 4 itens + "Mais" */
.lg-barra-inferior { display: none; }
@media (max-width: 767px) {
  .lg-barra-inferior {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: var(--camada-cabecalho);
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    min-block-size: var(--altura-barra-inferior);
    padding-block-end: env(safe-area-inset-bottom, 0px);
    background: var(--cor-superficie);
    border-block-start: var(--linha) solid var(--cor-borda);
    box-shadow: var(--sombra-2);
  }
  .lg-base:has(.lg-barra-inferior) .lg-pagina { padding-block-end: calc(var(--altura-barra-inferior) + var(--esp-32)); }
  .lg-base:has(.lg-barra-inferior) .lg-rodape-acao { inset-block-end: var(--altura-barra-inferior); }
}
.lg-barra-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--esp-4) / 2);
  min-block-size: var(--altura-barra-inferior);
  padding: var(--esp-4);
  border: 0;
  background: transparent;
  color: var(--cor-texto-secundario);
  font: inherit;
  font-size: var(--texto-12);
  font-weight: var(--peso-semi);
  text-decoration: none;
  text-align: center;
  line-height: var(--altura-linha-compacta);
  cursor: pointer;
}
.lg-barra-item .lg-icone { inline-size: var(--icone-24); block-size: var(--icone-24); }
.lg-barra-item[aria-current="page"] { color: var(--cor-primaria-texto); }
.lg-barra-item[aria-current="page"]::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 25%; block-size: var(--linha-marca); border-radius: 0 0 var(--raio-4) var(--raio-4); background: var(--cor-primaria); }
.lg-barra-item:focus-visible { outline-offset: calc(var(--linha-grossa) * -1); }

/* ===================================== 23. Peças do público ===================================== */
/* card de campeonato */
.lg-campeonato { padding: 0; overflow: hidden; gap: 0; }
.lg-campeonato > .lg-imagem { border-radius: 0; }
.lg-campeonato-corpo { display: flex; flex-direction: column; gap: var(--esp-8); padding: var(--cartao-pad); }
.lg-campeonato-meta { display: flex; flex-wrap: wrap; gap: var(--esp-4) var(--esp-16); color: var(--cor-texto-secundario); font-size: var(--texto-14); }
.lg-campeonato-meta > span { display: inline-flex; align-items: center; gap: var(--esp-4); }
/* tabela de jogos: lista por rodada ou dia (no PC, 3 colunas; no celular, empilha) */
.lg-jogos { display: flex; flex-direction: column; gap: var(--esp-16); }
.lg-jogos-dia { display: flex; flex-direction: column; gap: var(--esp-8); }
.lg-jogos-dia > h3 { font-size: var(--texto-16); font-weight: var(--peso-semi); color: var(--cor-texto-secundario); }
.lg-jogo {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--esp-12);
  padding: var(--esp-12) var(--esp-16);
  background: var(--cor-superficie);
  border: var(--linha) solid var(--cor-borda);
  border-radius: var(--raio-8);
}
.lg-jogo-equipe { display: flex; align-items: center; gap: var(--esp-8); min-inline-size: 0; font-weight: var(--peso-semi); }
.lg-jogo-equipe--fora { flex-direction: row-reverse; text-align: end; }
.lg-jogo-info { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--esp-4) var(--esp-16); color: var(--cor-texto-secundario); font-size: var(--texto-14); }
/* placar */
.lg-placar { display: inline-flex; align-items: center; gap: var(--esp-8); font-family: var(--fonte-titulo); font-weight: var(--peso-forte); font-size: var(--texto-24); line-height: 1; font-variant-numeric: tabular-nums; }
.lg-placar > b { min-inline-size: 1.4ch; text-align: center; }
.lg-placar-x { font-size: var(--texto-16); color: var(--cor-texto-secundario); font-weight: var(--peso-semi); }
.lg-placar--hora { font-size: var(--texto-18); color: var(--cor-texto-secundario); }
@media (max-width: 767px) {
  .lg-jogo { grid-template-columns: minmax(0, 1fr) auto; }
  .lg-jogo-equipe--fora { flex-direction: row; text-align: start; grid-row: 2; }
  .lg-jogo .lg-placar { grid-row: 1 / span 2; grid-column: 2; flex-direction: column; gap: var(--esp-4); }
  .lg-jogo .lg-placar-x { display: none; }
  .lg-jogo-info { grid-row: 3; }
}
/* classificação: tabela que continua tabela no celular (.lg-tabela--fixa), com colunas prioritárias */
.lg-classificacao .lg-tabela td:first-child, .lg-classificacao .lg-tabela th:first-child { inline-size: var(--esp-32); text-align: center; }
.lg-classificacao tr.lg-zona td:first-child { box-shadow: inset var(--linha-marca) 0 0 var(--cor-primaria); }
/* galeria */
.lg-galeria { display: grid; gap: var(--esp-8); grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--largura-coluna-p)), 1fr)); list-style: none; margin: 0; padding: 0; }
.lg-galeria a { display: block; border-radius: var(--raio-8); }
.lg-galeria .lg-imagem { aspect-ratio: 1; }
/* card de produto da loja */
.lg-produto { padding: 0; overflow: hidden; gap: 0; }
.lg-produto > .lg-imagem { border-radius: 0; aspect-ratio: 1; }
.lg-produto-corpo { display: flex; flex-direction: column; gap: var(--esp-8); padding: var(--esp-12) var(--cartao-pad) var(--cartao-pad); }
.lg-produto-preco { font-size: var(--texto-20); font-weight: var(--peso-forte); font-variant-numeric: tabular-nums; }
.lg-figura { display: grid; place-items: center; color: var(--cor-texto-secundario); background: var(--cor-superficie-2); }

/* ===================================== 24. Portal público e site (6.1) =====================================
   Peças que nasceram ao refazer o portal do campeonato e as páginas públicas. Aparecem na vitrine, seção 24. */
/* utilidades de texto */
.lg-texto-quebras { white-space: pre-line; overflow-wrap: anywhere; }
.lg-texto-centro { text-align: center; }
.lg-quebra { overflow-wrap: anywhere; }
/* avatar e escudo: tamanhos extras (24 e 72 px) */
.lg-avatar--p { inline-size: var(--icone-24); block-size: var(--icone-24); font-size: var(--texto-12); }
.lg-avatar--gg { inline-size: calc(var(--icone-48) + var(--icone-24)); block-size: calc(var(--icone-48) + var(--icone-24)); font-size: var(--texto-24); }
/* capa do perfil (campeonato, categoria, equipe): faixa de imagem + logo + nome */
.lg-capa { display: flex; flex-direction: column; min-inline-size: 0; }
.lg-capa-faixa {
  position: relative;
  aspect-ratio: 3 / 1;
  max-block-size: calc(var(--esp-64) * 4);
  inline-size: 100%;
  overflow: hidden;
  border-radius: var(--raio-8);
  background: var(--cor-secundaria);
  border-block-end: var(--linha-marca) solid var(--capa-cor, var(--cor-destaque-sobre-secundaria));
}
.lg-capa-faixa > img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.lg-capa-faixa--decorada > img { filter: brightness(0.32); }
.lg-capa-faixa > .lg-capa-decoracao { opacity: 0.35; filter: brightness(0.32); }
.lg-capa-linha { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--esp-12); padding-inline: var(--esp-16); margin-block-start: calc(var(--esp-48) * -1); position: relative; }
.lg-capa-logo {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: calc(var(--esp-64) + var(--esp-32));
  block-size: calc(var(--esp-64) + var(--esp-32));
  overflow: hidden;
  border-radius: var(--raio-8);
  border: var(--linha-grossa) solid var(--cor-superficie);
  background: var(--cor-superficie);
  box-shadow: var(--sombra-1);
  color: var(--cor-texto);
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-forte);
  font-size: var(--texto-30);
}
.lg-capa-logo > img { inline-size: 100%; block-size: 100%; object-fit: contain; }
.lg-capa-texto { display: flex; flex-direction: column; gap: var(--esp-8); padding: var(--esp-12) var(--esp-16) 0; min-inline-size: 0; }
.lg-capa-texto .lg-titulo-1 { overflow-wrap: anywhere; }
.lg-capa-status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-4) var(--esp-12); color: var(--cor-texto-secundario); font-size: var(--texto-14); }
.lg-capa-chips { display: flex; flex-wrap: wrap; gap: var(--esp-8); }
@media (max-width: 767px) {
  .lg-capa-faixa { aspect-ratio: 2 / 1; }
  .lg-capa-logo { inline-size: calc(var(--esp-64) + var(--esp-8)); block-size: calc(var(--esp-64) + var(--esp-8)); font-size: var(--texto-24); }
  .lg-capa-linha { margin-block-start: calc(var(--esp-32) * -1); padding-inline: var(--esp-12); }
  .lg-capa-texto { padding-inline: var(--esp-12); }
}
/* dados: rótulo em cima, valor embaixo (período, local, contato...) */
.lg-dados { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--largura-campo-medio)), 1fr)); gap: var(--esp-16) var(--esp-24); margin: 0; }
.lg-dados > div { display: flex; flex-direction: column; gap: calc(var(--esp-4) / 2); min-inline-size: 0; }
.lg-dados dt { color: var(--cor-texto-secundario); font-size: var(--texto-14); font-weight: var(--peso-semi); }
.lg-dados dd { margin: 0; font-weight: var(--peso-medio); overflow-wrap: anywhere; }
/* link sozinho num dado (e-mail, telefone, site): alvo de toque de 44 px */
.lg-dados dd > a { display: inline-flex; align-items: center; min-block-size: var(--alvo-minimo); }
/* mapa (iframe do Google Maps) com proporção fixa e o link para abrir */
.lg-mapa { display: flex; flex-direction: column; align-items: flex-start; gap: var(--esp-8); }
.lg-mapa-quadro { inline-size: 100%; aspect-ratio: 2 / 1; border: var(--linha) solid var(--cor-borda); border-radius: var(--raio-8); background: var(--cor-superficie-2); overflow: hidden; }
.lg-mapa-quadro > iframe { display: block; inline-size: 100%; block-size: 100%; border: 0; }
@media (max-width: 767px) { .lg-mapa-quadro { aspect-ratio: 4 / 3; } }
/* jogo inteiro clicável (lista de jogos do portal) */
a.lg-jogo { color: inherit; text-decoration: none; }
a.lg-jogo:hover { border-color: var(--cor-borda-controle); background: var(--cor-superficie-2); }
a.lg-jogo:focus-visible { outline: var(--linha-grossa) solid var(--cor-foco); outline-offset: var(--linha-grossa); }
.lg-jogo-rotulo { grid-column: 1 / -1; color: var(--cor-texto-secundario); font-size: var(--texto-12); font-weight: var(--peso-semi); letter-spacing: 0.06em; text-transform: uppercase; }
.lg-jogo-meio { display: flex; flex-direction: column; align-items: center; gap: var(--esp-4); }
.lg-jogo-penaltis { color: var(--cor-texto-secundario); font-size: var(--texto-12); }
@media (max-width: 767px) {
  .lg-jogo-rotulo { grid-row: auto; }
  .lg-jogo .lg-jogo-meio { grid-row: 2 / span 2; grid-column: 2; }
  .lg-jogo:has(.lg-jogo-rotulo) .lg-jogo-equipe { grid-row: 2; }
  .lg-jogo:has(.lg-jogo-rotulo) .lg-jogo-equipe--fora { grid-row: 3; }
  .lg-jogo:has(.lg-jogo-rotulo) .lg-jogo-info { grid-row: 4; }
}
/* placar em destaque (página do jogo) */
.lg-placar-destaque { display: flex; flex-direction: column; align-items: center; gap: var(--esp-12); padding: var(--esp-24) var(--cartao-pad); text-align: center; }
.lg-placar-destaque-linha { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; gap: var(--esp-16); inline-size: 100%; }
.lg-placar-destaque-equipe { display: flex; flex-direction: column; align-items: center; gap: var(--esp-8); min-inline-size: 0; font-weight: var(--peso-semi); overflow-wrap: anywhere; }
.lg-placar-destaque-equipe > a { border-radius: var(--raio-8); }
.lg-placar-destaque .lg-placar { font-size: var(--texto-36); padding-block-start: var(--esp-16); }
.lg-placar-destaque-meta { color: var(--cor-texto-secundario); font-size: var(--texto-14); }
@media (max-width: 767px) { .lg-placar-destaque .lg-placar { font-size: var(--texto-30); } }
/* posição no ranking (1º, 2º, 3º com cor de medalha; sempre com o número) */
.lg-posicao { display: inline-grid; place-items: center; flex: none; inline-size: var(--icone-32); block-size: var(--icone-32); border-radius: var(--raio-redondo); background: var(--cor-superficie-2); color: var(--cor-texto); font-weight: var(--peso-forte); font-size: var(--texto-14); font-variant-numeric: tabular-nums; }
.lg-posicao--ouro { background: var(--cor-ouro-fundo); color: var(--cor-ouro); box-shadow: inset 0 0 0 var(--linha-grossa) var(--cor-ouro); }
.lg-posicao--prata { background: var(--cor-prata-fundo); color: var(--cor-prata); box-shadow: inset 0 0 0 var(--linha-grossa) var(--cor-prata); }
.lg-posicao--bronze { background: var(--cor-bronze-fundo); color: var(--cor-bronze); box-shadow: inset 0 0 0 var(--linha-grossa) var(--cor-bronze); }
/* valor grande à direita de uma linha da lista (gols, pontos) */
.lg-valor-destaque { display: flex; flex-direction: column; align-items: flex-end; font-family: var(--fonte-titulo); font-weight: var(--peso-forte); font-size: var(--texto-24); line-height: 1; font-variant-numeric: tabular-nums; }
.lg-valor-destaque > small { font-family: var(--fonte-interface); font-size: var(--texto-12); font-weight: var(--peso-medio); color: var(--cor-texto-secundario); }
/* cartão disciplinar (amarelo, vermelho, azul): retângulo pequeno ao lado do texto */
.lg-cartao-disciplinar { display: inline-block; flex: none; inline-size: var(--esp-12); block-size: var(--esp-16); border-radius: calc(var(--raio-4) / 2); background: var(--cor-neutro); }
.lg-cartao-disciplinar--amarelo { background: var(--cor-cartao-amarelo); }
.lg-cartao-disciplinar--vermelho { background: var(--cor-cartao-vermelho); }
.lg-cartao-disciplinar--azul { background: var(--cor-cartao-azul); }
/* barra de resultado (enquete): <progress class="lg-progresso" value max> */
.lg-progresso { appearance: none; -webkit-appearance: none; inline-size: 100%; block-size: var(--esp-8); border: 0; border-radius: var(--raio-redondo); background: var(--cor-superficie-2); overflow: hidden; color: var(--cor-primaria); }
.lg-progresso::-webkit-progress-bar { background: var(--cor-superficie-2); border-radius: var(--raio-redondo); }
.lg-progresso::-webkit-progress-value { background: var(--cor-primaria); border-radius: var(--raio-redondo); }
.lg-progresso::-moz-progress-bar { background: var(--cor-primaria); border-radius: var(--raio-redondo); }
/* resposta / citação (resposta da organização a um comentário) */
.lg-citacao { display: flex; flex-direction: column; gap: var(--esp-4); padding: var(--esp-8) var(--esp-12); border-inline-start: var(--linha-marca) solid var(--cor-primaria); background: var(--cor-superficie-2); border-radius: 0 var(--raio-4) var(--raio-4) 0; }
/* capa de vídeo (YouTube) com o símbolo de tocar por cima */
.lg-video-capa { position: relative; display: block; border-radius: var(--raio-8); overflow: hidden; }
.lg-video-capa::after { content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 50%; inline-size: var(--icone-48); block-size: var(--icone-48); transform: translate(-50%, -50%); border-radius: var(--raio-redondo); background: var(--cor-sobreposicao); box-shadow: inset 0 0 0 var(--linha-grossa) var(--cor-superficie); }
.lg-video-capa::before { content: ""; position: absolute; z-index: 1; inset-block-start: 50%; inset-inline-start: 50%; transform: translate(-30%, -50%); border-block: var(--esp-8) solid transparent; border-inline-start: var(--esp-12) solid var(--cor-superficie); }
.lg-video { display: block; inline-size: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--raio-8); background: var(--cor-superficie-2); }
/* classificação ao vivo: o quadradinho de cada equipe (placar do momento e subida/descida) */
.lg-vivo { display: inline-flex; align-items: center; gap: var(--esp-4); padding: calc(var(--esp-4) / 2) var(--esp-4); border-radius: var(--raio-4); font-size: var(--texto-12); font-weight: var(--peso-semi); white-space: nowrap; background: var(--cor-neutro-fundo); color: var(--cor-neutro-texto); }
.lg-vivo--sobe { background: var(--cor-sucesso-fundo); color: var(--cor-sucesso-texto); }
.lg-vivo--desce { background: var(--cor-erro-fundo); color: var(--cor-erro-texto); }
.lg-vivo-ponto { inline-size: var(--esp-8); block-size: var(--esp-8); border-radius: var(--raio-redondo); background: var(--cor-erro); }
@media (prefers-reduced-motion: no-preference) { .lg-vivo-ponto { animation: lg-pulsar calc(var(--duracao-media) * 6) var(--curva) infinite; } }
@keyframes lg-pulsar { 50% { opacity: 0.3; } }
/* bloco que se atualiza sozinho (data-lg-atualizar): pisca de leve quando muda */
.lg-atualizado { animation: lg-atualizado calc(var(--duracao-media) * 5) var(--curva); }
@keyframes lg-atualizado { from { background: var(--cor-primaria-suave); } }
@media (prefers-reduced-motion: reduce) { .lg-atualizado { animation: none; } }
/* escalação no campo (formação): linhas de jogadores sobre o gramado */
.lg-escalacao { display: flex; flex-direction: column; gap: var(--esp-12); min-inline-size: 0; }
.lg-campo-jogo { display: flex; flex-direction: column; gap: var(--esp-16); padding: var(--esp-16) var(--esp-8); border-radius: var(--raio-8); background: var(--cor-secundaria); color: var(--cor-secundaria-contraste); }
.lg-campo-jogo-linha { display: flex; flex-wrap: wrap; justify-content: space-around; gap: var(--esp-8); }
.lg-campo-jogador { display: flex; flex-direction: column; align-items: center; gap: var(--esp-4); min-inline-size: var(--esp-64); max-inline-size: calc(var(--esp-64) + var(--esp-24)); font-size: var(--texto-12); text-align: center; overflow-wrap: anywhere; }
.lg-campo-jogador .lg-avatar { box-shadow: 0 0 0 var(--linha-grossa) var(--cor-destaque-sobre-secundaria); }
.lg-escalacao--so-numero .lg-campo-jogador-nome { display: none; }
/* faixa de patrocínio (banners que trocam sozinhos; pausa com o mouse/foco; "menos movimento" não troca) */
.lg-carrossel { position: relative; display: flex; flex-direction: column; gap: var(--esp-8); }
.lg-carrossel-itens { position: relative; display: grid; border-radius: var(--raio-8); overflow: hidden; }
.lg-carrossel-item { grid-area: 1 / 1; display: block; visibility: hidden; opacity: 0; transition: opacity var(--duracao-media) var(--curva), visibility 0s linear var(--duracao-media); }
.lg-carrossel-item[aria-hidden="false"], .lg-carrossel-item:only-child { visibility: visible; opacity: 1; transition: opacity var(--duracao-media) var(--curva); }
.lg-carrossel-item img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 4 / 1; object-fit: cover; }
.lg-carrossel-pontos { display: flex; justify-content: center; gap: 0; }
.lg-carrossel-ponto { display: inline-grid; place-items: center; inline-size: var(--alvo-minimo); block-size: var(--alvo-minimo); padding: 0; border: 0; background: transparent; cursor: pointer; }
.lg-carrossel-ponto::before { content: ""; inline-size: var(--esp-8); block-size: var(--esp-8); border-radius: var(--raio-redondo); background: var(--cor-borda-controle); }
.lg-carrossel-ponto[aria-current="true"]::before { background: var(--cor-primaria); inline-size: var(--esp-24); }
/* logos (apoios e patrocinadores) */
.lg-logos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--largura-coluna-p)), 1fr)); gap: var(--esp-12); list-style: none; margin: 0; padding: 0; }
.lg-logos > li { min-inline-size: 0; }
.lg-logo-item { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--esp-8); padding: var(--esp-12); border: var(--linha) solid var(--cor-borda); border-radius: var(--raio-8); background: var(--cor-superficie); color: inherit; text-decoration: none; text-align: center; font-size: var(--texto-14); font-weight: var(--peso-semi); overflow-wrap: anywhere; }
a.lg-logo-item:hover { border-color: var(--cor-borda-controle); }
.lg-logo-item img { inline-size: 100%; aspect-ratio: 3 / 2; object-fit: contain; }
/* rodapé do site (páginas públicas): links, preferências (tema e idioma) e "feito com" */
.lg-rodape-site { display: flex; flex-direction: column; gap: var(--esp-16); padding: var(--esp-24) var(--esp-16) var(--esp-32); margin-block-start: var(--esp-24); border-block-start: var(--linha) solid var(--cor-borda); background: var(--cor-superficie); color: var(--cor-texto-secundario); font-size: var(--texto-14); }
.lg-rodape-site-in { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--esp-16) var(--esp-24); inline-size: 100%; max-inline-size: var(--largura-pagina); margin-inline: auto; }
.lg-rodape-site-links { display: flex; flex-wrap: wrap; gap: 0 var(--esp-8); list-style: none; margin: 0; padding: 0; }
.lg-rodape-site-links a { display: inline-flex; align-items: center; min-block-size: var(--alvo-minimo); padding-inline: var(--esp-4); color: inherit; }
.lg-rodape-site p > a { display: inline-flex; align-items: center; min-block-size: var(--alvo-minimo); }
.lg-rodape-site-marca { display: inline-flex; align-items: center; gap: var(--esp-8); min-block-size: var(--alvo-minimo); color: var(--cor-texto); font-weight: var(--peso-semi); text-decoration: none; }
/* símbolo da marca num quadro da cor secundária: aparece igual no tema claro e no escuro */
.lg-avatar--simbolo { border-radius: var(--raio-4); }
.lg-avatar--simbolo > img { object-fit: contain; padding: var(--esp-4); }
.lg-preferencias { display: flex; flex-wrap: wrap; gap: var(--esp-12); }
.lg-preferencias .lg-campo { min-inline-size: min(100%, var(--largura-campo-curto)); }
/* aviso de cookies (fica preso embaixo; não cobre o rodapé fixo de ação) */
.lg-cookies {
  position: fixed;
  inset-inline: var(--esp-12);
  inset-block-end: var(--esp-12);
  z-index: var(--camada-aviso);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-8) var(--esp-16);
  max-inline-size: var(--largura-aviso);
  margin-inline: auto;
  padding: var(--esp-12) var(--esp-16);
  border: var(--linha) solid var(--cor-borda);
  border-radius: var(--raio-8);
  background: var(--cor-superficie-elevada);
  color: var(--cor-texto);
  box-shadow: var(--sombra-3);
}
.lg-cookies p { flex: 1 1 var(--largura-campo-curto); }
.lg-cookies-acoes { display: flex; flex-wrap: wrap; gap: var(--alvo-espaco); }
.lg-base:has(.lg-rodape-acao) .lg-cookies { inset-block-end: calc(var(--altura-rodape-acao) + var(--esp-12)); }

/* texto corrido longo (termos, política de privacidade, regulamentos): títulos, parágrafos, listas e tabelas sem classe */
.lg-prosa { display: flex; flex-direction: column; gap: var(--esp-12); max-inline-size: var(--largura-texto); min-inline-size: 0; line-height: var(--altura-linha-texto); overflow-wrap: anywhere; }
.lg-prosa > h2 { margin-block-start: var(--esp-16); font-size: var(--titulo-secao); font-family: var(--fonte-titulo); }
.lg-prosa > h3 { margin-block-start: var(--esp-8); font-size: var(--texto-16); font-family: var(--fonte-interface); font-weight: var(--peso-semi); }
.lg-prosa :is(h2, h3)[id] { scroll-margin-block-start: var(--esp-24); }
.lg-prosa > :is(ul, ol) { display: flex; flex-direction: column; gap: var(--esp-8); padding-inline-start: var(--esp-24); }
.lg-prosa a:not([class]) { color: var(--cor-link); text-decoration: underline; text-underline-offset: 0.18em; }
.lg-prosa code { padding-inline: var(--esp-4); border-radius: var(--raio-4); background: var(--cor-superficie-2); font-size: var(--texto-14); }

/* ===================================== 25. Peças criadas na fase 2 (uma seção por frente; só peças genéricas, prefixo lg-) =====================================
/* ---- 25.A1 Legacy: público, conta e acesso, inscrição e pagamento ---- */
/* aviso preso embaixo da tela (sessão que vai terminar): texto + ação; não cobre o rodapé fixo de ação nem a barra inferior */
.lg-aviso-preso {
  position: fixed;
  inset-inline: var(--esp-12);
  inset-block-end: var(--esp-12);
  z-index: var(--camada-aviso);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-8) var(--esp-12);
  max-inline-size: var(--largura-aviso);
  margin-inline: auto;
  padding: var(--esp-12) var(--esp-16);
  border: var(--linha) solid var(--cor-aviso-borda);
  border-inline-start: var(--linha-marca) solid var(--cor-aviso-borda);
  border-radius: var(--raio-8);
  background: var(--cor-superficie-elevada);
  color: var(--cor-texto);
  box-shadow: var(--sombra-3);
}
.lg-aviso-preso > .lg-icone { flex: none; color: var(--cor-aviso-texto); }
.lg-aviso-preso > span { flex: 1 1 var(--largura-campo-curto); min-inline-size: 0; }
.lg-aviso-preso-acoes { display: flex; flex-wrap: wrap; gap: var(--alvo-espaco); }
.lg-base:has(.lg-rodape-acao) .lg-aviso-preso { inset-block-end: calc(var(--altura-rodape-acao) + var(--esp-12)); }
@media (max-width: 767px) { .lg-base:has(.lg-barra-inferior) .lg-aviso-preso { inset-block-end: calc(var(--altura-barra-inferior) + var(--esp-12)); } }
/* rodapé do site: e-mail e WhatsApp longos quebram a linha (texto em 200% no celular não cria rolagem lateral) */
.lg-rodape-site p > a { max-inline-size: 100%; overflow-wrap: anywhere; }
/* fim 25.A1 */
/* ---- 25.A2 Legacy: loja, professor, família, mesário e súmula ---- */
/* texto longo para ler antes de aceitar (termo de adesão, termo do profissional): rola dentro da caixa */
.lg-termo {
  max-block-size: 55dvh;
  overflow: auto;
  overscroll-behavior: contain;
  padding: var(--esp-16);
  border: var(--linha) solid var(--cor-borda);
  border-radius: var(--raio-8);
  background: var(--cor-superficie-2);
  max-inline-size: none;
}
.lg-termo:focus-visible { outline: var(--linha-grossa) solid var(--cor-foco); outline-offset: var(--linha-grossa); }
.lg-termo--texto { white-space: pre-line; }
/* grade de fotos da loja: cada foto com a caixa de escolher por cima (a foto inteira marca/desmarca), "ampliar" e selo */
.lg-fotos { display: grid; gap: var(--esp-8); grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--largura-coluna-p)), 1fr)); list-style: none; margin: 0; padding: 0; }
.lg-fotos--p { grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(var(--largura-coluna-p) * 0.66)), 1fr)); }
.lg-foto { position: relative; min-inline-size: 0; border-radius: var(--raio-8); overflow: hidden; background: var(--cor-superficie-2); }
.lg-foto > .lg-imagem { border-radius: 0; aspect-ratio: 3 / 2; }
.lg-foto-marcar { position: absolute; inset: 0; display: flex; align-items: flex-start; padding: var(--esp-8); cursor: pointer; }
.lg-foto-marcar > input { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; margin: 0; opacity: 0; cursor: pointer; }
.lg-foto-marcar > .lg-marcar-caixa { box-shadow: var(--sombra-1); }
.lg-foto-marcar > input:checked + .lg-marcar-caixa { background: var(--cor-primaria); border-color: var(--cor-primaria); }
.lg-foto-marcar > input:checked + .lg-marcar-caixa::after { content: ""; position: absolute; inset-inline-start: 30%; inset-block-start: 8%; inline-size: 34%; block-size: 62%; border-inline-end: var(--linha-grossa) solid var(--cor-primaria-contraste); border-block-end: var(--linha-grossa) solid var(--cor-primaria-contraste); transform: rotate(45deg); }
.lg-foto-marcar > input:focus-visible + .lg-marcar-caixa { outline: var(--linha-grossa) solid var(--cor-foco); outline-offset: var(--linha-grossa); }
.lg-foto:has(.lg-foto-marcar > input:checked) { box-shadow: inset 0 0 0 var(--linha-marca) var(--cor-primaria); }
.lg-foto:has(.lg-foto-marcar > input:checked) > .lg-imagem { opacity: 0.85; }
.lg-foto-acao { position: absolute; inset-block-end: var(--esp-8); inset-inline-end: var(--esp-8); z-index: 1; }
.lg-foto-acao > .lg-botao, a.lg-foto-acao { --botao-fundo: var(--cor-secundaria); --botao-texto: var(--cor-secundaria-contraste); --botao-borda: var(--cor-secundaria); --cor-foco: var(--cor-foco-sobre-secundaria); }
a.lg-foto-acao { display: inline-flex; align-items: center; gap: var(--esp-4); min-block-size: var(--controle-altura-p); padding-inline: var(--esp-12); border-radius: var(--raio-4); background: var(--cor-secundaria); color: var(--cor-secundaria-contraste); font-size: var(--texto-14); font-weight: var(--peso-semi); text-decoration: none; }
.lg-foto-selo { position: absolute; inset-block-start: var(--esp-8); inset-inline-start: var(--esp-8); z-index: 1; }
/* rodapé de ação que fica preso embaixo também no PC (carrinho da loja: contagem + comprar) */
.lg-rodape-acao--sempre {
  position: sticky;
  inset-block-end: 0;
  z-index: var(--camada-fixo);
  padding: var(--esp-12) var(--esp-16);
  background: var(--cor-superficie);
  border: var(--linha) solid var(--cor-borda);
  border-radius: var(--raio-8) var(--raio-8) 0 0;
  box-shadow: var(--sombra-2);
}
/* fim 25.A2 */
/* ---- 25.A3 Legacy: meus campeonatos e console do campeonato ---- */
/* seletor dentro do menu lateral (ex.: categoria do campeonato): rótulo na cor do menu */
.lg-menu-seletor { padding: 0 var(--esp-12) var(--esp-12); }
.lg-menu-seletor .lg-rotulo { color: inherit; font-size: var(--texto-14); }
/* texto de caixa de marcar/opção com uma linha de ajuda embaixo */
.lg-marcar-texto { display: flex; flex-direction: column; gap: calc(var(--esp-4) / 2); min-inline-size: 0; }
/* número em destaque à esquerda de uma linha da lista ("Para hoje": 3 jogos hoje) */
.lg-numero-destaque { display: inline-grid; place-items: center; flex: none; min-inline-size: var(--icone-32); block-size: var(--icone-32); padding-inline: var(--esp-4); border-radius: var(--raio-redondo); background: var(--cor-primaria-suave); color: var(--cor-primaria-texto); font-family: var(--fonte-titulo); font-weight: var(--peso-forte); font-size: var(--texto-18); font-variant-numeric: tabular-nums; }
/* metadado com ícone pequeno na mesma linha (data, cidade, seguidores) */
.lg-meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--esp-4); }
/* lista de escolhas grandes num diálogo (passos de um assistente: tipo, modalidade) */
.lg-escolhas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--esp-8); }
.lg-escolha { display: flex; align-items: center; gap: var(--esp-12); inline-size: 100%; min-block-size: var(--alvo-minimo); padding: var(--esp-12) var(--esp-16); border: var(--linha) solid var(--cor-borda-controle); border-radius: var(--raio-8); background: var(--cor-superficie); color: var(--cor-texto); font: inherit; text-align: start; cursor: pointer; }
.lg-escolha:hover { border-color: var(--cor-texto-secundario); background: var(--cor-superficie-2); }
.lg-escolha:focus-visible { outline: var(--linha-grossa) solid var(--cor-foco); outline-offset: var(--linha-grossa); }
.lg-escolha > .lg-icone:first-child { color: var(--cor-primaria-texto); }
.lg-escolha-texto { flex: 1 1 auto; display: flex; flex-direction: column; gap: calc(var(--esp-4) / 2); min-inline-size: 0; }
.lg-escolha--compacta { padding-block: var(--esp-8); }
/* recorte de imagem (canvas) antes do envio */
.lg-recorte-tela { display: block; max-inline-size: 100%; margin-inline: auto; border-radius: var(--raio-4); background: var(--cor-superficie-2); touch-action: none; cursor: grab; }
.lg-recorte-zoom { inline-size: 100%; min-block-size: var(--alvo-minimo); accent-color: var(--cor-primaria); }
/* formulário dentro de diálogo: corpo rola e o rodapé fica fixo embaixo */
.lg-dialogo-form { display: flex; flex-direction: column; flex: 1 1 auto; min-block-size: 0; }
/* linha alinhada pela base (campo com rótulo + botão ao lado, ex.: enviar mensagem) */
.lg-linha--fundo { align-items: flex-end; }
/* lista que se reordena (arrastar ou setas) */
.lg-reordenar .lg-lista-item { cursor: grab; }
.lg-reordenar .lg-lista-item[aria-grabbed="true"] { background: var(--cor-primaria-suave); }
.lg-reordenar-acoes { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--esp-4); flex: none; }
/* item de lista com texto longo (mensagem, comentário): tudo alinhado pelo topo */
.lg-lista-item.lg-mensagem { align-items: flex-start; }
/* campo de cor (input type=color) com a altura dos outros campos */
.lg-entrada--cor { inline-size: calc(var(--controle-altura) * 2); padding: var(--esp-4); cursor: pointer; }
/* prévia de imagem já enviada dentro de um formulário */
.lg-imagem-previa { max-block-size: calc(var(--esp-64) + var(--esp-24)); aspect-ratio: auto; }
/* campo com código para copiar (incorporação, chave de API) */
.lg-entrada--codigo { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
/* escolha por imagem (banco de imagens): grade de opções com a imagem e o nome */
.lg-galeria-escolha { display: grid; gap: var(--esp-8); grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--largura-coluna-p)), 1fr)); padding-block-start: var(--esp-12); }
.lg-imagem-opcao { position: relative; display: flex; flex-direction: column; gap: var(--esp-4); padding: var(--esp-4); border: var(--linha-grossa) solid transparent; border-radius: var(--raio-8); cursor: pointer; font-size: var(--texto-14); }
.lg-imagem-opcao > input { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; margin: 0; opacity: 0; cursor: pointer; }
.lg-imagem-opcao > img { display: block; inline-size: 100%; aspect-ratio: 3 / 1; object-fit: cover; border-radius: var(--raio-4); background: var(--cor-superficie-2); }
.lg-imagem-opcao:has(input:checked) { border-color: var(--cor-primaria-texto); background: var(--cor-primaria-suave); }
.lg-imagem-opcao:has(input:focus-visible) { outline: var(--linha-grossa) solid var(--cor-foco); outline-offset: var(--linha-grossa); }
/* campo curto numa linha de campos (número da camisa) */
.lg-linha > .lg-campo--curto { flex: 0 0 calc(var(--esp-64) + var(--esp-32)); }
/* botão que escolhe arquivo (o input fica por cima, invisível, e continua focável) */
.lg-upload-botao { position: relative; overflow: hidden; }
.lg-upload-botao > input[type="file"] { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; margin: 0; opacity: 0; cursor: pointer; }
.lg-upload-botao:focus-within { outline: var(--linha-grossa) solid var(--cor-foco); outline-offset: var(--linha-grossa); }
/* miniatura de um resultado de busca (sugestões de notícias e vídeos) */
.lg-miniatura { flex: none; inline-size: calc(var(--esp-64) + var(--esp-16)); aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--raio-4); background: var(--cor-superficie-2); }
/* fim 25.A3 */
/* ---- 25.A4 Legacy: classificação, jogos, rankings, financeiro e jurídico ---- */
/* linha de cima do cartão de jogo (status, grupo e o menu "⋯" do jogo) */
.lg-jogo-topo { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-4) var(--esp-8); min-inline-size: 0; }
.lg-jogo-topo > .lg-menu-mais { margin-inline-start: auto; }
@media (max-width: 767px) {
  .lg-jogo:has(.lg-jogo-topo) .lg-jogo-equipe { grid-row: 2; }
  .lg-jogo:has(.lg-jogo-topo) .lg-jogo-equipe--fora { grid-row: 3; }
  .lg-jogo:has(.lg-jogo-topo) .lg-placar, .lg-jogo:has(.lg-jogo-topo) .lg-jogo-meio { grid-row: 2 / span 2; }
  .lg-jogo:has(.lg-jogo-topo) .lg-jogo-info { grid-row: 4; }
}
/* indicadores com valor longo (R$ 769.240,20): coluna mais larga, valor sem quebrar no meio */
.lg-grade--valores { grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--largura-coluna)), 1fr)); }
.lg-grade--valores .lg-numero-valor { overflow-wrap: normal; white-space: nowrap; }
@media (max-width: 767px) { .lg-grade--valores .lg-numero-valor { font-size: var(--texto-30); } }
/* item além do limite de uma lista longa (data-lg-limite): aparece com "Mostrar mais" */
.lg-base [data-lg-alem] { display: none; }
/* linha de tabela escondida (busca ou limite) continua escondida no celular, onde a linha vira cartão (display: grid) */
.lg-tabela:not(.lg-tabela--fixa) tr[hidden], .lg-tabela:not(.lg-tabela--fixa) tr[data-lg-alem] { display: none; }
/* lista que se reordena arrastando (data-lg-reordenar da 25.A3) ou pelos botões subir/descer */
.lg-reordenar > li[draggable="true"] { cursor: grab; }
.lg-reordenar > li[aria-grabbed="true"] { opacity: 0.5; background: var(--cor-primaria-suave); }
.lg-reordenar-alca { flex: none; color: var(--cor-texto-secundario); }
/* chaveamento em árvore (mata-mata): uma coluna por fase; cada par de jogos liga ao jogo da fase seguinte.
   Rola para o lado dentro da caixa (nunca a página). */
.lg-chaveamento { overflow-x: auto; padding-block-end: var(--esp-8); border-radius: var(--raio-8); }
.lg-chaveamento-fases { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(calc(var(--largura-coluna-p) + var(--esp-64)), 1fr); gap: var(--esp-32); list-style: none; margin: 0; padding: 0; min-inline-size: min-content; }
.lg-chaveamento-fase { display: flex; flex-direction: column; gap: var(--esp-12); min-inline-size: 0; }
.lg-chaveamento-titulo { font-size: var(--texto-14); font-weight: var(--peso-semi); color: var(--cor-texto-secundario); text-transform: uppercase; letter-spacing: 0.04em; }
.lg-chaveamento-jogos { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-around; gap: var(--esp-16); list-style: none; margin: 0; padding: 0; }
.lg-chaveamento-par { position: relative; flex: 1 1 0; display: flex; flex-direction: column; justify-content: space-around; gap: var(--esp-16); }
.lg-chaveamento-par:has(> :nth-child(2))::after { content: ""; position: absolute; inset-block: 25%; inset-inline-end: calc(var(--esp-16) * -1); inline-size: var(--esp-16); border: var(--linha-grossa) solid var(--cor-borda-controle); border-inline-start: 0; border-radius: 0 var(--raio-4) var(--raio-4) 0; pointer-events: none; }
.lg-chaveamento-jogo { display: flex; flex-direction: column; gap: var(--esp-4); padding: var(--esp-8) var(--esp-12); background: var(--cor-superficie); border: var(--linha) solid var(--cor-borda); border-radius: var(--raio-8); }
.lg-chaveamento-jogo--decidido { border-color: var(--cor-borda-controle); }
.lg-chaveamento-equipe { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-8); min-inline-size: 0; }
.lg-chaveamento-equipe > span { min-inline-size: 0; overflow-wrap: anywhere; }
.lg-chaveamento-equipe--vencedor { font-weight: var(--peso-forte); }
.lg-chaveamento-equipe--vencedor > b::before { content: "✓ "; color: var(--cor-sucesso-texto); }
.lg-chaveamento-campeao { display: flex; flex-direction: column; align-items: center; gap: var(--esp-8); padding: var(--esp-16); text-align: center; border: var(--linha-grossa) solid var(--cor-ouro); border-radius: var(--raio-8); background: var(--cor-superficie); font-weight: var(--peso-forte); }
.lg-chaveamento-campeao > .lg-icone { color: var(--cor-ouro); }
/* linha de tabela com alerta (ex.: árbitro em dois jogos ao mesmo tempo) e linha que agrupa as de baixo (ex.: o dia) */
.lg-tabela tbody tr.lg-tabela-alerta > * { background: var(--cor-erro-fundo); }
.lg-tabela tbody tr.lg-tabela-grupo > * { background: var(--cor-superficie-2); font-weight: var(--peso-semi); }
@media (max-width: 767px) {
  .lg-tabela:not(.lg-tabela--fixa) tr.lg-tabela-alerta { border-color: var(--cor-erro-borda); background: var(--cor-erro-fundo); }
  .lg-tabela:not(.lg-tabela--fixa) tr.lg-tabela-grupo { background: var(--cor-superficie-2); box-shadow: none; }
  .lg-tabela:not(.lg-tabela--fixa) tr.lg-tabela-grupo > * { justify-content: flex-start; text-align: start; }
}
/* tabela que cresce com o conteúdo (campos dentro das linhas): sem rolagem vertical própria */
.lg-tabela-caixa--livre { max-block-size: none; }
/* fim 25.A4 */
/* ---- 25.A5 Legacy: planejamento, produção, atendimento, comunicação e credenciamento ---- */
/* número (indicador) com tom: resultado negativo / positivo */
.lg-numero--erro .lg-numero-valor { color: var(--cor-erro-texto); }
.lg-numero--sucesso .lg-numero-valor { color: var(--cor-sucesso-texto); }
/* legenda com pontos de cor (faixas de origem, mapas): sempre acompanha o texto */
.lg-legenda { display: flex; flex-wrap: wrap; gap: var(--esp-8) var(--esp-16); list-style: none; margin: 0; padding: 0; font-size: var(--texto-14); }
.lg-legenda-item { display: inline-flex; align-items: center; gap: var(--esp-8); }
.lg-ponto { flex: none; inline-size: var(--esp-12); block-size: var(--esp-12); border-radius: var(--raio-redondo); background: var(--cor-neutro); }
.lg-ponto--info { background: var(--cor-info); }
.lg-ponto--sucesso { background: var(--cor-sucesso); }
.lg-ponto--aviso { background: var(--cor-aviso); }
.lg-ponto--erro { background: var(--cor-erro); }
/* mapa das cidades (SVG desenhado no servidor, sem serviço externo) */
.lg-mapa-cidades { margin: 0; inline-size: 100%; max-inline-size: 40rem; border: var(--linha) solid var(--cor-borda); border-radius: var(--raio-8); background: var(--cor-superficie); color: var(--cor-texto); overflow: hidden; }
.lg-mapa-cidades > svg { display: block; inline-size: 100%; block-size: auto; }
.lg-mapa-cidades-ponto { fill: var(--cor-neutro); fill-opacity: 0.8; stroke: var(--cor-superficie); stroke-width: var(--linha-grossa); }
.lg-mapa-cidades-ponto--info { fill: var(--cor-info); }
.lg-mapa-cidades-ponto--sucesso { fill: var(--cor-sucesso); }
.lg-mapa-cidades-ponto--aviso { fill: var(--cor-aviso); }
.lg-mapa-cidades-rotulo { fill: currentColor; font-family: var(--fonte-interface); font-size: var(--texto-12); }
/* QR code (credenciamento) */
.lg-qr { margin: 0; inline-size: min(100%, 17.5rem); padding: var(--esp-12); border: var(--linha) solid var(--cor-borda); border-radius: var(--raio-8); background: var(--cor-superficie); }
.lg-qr > svg { display: block; inline-size: 100%; block-size: auto; }
/* grade de jogos (planejamento › tabela): horários × campos, com arrastar e soltar */
.lg-grade-jogos-caixa { max-inline-size: 100%; max-block-size: 75vh; overflow: auto; border: var(--linha) solid var(--cor-borda); border-radius: var(--raio-8); background: var(--cor-superficie); }
.lg-grade-jogos { min-inline-size: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--texto-14); }
.lg-grade-jogos th, .lg-grade-jogos td { padding: var(--esp-4); text-align: start; vertical-align: top; border-block-end: var(--linha) solid var(--cor-borda); border-inline-end: var(--linha) solid var(--cor-borda); }
.lg-grade-jogos thead th { position: sticky; inset-block-start: 0; z-index: var(--camada-fixo); background: var(--cor-superficie-2); color: var(--cor-texto-secundario); font-weight: var(--peso-semi); white-space: nowrap; }
.lg-grade-jogos tbody th { position: sticky; inset-inline-start: 0; z-index: 1; background: var(--cor-superficie-2); font-weight: var(--peso-semi); white-space: nowrap; }
.lg-grade-jogos thead th:first-child { inset-inline-start: 0; z-index: calc(var(--camada-fixo) + 1); }
.lg-grade-jogos-celula { min-inline-size: 10rem; block-size: var(--alvo-minimo); }
.lg-grade-jogos-celula--alvo { outline: var(--linha-grossa) dashed var(--cor-foco); outline-offset: calc(var(--linha-grossa) * -1); background: var(--cor-primaria-suave); }
.lg-ficha-jogo { display: block; padding: var(--esp-4) var(--esp-8); border-inline-start: var(--linha-marca) solid var(--cor-info); border-radius: var(--raio-4); background: var(--cor-info-fundo); color: var(--cor-texto); line-height: var(--altura-linha-compacta); cursor: grab; }
.lg-ficha-jogo small { display: block; color: var(--cor-texto-secundario); font-size: var(--texto-12); }
.lg-ficha-jogo--playoff { border-inline-start-color: var(--cor-aviso); background: var(--cor-aviso-fundo); }
.lg-ficha-jogo--fixo { border-inline-start-style: double; border-inline-start-width: calc(var(--linha-marca) + var(--linha-grossa)); }
.lg-ficha-jogo--conflito { border-inline-start-color: var(--cor-erro); background: var(--cor-erro-fundo); }
.lg-ficha-jogo--arrastando { opacity: 0.5; }
/* telão (sorteio ao vivo, para projetar em tela cheia) */
.lg-telao { display: flex; flex-direction: column; justify-content: center; gap: var(--esp-24); min-block-size: 70vh; }
.lg-telao:fullscreen { padding: var(--esp-32); overflow: auto; background: var(--cor-fundo); color: var(--cor-texto); }
.lg-telao-passo { padding: var(--esp-24) var(--esp-12); text-align: center; font-size: clamp(var(--texto-18), 3.2vw, var(--texto-36)); line-height: var(--altura-linha-titulo); overflow-wrap: anywhere; }
.lg-telao-saiu { display: block; margin-block: var(--esp-8); color: var(--cor-primaria-texto); font-family: var(--fonte-titulo); font-weight: var(--peso-forte); font-size: clamp(var(--texto-30), 5vw, calc(var(--texto-36) * 1.6)); }
.lg-telao-op { color: var(--cor-texto-secundario); font-size: clamp(var(--texto-14), 1.6vw, var(--texto-18)); }
.lg-telao-acoes { justify-content: center; }
/* quadro de etapas (atendimento: o funil em colunas; no celular, uma coluna embaixo da outra) */
.lg-quadro { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(var(--largura-coluna), 1fr); gap: var(--esp-12); overflow-x: auto; overscroll-behavior-x: contain; padding-block-end: var(--esp-8); }
.lg-quadro-coluna { display: flex; flex-direction: column; gap: var(--esp-8); min-inline-size: 0; padding: var(--esp-8); border: var(--linha) solid var(--cor-borda); border-radius: var(--raio-8); background: var(--cor-superficie-2); }
.lg-quadro-coluna-titulo { display: flex; justify-content: space-between; align-items: center; gap: var(--esp-8); padding: var(--esp-4); font-size: var(--texto-16); font-weight: var(--peso-semi); }
@media (max-width: 767px) { .lg-quadro { grid-auto-flow: row; grid-auto-columns: auto; overflow-x: visible; } }
/* botão de largura toda com o texto à esquerda (itens do checklist do campo: um toque marca e desmarca) */
.lg-botao--inicio { justify-content: flex-start; text-align: start; white-space: normal; }
.lg-botao--inicio .lg-texto-apoio { display: block; color: inherit; }
/* "Ver todas (N)" (pecas.js, data-lg-mostrar-mais): as linhas além das primeiras ficam escondidas */
[data-lg-mostrar-mais] > [hidden], .lg-tabela [data-lg-mostrar-mais] > tr[hidden] { display: none; }
/* credenciais com QR para imprimir: cada uma no tamanho físico (86 × 54 mm), em folha A4 */
.lg-credenciais { display: grid; grid-template-columns: repeat(auto-fill, minmax(86mm, 1fr)); gap: 4mm; max-inline-size: 190mm; margin-inline: auto; padding-block: var(--esp-16); }
.lg-credencial { display: flex; flex-direction: column; block-size: 54mm; overflow: hidden; break-inside: avoid; border: var(--linha) dashed var(--cor-borda); border-radius: 3mm; background: var(--cor-superficie); color: var(--cor-texto); }
.lg-credencial-topo { display: flex; align-items: center; gap: var(--esp-8); padding: var(--esp-4) var(--esp-8); background: var(--cor-texto); color: var(--cor-superficie); }
.lg-credencial--comissao .lg-credencial-topo { background: var(--cor-erro); color: var(--cor-erro-contraste); }
.lg-credencial--staff .lg-credencial-topo { background: var(--cor-info); color: var(--cor-superficie); }
.lg-credencial--profissional .lg-credencial-topo { background: var(--cor-secundaria); color: var(--cor-secundaria-contraste); }
.lg-credencial-topo b { display: block; font-size: var(--texto-12); }
.lg-credencial-topo span { font-size: 10px; opacity: 0.85; }
.lg-credencial-meio { flex: 1; display: flex; align-items: center; gap: var(--esp-8); padding: var(--esp-8); min-inline-size: 0; }
.lg-credencial-dados { flex: 1; display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; font-size: var(--texto-12); overflow-wrap: anywhere; }
.lg-credencial-tipo { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: var(--peso-forte); color: var(--cor-primaria-texto); }
.lg-credencial-nome { font-size: var(--texto-14); line-height: var(--altura-linha-compacta); }
.lg-credencial-qr { flex: none; background: #fff; }
.lg-credencial-qr svg { display: block; inline-size: 30mm; block-size: 30mm; }
@media print { .lg-credencial { border-color: #999; background: #fff; color: #000; } }
/* tabela com "Ver todos (N)": sem rolagem interna (as linhas extras entram na página) */
.lg-tabela-caixa:has([data-lg-mostrar-mais]) { max-block-size: none; }
/* celular (cartões): números e textos longos quebram dentro do cartão; link da célula com alvo de toque */
@media (max-width: 767px) {
  .lg-tabela:not(.lg-tabela--fixa) td { min-inline-size: 0; overflow-wrap: anywhere; }
  .lg-tabela:not(.lg-tabela--fixa) td.lg-num, .lg-tabela:not(.lg-tabela--fixa) .lg-num { white-space: normal; }
  .lg-tabela:not(.lg-tabela--fixa) td a.lg-link { display: inline-flex; align-items: center; min-block-size: var(--alvo-minimo); }
}
/* fim 25.A5 */
/* ---- 25.A6 Legacy: vendas, marketing, medição, captação e patrocínio ---- */
/* conteúdo + coluna lateral (ficha da conversa, Central de Disparos): no PC lado a lado; no tablet e celular, empilha */
.lg-colunas-lateral { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--esp-24); align-items: start; min-inline-size: 0; }
@media (min-width: 1024px) { .lg-colunas-lateral { grid-template-columns: minmax(0, 1fr) minmax(0, var(--largura-coluna-g)); } }
/* conversa (WhatsApp, chat do aplicativo): balões de entrada, de saída e notas internas, rolando dentro da caixa */
.lg-conversa { display: flex; flex-direction: column; gap: var(--esp-8); max-block-size: 62dvh; overflow: auto; padding: var(--esp-12); border: var(--linha) solid var(--cor-borda); border-radius: var(--raio-8); background: var(--cor-superficie-2); min-inline-size: 0; }
.lg-conversa--livre { max-block-size: none; overflow: visible; }
.lg-mensagem { display: flex; flex-direction: column; gap: var(--esp-4); max-inline-size: 78%; padding: var(--esp-8) var(--esp-12); border: var(--linha) solid var(--cor-borda); border-radius: var(--raio-12); background: var(--cor-superficie); color: var(--cor-texto); line-height: var(--altura-linha-texto); overflow-wrap: anywhere; }
.lg-mensagem--entrada { align-self: flex-start; border-end-start-radius: var(--raio-4); }
.lg-mensagem--saida { align-self: flex-end; border-end-end-radius: var(--raio-4); background: var(--cor-primaria-suave); }
.lg-mensagem--interna { align-self: center; max-inline-size: 92%; background: transparent; border-style: dashed; color: var(--cor-texto-secundario); font-size: var(--texto-14); }
.lg-mensagem--falhou { border-color: var(--cor-erro-borda); box-shadow: inset var(--linha-marca) 0 0 var(--cor-erro-borda); }
.lg-mensagem-meta { color: var(--cor-texto-secundario); font-size: var(--texto-12); }
.lg-mensagem-detalhe { font-size: var(--texto-12); color: var(--cor-texto-secundario); overflow-wrap: anywhere; }
.lg-mensagem-midia { display: block; max-inline-size: min(100%, calc(var(--esp-64) * 3.5)); max-block-size: calc(var(--esp-64) * 3.5); border-radius: var(--raio-8); object-fit: contain; }
@media (max-width: 767px) { .lg-mensagem { max-inline-size: 90%; } }
/* lista longa que mostra os primeiros itens e um "Mostrar mais" (data-lg-mais="25", pecas.js 25.A6) */
.lg-mais-rodape { display: flex; justify-content: center; }
.lg-base .lg-tabela tr[hidden] { display: none; } /* vence o "tr em cartão" do celular */
/* botão que escolhe arquivo (o input fica por cima do botão, focável pelo teclado) */
.lg-botao-arquivo > input[type="file"] { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; opacity: 0; cursor: pointer; }
.lg-botao-arquivo:focus-within { outline: var(--linha-grossa) solid var(--cor-foco); outline-offset: var(--linha-grossa); }
/* ponto de situação ao lado de um rótulo (canal conectado / enviando); o texto vem no title e no rótulo ao lado */
.lg-ponto { display: inline-block; flex: none; inline-size: var(--esp-8); block-size: var(--esp-8); border-radius: var(--raio-redondo); background: var(--cor-borda-controle); }
.lg-ponto--on { background: var(--cor-sucesso); }
.lg-ponto--envio { background: var(--cor-aviso); }
/* QR code e miniatura de imagem (proporção fixa, sem pular a tela) */
.lg-qr { display: flex; justify-content: center; padding: var(--esp-12); border-radius: var(--raio-8); background: var(--cor-superficie); border: var(--linha) solid var(--cor-borda); }
.lg-qr > img { inline-size: calc(var(--esp-64) * 3.5); max-inline-size: 100%; block-size: auto; aspect-ratio: 1; image-rendering: pixelated; }
.lg-miniatura { max-inline-size: calc(var(--esp-64) * 4); aspect-ratio: 4 / 3; }
/* prévia de e-mail (iframe isolado) */
.lg-previa-email { display: block; inline-size: 100%; block-size: calc(var(--esp-64) * 7); border: var(--linha) solid var(--cor-borda); border-radius: var(--raio-8); background: var(--cor-superficie); }
/* registro de atividade (hora + mensagem), com o tipo marcado na borda e no texto */
.lg-registro { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--esp-4); max-block-size: calc(var(--esp-64) * 5); overflow: auto; font-size: var(--texto-14); }
.lg-registro-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--esp-8); padding: var(--esp-4) var(--esp-8); border-inline-start: var(--linha-marca) solid var(--cor-borda); overflow-wrap: anywhere; }
.lg-registro-item > time { color: var(--cor-texto-secundario); font-variant-numeric: tabular-nums; }
.lg-registro-item--ok, .lg-registro-item--sucesso { border-inline-start-color: var(--cor-sucesso-borda); }
.lg-registro-item--aviso { border-inline-start-color: var(--cor-aviso-borda); }
.lg-registro-item--erro { border-inline-start-color: var(--cor-erro-borda); color: var(--cor-erro-texto); }
/* item colorido pelo significado (peça do calendário, programa na régua): borda e fundo suave + texto, nunca só cor.
   Tons: --sucesso --aviso --erro --info --neutro --analise --cancelado; --forte = item-chave; --atrasado = contorno de erro */
.lg-chip-tom { --tom-borda: var(--cor-neutro-borda); --tom-fundo: var(--cor-neutro-fundo); display: block; min-block-size: var(--controle-altura-p); padding: var(--esp-4) var(--esp-8); border-radius: var(--raio-4); border-inline-start: var(--linha-marca) solid var(--tom-borda); background: var(--tom-fundo); color: var(--cor-texto); font-size: var(--texto-14); line-height: var(--altura-linha-compacta); text-decoration: none; overflow-wrap: anywhere; }
a.lg-chip-tom:hover { box-shadow: inset 0 0 0 var(--linha) var(--tom-borda); }
.lg-chip-tom[draggable="true"] { cursor: grab; }
.lg-chip-tom--sucesso { --tom-borda: var(--cor-sucesso-borda); --tom-fundo: var(--cor-sucesso-fundo); }
.lg-chip-tom--aviso { --tom-borda: var(--cor-aviso-borda); --tom-fundo: var(--cor-aviso-fundo); }
.lg-chip-tom--erro { --tom-borda: var(--cor-erro-borda); --tom-fundo: var(--cor-erro-fundo); }
.lg-chip-tom--info { --tom-borda: var(--cor-info-borda); --tom-fundo: var(--cor-info-fundo); }
.lg-chip-tom--analise { --tom-borda: var(--cor-aviso-borda); --tom-fundo: var(--cor-superficie); }
.lg-chip-tom--cancelado { --tom-borda: var(--cor-neutro-borda); --tom-fundo: var(--cor-superficie-2); color: var(--cor-texto-secundario); text-decoration: line-through; }
.lg-chip-tom--forte { font-weight: var(--peso-forte); }
.lg-chip-tom--atrasado { box-shadow: inset 0 0 0 var(--linha) var(--cor-erro-borda); }
/* calendário (mês e semana): grade de 7 dias no PC; no celular vira lista só com os dias que têm itens */
.lg-calendario { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--esp-4); min-inline-size: 0; }
.lg-calendario-cab { padding: var(--esp-4); color: var(--cor-texto-secundario); font-size: var(--texto-12); font-weight: var(--peso-semi); text-transform: uppercase; }
.lg-calendario-dia { display: flex; flex-direction: column; gap: var(--esp-4); min-inline-size: 0; min-block-size: calc(var(--esp-64) * 1.5); padding: var(--esp-4); border: var(--linha) solid var(--cor-borda); border-radius: var(--raio-4); background: var(--cor-superficie); }
.lg-calendario--semana .lg-calendario-dia { min-block-size: calc(var(--esp-64) * 3); }
.lg-calendario-dia--fora { background: var(--cor-superficie-2); color: var(--cor-texto-secundario); }
.lg-calendario-dia--evento { background: var(--cor-primaria-suave); }
.lg-calendario-dia--hoje { box-shadow: inset 0 0 0 var(--linha-grossa) var(--cor-primaria); }
.lg-calendario-dia--sobre { outline: var(--linha-grossa) dashed var(--cor-foco); outline-offset: calc(var(--linha-grossa) * -1); }
.lg-calendario-num { font-size: var(--texto-12); font-weight: var(--peso-forte); color: var(--cor-texto-secundario); }
.lg-calendario-sem { display: none; }
@media (max-width: 767px) {
  .lg-calendario { grid-template-columns: minmax(0, 1fr); }
  .lg-calendario-cab, .lg-calendario-dia--vazio { display: none; }
  .lg-calendario-dia { min-block-size: 0; }
  .lg-calendario-sem { display: inline; font-weight: var(--peso-normal); }
}
/* legenda de cores (sempre com o nome) */
.lg-legenda { display: flex; flex-wrap: wrap; gap: var(--esp-8) var(--esp-16); list-style: none; margin: 0; padding: 0; font-size: var(--texto-14); }
.lg-legenda > li { display: inline-flex; align-items: center; gap: var(--esp-4); }
.lg-legenda .lg-chip-tom { display: inline-block; min-block-size: 0; inline-size: var(--esp-16); block-size: var(--esp-16); padding: 0; }
/* régua horizontal de meses (captação): rola dentro dela, nunca a página */
.lg-regua { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(min(80vw, calc(var(--esp-64) * 2.6)), 1fr); gap: var(--esp-8); overflow-x: auto; overscroll-behavior-x: contain; padding-block-end: var(--esp-8); scroll-snap-type: x proximity; }
.lg-regua-mes { display: flex; flex-direction: column; gap: var(--esp-4); min-inline-size: 0; padding: var(--esp-8); border: var(--linha) solid var(--cor-borda); border-radius: var(--raio-8); background: var(--cor-superficie); scroll-snap-align: start; }
.lg-regua-mes > h3 { font-size: var(--texto-14); font-weight: var(--peso-semi); }
/* prévia de arte/vídeo (peça do calendário) */
.lg-previa-midia { display: block; max-inline-size: 100%; max-block-size: calc(var(--esp-64) * 5.5); border-radius: var(--raio-8); border: var(--linha) solid var(--cor-borda); object-fit: contain; background: var(--cor-superficie-2); }
/* fim 25.A6 */
/* ---- 25.A7 Legacy: organizador geral e saídas ---- */
/* QR para ler com a câmera (verificação em duas etapas, Pix): o próprio SVG traz o fundo branco; aqui só o tamanho e a moldura */
.lg-qr { inline-size: 100%; max-inline-size: calc(var(--icone-48) * 5); padding: var(--esp-8); background: var(--cor-superficie); border: var(--linha) solid var(--cor-borda); border-radius: var(--raio-8); }
.lg-qr > svg, .lg-qr > img { display: block; inline-size: 100%; block-size: auto; }
/* códigos de uso único (reserva da verificação em duas etapas): letra fixa, fácil de copiar à mão */
.lg-codigos-reserva { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--largura-coluna-p)), 1fr)); gap: var(--esp-8); }
.lg-codigos-reserva code { display: block; padding: var(--esp-8) var(--esp-12); border-radius: var(--raio-4); background: var(--cor-superficie-2); font-family: var(--fonte-interface); font-variant-numeric: tabular-nums; font-size: var(--texto-16); font-weight: var(--peso-semi); letter-spacing: 0.05em; text-align: center; }
/* bloco que se revela: o corpo só aparece quando a caixa de marcar do próprio bloco está marcada (ex.: modalidade → categorias) */
.lg-revelar-corpo { display: none; flex-direction: column; gap: var(--esp-12); padding-block-start: var(--esp-8); }
.lg-revelar:has(> .lg-marcar > input:checked) > .lg-revelar-corpo { display: flex; }
.lg-revelar:has(> .lg-marcar > input:checked) { border-color: var(--cor-primaria-texto); }
/* bloco recolhido aberto por um botão (<details class="lg-abrir-bloco"><summary class="lg-botao …">): ex.: "Nova equipe" */
.lg-abrir-bloco { display: flex; flex-direction: column; align-items: flex-start; gap: var(--esp-12); }
.lg-abrir-bloco > summary { list-style: none; }
.lg-abrir-bloco > summary::-webkit-details-marker { display: none; }
.lg-abrir-bloco > :not(summary) { align-self: stretch; }
/* linha de tabela escondida pela busca ou pelo "Mostrar mais" (no celular a linha vira cartão em grade e precisa sumir também) */
.lg-tabela:not(.lg-tabela--fixa) tr[hidden], .lg-tabela tr[hidden] { display: none; }
/* tabela que já limita as linhas com "Mostrar mais": a página rola, não a caixa (nada fica escondido por trás do botão) */
.lg-tabela-caixa:has(> .lg-tabela[data-lg-lista-longa]) { max-block-size: none; }
/* súmulas em lote para imprimir: cada folha (moldura) no tamanho do modelo; o papel mantém A4 */
.lg-folhas { margin: 0; background: var(--cor-superficie-2); color-scheme: light; }
.lg-folha-frame { display: block; inline-size: 100%; max-inline-size: 1180px; margin: var(--esp-12) auto; border: 0; background: Canvas; }
@media print { .lg-folhas { background: Canvas; } .lg-folha-frame { margin: 0; max-inline-size: none; break-after: page; } }
/* linha de lista com botões ao lado: com letra grande, o lado passa para baixo do texto em vez de passar por cima */
.lg-lista-item:has(> .lg-lista-lado > .lg-acoes) { flex-wrap: wrap; }
.lg-lista-item:has(> .lg-lista-lado > .lg-acoes) > .lg-lista-lado { flex-wrap: wrap; flex: 0 1 auto; }
.lg-lista-item:has(> .lg-lista-lado > .lg-acoes) > .lg-lista-principal { flex: 1 1 var(--largura-coluna-p); }
/* opção em forma de chip com nome comprido: quebra em vez de empurrar a página */
.lg-chip-opcao { max-inline-size: 100%; }
.lg-chip-opcao > span { max-inline-size: 100%; white-space: normal; overflow-wrap: anywhere; }
/* texto livre de quem escreveu (mensagem, detalhe do pedido): mantém as quebras de linha */
.lg-pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
/* fim 25.A7 */
/* ---- 25.A8 Escolas: site e páginas públicas, matrícula e mensalidade ---- */
/* links do cabeçalho do site (só no PC largo; no resto, a gaveta do menu tem os mesmos links) */
.lg-cabecalho-nav { display: none; }
@media (min-width: 1280px) {
  .lg-cabecalho-nav { display: flex; align-items: center; gap: var(--esp-4); margin-inline-start: var(--esp-16); min-inline-size: 0; }
  .lg-cabecalho-nav > a { display: inline-flex; align-items: center; min-block-size: var(--alvo-minimo); padding-inline: var(--esp-8); border-radius: var(--raio-4); color: inherit; font-weight: var(--peso-semi); text-decoration: none; white-space: nowrap; }
  .lg-cabecalho-nav > a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
  .lg-cabecalho-nav > a[aria-current="page"] { box-shadow: inset 0 calc(var(--linha-marca) * -1) 0 var(--cor-destaque-sobre-secundaria); }
}
/* âncoras (#matricula, #unidades) param abaixo do cabeçalho fixo */
.lg-base:has(.lg-cabecalho) [id] { scroll-margin-block-start: calc(var(--altura-cabecalho) + var(--esp-16)); }
/* rótulo pequeno acima de um título ("Comece por aqui") */
.lg-sobretitulo { color: var(--cor-texto-secundario); font-size: var(--texto-14); font-weight: var(--peso-forte); letter-spacing: 0.08em; text-transform: uppercase; }
/* abertura do site (faixa na cor secundária da instalação): texto, botões e figura */
.lg-abertura { background: var(--cor-secundaria); color: var(--cor-secundaria-contraste); border-block-end: var(--linha-marca) solid var(--cor-destaque-sobre-secundaria); --cor-foco: var(--cor-foco-sobre-secundaria); }
.lg-abertura-in { display: grid; gap: var(--esp-24); align-items: end; inline-size: 100%; max-inline-size: var(--largura-pagina); margin-inline: auto; padding: var(--esp-48) var(--esp-24) 0; }
.lg-abertura-texto { display: flex; flex-direction: column; gap: var(--esp-16); padding-block-end: var(--esp-48); min-inline-size: 0; }
.lg-abertura .lg-sobretitulo, .lg-abertura .lg-texto-apoio { color: var(--cor-secundaria-contraste); }
.lg-abertura-titulo { font-family: var(--fonte-titulo); font-weight: var(--peso-forte); font-size: calc(var(--texto-36) * 1.5); line-height: 1; text-transform: uppercase; overflow-wrap: anywhere; }
.lg-abertura-titulo > em { font-style: normal; box-shadow: inset 0 calc(var(--esp-8) * -1) 0 var(--cor-destaque-sobre-secundaria); }
/* cabeçalho do site da escola (.lg-cabecalho--site) e abertura: botões claros/contornados sobre a cor da marca (contraste garantido por tema.js) */
.lg-cabecalho--site .lg-botao--principal,
.lg-abertura .lg-botao--principal { --botao-fundo: var(--cor-secundaria-contraste); --botao-texto: var(--cor-secundaria); --botao-borda: var(--cor-secundaria-contraste); --botao-fundo-pressionado: var(--cor-secundaria-suave); }
.lg-cabecalho--site .lg-botao--principal:hover,
.lg-abertura .lg-botao--principal:hover { background: var(--cor-secundaria-suave); }
.lg-cabecalho--site .lg-botao--secundario,
.lg-abertura .lg-botao--secundario { --botao-fundo: transparent; --botao-texto: var(--cor-secundaria-contraste); --botao-borda: var(--cor-secundaria-contraste); --botao-fundo-pressionado: var(--cor-secundaria-forte); }
.lg-abertura .lg-link { color: var(--cor-secundaria-contraste); }
.lg-abertura-figura { margin: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: end; min-inline-size: 0; }
.lg-abertura-figura > img, .lg-abertura-figura > a { grid-row: 1; display: block; min-inline-size: 0; }
.lg-abertura-figura > :only-child { grid-column: 1 / -1; }
.lg-abertura-figura > :first-child:not(:only-child) { grid-column: 1 / 4; }
.lg-abertura-figura > :nth-child(2) { grid-column: 4 / 7; }
.lg-abertura-figura img { inline-size: 100%; block-size: auto; }
.lg-abertura-legendas { display: flex; flex-wrap: wrap; gap: var(--esp-8) var(--esp-16); padding-block-end: var(--esp-16); }
@media (min-width: 1024px) { .lg-abertura-in { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); } }
@media (max-width: 767px) {
  .lg-abertura-in { padding: var(--esp-32) var(--esp-16) 0; }
  .lg-abertura-texto { padding-block-end: var(--esp-16); }
  .lg-abertura-titulo { font-size: var(--texto-36); }
}
/* várias colunas que se ajustam: a que sobra ocupa a linha inteira (auto-fit) */
.lg-colunas { display: grid; gap: var(--esp-24); align-items: start; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--largura-coluna-g)), 1fr)); }
/* título da lista como botão (linha inteira clicável, igual ao link) */
button.lg-lista-titulo { padding: 0; border: 0; background: none; font: inherit; font-weight: var(--peso-semi); text-align: start; cursor: pointer; }
button.lg-lista-titulo::after { content: ""; position: absolute; inset: 0; }
button.lg-lista-titulo:focus-visible { outline: none; }
.lg-lista-item:has(button.lg-lista-titulo:focus-visible) { outline: var(--linha-grossa) solid var(--cor-foco); outline-offset: calc(var(--linha-grossa) * -1); }
.lg-lista-item:has(button.lg-lista-titulo):hover { background: var(--cor-superficie-2); }
/* item marcado (combina com a escolha da pessoa) e item apagado (não combina) */
.lg-lista-item--marcado { box-shadow: inset var(--linha-marca) 0 0 var(--cor-sucesso-borda); }
.lg-lista-item--apagado { color: var(--cor-texto-secundario); }
/* botão que liga/desliga (tamanho na loja, atleta escolhido): aria-pressed="true" */
.lg-botao--alternar { flex-direction: column; gap: 0; }
.lg-botao--alternar[aria-pressed="true"] { --botao-borda: var(--cor-primaria-texto); background: var(--cor-primaria-suave); box-shadow: inset 0 0 0 var(--linha) var(--cor-primaria-texto); }
.lg-botao--alternar:disabled { text-decoration: line-through; }
.lg-botao--alternar > small { font-size: var(--texto-12); font-weight: var(--peso-medio); }
/* foco da foto (escolhido no painel), em passos de 25%: data-lg-foco-x / data-lg-foco-y */
[data-lg-foco-x], [data-lg-foco-y] { object-position: var(--foco-x, 50%) var(--foco-y, 50%); }
[data-lg-foco-x="0"] { --foco-x: 0%; } [data-lg-foco-x="25"] { --foco-x: 25%; } [data-lg-foco-x="75"] { --foco-x: 75%; } [data-lg-foco-x="100"] { --foco-x: 100%; }
[data-lg-foco-y="0"] { --foco-y: 0%; } [data-lg-foco-y="25"] { --foco-y: 25%; } [data-lg-foco-y="75"] { --foco-y: 75%; } [data-lg-foco-y="100"] { --foco-y: 100%; }
/* faixa fina de largura total (aviso no topo, assinatura no pé, "inscrições abertas") */
.lg-tarja { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--esp-4) var(--esp-16); padding: var(--esp-4) var(--esp-16); background: var(--cor-superficie); color: var(--cor-texto); border-block-end: var(--linha) solid var(--cor-borda); font-size: var(--texto-14); text-align: center; }
.lg-tarja--marca { background: var(--cor-secundaria); color: var(--cor-secundaria-contraste); border-block-end: 0; --cor-foco: var(--cor-foco-sobre-secundaria); }
.lg-tarja--marca .lg-link, .lg-tarja--marca .lg-botao--discreto { color: var(--cor-secundaria-contraste); --botao-texto: var(--cor-secundaria-contraste); }
.lg-tarja > a:not([class]) { display: inline-flex; align-items: center; min-block-size: var(--alvo-minimo); color: inherit; font-weight: var(--peso-semi); }
a.lg-tarja { min-block-size: var(--alvo-minimo); font-weight: var(--peso-semi); text-decoration: none; }
a.lg-tarja > span:last-child { text-decoration: underline; text-underline-offset: 0.2em; }
/* barra de ações presa embaixo, só no celular (atalhos da página inicial) */
.lg-barra-acao { display: none; }
@media (max-width: 767px) {
  .lg-barra-acao:not([hidden]) { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: var(--camada-fixo); display: flex; gap: var(--alvo-espaco); padding: var(--esp-8) var(--esp-16); padding-block-end: calc(var(--esp-8) + env(safe-area-inset-bottom, 0px)); background: var(--cor-superficie); border-block-start: var(--linha) solid var(--cor-borda); box-shadow: var(--sombra-2); }
  .lg-barra-acao > .lg-botao { flex: 1 1 0; min-inline-size: 0; }
  .lg-base:has(.lg-barra-acao:not([hidden])) .lg-rodape-site { padding-block-end: calc(var(--altura-rodape-acao) + var(--esp-16)); }
}
/* botão flutuante (WhatsApp da escola): canto de baixo, fora do caminho do rodapé de ação */
.lg-flutuante { position: fixed; inset-inline-end: var(--esp-16); inset-block-end: calc(var(--esp-16) + env(safe-area-inset-bottom, 0px)); z-index: var(--camada-fixo); }
.lg-flutuante > .lg-botao { inline-size: var(--icone-48); min-inline-size: var(--icone-48); block-size: var(--icone-48); padding: 0; border-radius: var(--raio-redondo); box-shadow: var(--sombra-2); --botao-fundo: var(--cor-sucesso); --botao-borda: var(--cor-sucesso); --botao-texto: var(--cor-erro-contraste); } /* texto claro no tema claro e escuro no tema escuro, como no botão de perigo cheio */
.lg-flutuante > .lg-botao .lg-icone { inline-size: var(--icone-24); block-size: var(--icone-24); }
@media (max-width: 767px) {
  .lg-base:has(.lg-barra-acao:not([hidden])) .lg-flutuante { inset-block-end: calc(var(--altura-rodape-acao) + var(--esp-8)); }
  .lg-base:has(.lg-rodape-acao):not(:has(.lg-barra-acao)) .lg-flutuante { display: none; }
}
/* recorte de foto (quadrado, com a guia redonda do rosto) */
.lg-recorte { position: relative; display: grid; place-items: center; inline-size: min(var(--largura-campo-curto), 70vw); aspect-ratio: 1; overflow: hidden; border: var(--linha) dashed var(--cor-borda-controle); border-radius: var(--raio-8); background: var(--cor-superficie-2); color: var(--cor-texto-secundario); text-align: center; }
.lg-recorte > canvas, .lg-recorte > img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; touch-action: none; cursor: grab; }
.lg-recorte > canvas:active { cursor: grabbing; }
.lg-recorte-guia { position: absolute; inset: 12%; border-radius: var(--raio-redondo); border: var(--linha-grossa) solid var(--cor-superficie); box-shadow: 0 0 0 calc(var(--esp-64) * 4) var(--cor-sobreposicao); pointer-events: none; }
.lg-recorte-zoom { display: flex; align-items: center; gap: var(--esp-8); inline-size: min(var(--largura-campo-curto), 70vw); min-block-size: var(--alvo-minimo); }
.lg-recorte-zoom > input { flex: 1 1 auto; min-inline-size: 0; accent-color: var(--cor-primaria); }
/* tradução do site carregando: esconde por um instante (no máximo 2 s) para não piscar em português */
.lg-traduzindo > .lg-base { visibility: hidden; }
/* aviso que só aparece quando a página está traduzida ("o contrato vale em português") */
:root:lang(pt) .lg-so-traduzido { display: none; }
/* o que só aparece para quem entrou na conta da família (data-lg-logado no <html>) ou só para visitante */
:root[data-lg-logado] [data-lg-so-visitante], :root:not([data-lg-logado]) [data-lg-so-logado] { display: none; }
/* títulos dentro da abertura acompanham a cor da faixa */
.lg-abertura :is(.lg-titulo-1, .lg-titulo-2, .lg-titulo-3, .lg-titulo-4) { color: inherit; }
/* topo e rodapé de diálogo com mais de uma linha (título + versão + barra de leitura; textos + botões) */
.lg-dialogo-topo > .lg-pilha { flex: 1 1 auto; min-inline-size: 0; }
.lg-dialogo-rodape > .lg-pilha { flex: 1 1 100%; }
/* código de categoria grande (Sub-09) */
.lg-codigo { font-family: var(--fonte-titulo); font-weight: var(--peso-forte); font-size: calc(var(--texto-36) * 1.5); line-height: 1; color: var(--cor-primaria-texto); font-variant-numeric: tabular-nums; text-transform: uppercase; overflow-wrap: anywhere; }
/* título de cartão clicável e links do rodapé do site: alvo de toque de 44 px; e-mail longo quebra em vez de estourar */
.lg-cartao--clicavel .lg-cartao-link { display: inline-flex; align-items: center; min-block-size: var(--alvo-minimo); }
button.lg-lista-titulo { min-block-size: var(--alvo-minimo); inline-size: 100%; }
.lg-rodape-site-links > li { min-inline-size: 0; max-inline-size: 100%; }
/* página curta: o rodapé do site fica no pé da tela */
.lg-base:has(> .lg-rodape-site) { display: flex; flex-direction: column; min-block-size: 100dvh; }
.lg-base:has(> .lg-rodape-site) > main { flex: 1 0 auto; }
.lg-rodape-site-links a { justify-content: center; min-inline-size: var(--alvo-minimo); max-inline-size: 100%; overflow-wrap: anywhere; }
/* fim 25.A8 */
/* ---- 25.A9 Escolas: área do responsável e do aluno, professor e saídas ---- */
/* faixa que fica no alto da tela (ex.: "Sua sessão vai terminar"): entra no fluxo e empurra a página, sem cobrir nada */
.lg-faixa-topo { position: sticky; inset-block-start: 0; z-index: var(--camada-aviso); align-items: center; flex-wrap: wrap; justify-content: center; border-radius: 0; border-width: 0 0 var(--linha-marca); box-shadow: var(--sombra-2); }
.lg-faixa-topo .lg-faixa-corpo { flex: 0 1 auto; }
/* texto longo para ler antes de assinar (autorização de viagem): rola dentro da caixa */
.lg-texto-rolagem { max-block-size: calc(var(--esp-64) * 4); overflow: auto; padding: var(--esp-12) var(--esp-16); border: var(--linha) solid var(--cor-borda); border-radius: var(--raio-8); background: var(--cor-superficie); font-size: var(--texto-apoio); white-space: pre-line; overflow-wrap: anywhere; }
/* presença da chamada: três botões grandes por aluno (P, F, J), o escolhido fica com a cor do significado */
.lg-presenca { display: flex; gap: var(--esp-4); flex: none; }
.lg-presenca > button { min-inline-size: var(--alvo-minimo); min-block-size: var(--alvo-minimo); padding: 0 var(--esp-8); border: var(--linha) solid var(--cor-borda-controle); border-radius: var(--raio-4); background: var(--cor-superficie); color: var(--cor-texto-secundario); font: inherit; font-weight: var(--peso-forte); cursor: pointer; }
.lg-presenca > button:hover { border-color: var(--cor-texto-secundario); }
.lg-presenca > button[aria-pressed="true"] { box-shadow: inset 0 0 0 var(--linha) currentColor; }
.lg-presenca > button[aria-pressed="true"][data-marca="P"] { background: var(--cor-sucesso-fundo); border-color: var(--cor-sucesso-borda); color: var(--cor-sucesso-texto); }
.lg-presenca > button[aria-pressed="true"][data-marca="F"] { background: var(--cor-erro-fundo); border-color: var(--cor-erro-borda); color: var(--cor-erro-texto); }
.lg-presenca > button[aria-pressed="true"][data-marca="J"] { background: var(--cor-aviso-fundo); border-color: var(--cor-aviso-borda); color: var(--cor-aviso-texto); }
/* marca de presença em texto (tabela de frequência e últimas aulas da família): letra com a cor do significado */
.lg-marca-presenca { font-weight: var(--peso-forte); }
.lg-marca-presenca[data-marca="P"] { color: var(--cor-sucesso-texto); }
.lg-marca-presenca[data-marca="F"] { color: var(--cor-erro-texto); }
.lg-marca-presenca[data-marca="J"] { color: var(--cor-aviso-texto); }
/* grade de cartões-botão (turmas de hoje, atalhos do Início): tamanho igual, quebra em colunas */
.lg-atalhos { display: grid; gap: var(--esp-8); grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--largura-coluna-p)), 1fr)); list-style: none; margin: 0; padding: 0; }
.lg-atalho { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--esp-4); inline-size: 100%; min-block-size: var(--alvo-minimo); padding: var(--esp-12) var(--esp-16); border: var(--linha) solid var(--cor-borda); border-inline-start: var(--linha-marca) solid var(--cor-borda-controle); border-radius: var(--raio-8); background: var(--cor-superficie); color: var(--cor-texto); font: inherit; text-align: start; text-decoration: none; cursor: pointer; }
.lg-atalho:hover { border-color: var(--cor-borda-controle); background: var(--cor-superficie-2); }
.lg-atalho--feito { border-inline-start-color: var(--cor-sucesso-borda); }
.lg-atalho--pendente { border-inline-start-color: var(--cor-aviso-borda); }
.lg-atalho-titulo { font-weight: var(--peso-semi); overflow-wrap: anywhere; }
.lg-atalho-destaque { font-family: var(--fonte-titulo); font-weight: var(--peso-forte); font-size: var(--texto-20); line-height: var(--altura-linha-titulo); font-variant-numeric: tabular-nums; }
.lg-atalho .lg-contador { inset-block-start: var(--esp-8); inset-inline-end: var(--esp-8); }
/* etiqueta com texto longo: quebra linha em vez de passar da largura (texto em 200%, celular estreito) */
.lg-etiqueta--quebra { white-space: normal; overflow-wrap: anywhere; }
/* destaque passageiro de um bloco para onde a tela levou a pessoa (ex.: a lista da chamada) */
.lg-realce { outline: var(--linha-marca) solid var(--cor-destaque); outline-offset: var(--esp-4); border-radius: var(--raio-8); }
/* escolha de um nível entre poucos (boletim: 4 níveis + "Não observado"): botões de largura igual; o escolhido leva a cor do significado e o texto continua dizendo o nível */
.lg-niveis { display: grid; gap: var(--esp-8); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lg-niveis > button { min-block-size: var(--alvo-minimo); padding: var(--esp-8); border: var(--linha) solid var(--cor-borda-controle); border-radius: var(--raio-8); background: var(--cor-superficie); color: var(--cor-texto); font: inherit; font-weight: var(--peso-semi); line-height: var(--altura-linha-compacta); text-wrap: balance; cursor: pointer; }
.lg-niveis > button:hover:not(:disabled) { border-color: var(--cor-texto-secundario); }
.lg-niveis > button[data-v="0"] { grid-column: 1 / -1; border-style: dashed; color: var(--cor-texto-secundario); font-weight: var(--peso-medio); }
.lg-niveis > button:disabled { cursor: default; color: var(--cor-texto-secundario); }
.lg-niveis > button[aria-pressed="true"] { border-style: solid; font-weight: var(--peso-forte); box-shadow: inset 0 0 0 var(--linha) currentColor; }
.lg-niveis > button[aria-pressed="true"][data-v="4"] { background: var(--cor-info-fundo); border-color: var(--cor-info-borda); color: var(--cor-info-texto); }
.lg-niveis > button[aria-pressed="true"][data-v="3"] { background: var(--cor-sucesso-fundo); border-color: var(--cor-sucesso-borda); color: var(--cor-sucesso-texto); }
.lg-niveis > button[aria-pressed="true"][data-v="2"] { background: var(--cor-aviso-fundo); border-color: var(--cor-aviso-borda); color: var(--cor-aviso-texto); }
.lg-niveis > button[aria-pressed="true"][data-v="1"], .lg-niveis > button[aria-pressed="true"][data-v="0"] { background: var(--cor-neutro-fundo); border-color: var(--cor-neutro-borda); color: var(--cor-neutro-texto); }
@media (min-width: 640px) {
  .lg-niveis { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .lg-niveis > button[data-v="0"] { grid-column: auto; }
}
/* retrato do aluno (foto grande de rosto no "um aluno por vez") */
.lg-avatar--retrato { inline-size: calc(var(--esp-64) * 2); block-size: calc(var(--esp-64) * 2); font-size: var(--texto-36); border: var(--linha-grossa) solid var(--cor-borda); }
@media (min-width: 640px) { .lg-avatar--retrato { inline-size: calc(var(--esp-64) * 2 + var(--esp-24)); block-size: calc(var(--esp-64) * 2 + var(--esp-24)); } }
/* fim 25.A9 */
/* ---- 25.A10 Escolas: painel da escola ---- */
/* item do menu lateral como <button> (painel de uma página só: troca a tela sem recarregar) */
button.lg-menu-link { inline-size: 100%; border: 0; background: transparent; font-family: inherit; text-align: start; cursor: pointer; }
/* contador de pendências no item do menu (e na barra inferior, no canto do ícone) */
.lg-menu-contador {
  margin-inline-start: auto;
  min-inline-size: var(--esp-24);
  padding: 0 var(--esp-8);
  border-radius: var(--raio-redondo);
  background: var(--cor-destaque);
  color: var(--cor-destaque-contraste);
  font-size: var(--texto-12);
  font-weight: var(--peso-forte);
  line-height: var(--altura-linha-texto);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.lg-barra-item .lg-menu-contador { position: absolute; inset-block-start: var(--esp-4); inset-inline-start: calc(50% + var(--esp-8)); margin: 0; min-inline-size: var(--esp-16); padding: 0 var(--esp-4); }
/* grade de campos em 3 colunas (PC) e 2 (tablet) */
@media (min-width: 768px) and (max-width: 1023px) {
  .lg-grade-campos--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg-grade-campos--3 > .lg-inteiro { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .lg-grade-campos--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg-grade-campos--3 > .lg-inteiro { grid-column: 1 / -1; }
}
/* rodapé de ação preso embaixo também no PC (barra "Salvar alterações" de telas longas) */
.lg-rodape-acao--fixo {
  position: sticky;
  inset-block-end: 0;
  z-index: var(--camada-fixo);
  padding: var(--esp-12) var(--esp-16);
  background: var(--cor-superficie);
  border: var(--linha) solid var(--cor-borda);
  border-radius: var(--raio-8);
  box-shadow: var(--sombra-2);
}
@media (max-width: 767px) { .lg-rodape-acao--fixo { border-radius: 0; border-inline: 0; border-block-end: 0; } }
/* botão que abre a escolha de arquivo (o campo de arquivo fica por cima, invisível, e recebe o clique e o foco) */
.lg-botao-arquivo { position: relative; overflow: hidden; }
.lg-botao-arquivo > input[type="file"] { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; opacity: 0; cursor: pointer; }
.lg-botao-arquivo:focus-within { outline: var(--linha-grossa) solid var(--cor-foco); outline-offset: var(--linha-grossa); }
.lg-menu-item--arquivo { position: relative; overflow: hidden; }
.lg-menu-item--arquivo > input[type="file"] { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; opacity: 0; cursor: pointer; }
/* título da lista compacta como <button> (abre o item sem trocar de página) */
button.lg-lista-titulo { padding: 0; border: 0; background: transparent; font: inherit; font-weight: var(--peso-semi); color: inherit; text-align: start; cursor: pointer; }
button.lg-lista-titulo::after { content: ""; position: absolute; inset: 0; }
button.lg-lista-titulo:focus-visible { outline: none; }
.lg-lista-item:has(button.lg-lista-titulo:focus-visible) { outline: var(--linha-grossa) solid var(--cor-foco); outline-offset: calc(var(--linha-grossa) * -1); }
.lg-lista-item:has(button.lg-lista-titulo):hover { background: var(--cor-superficie-2); }
.lg-lista-item[aria-current="true"] { background: var(--cor-primaria-suave); box-shadow: inset var(--linha-marca) 0 0 var(--cor-primaria); }
/* enquadramento da foto escolhido pela escola (topo, centro, base) */
.lg-imagem--topo { object-position: 50% 20%; }
.lg-imagem--base { object-position: 50% 80%; }
/* prévia de e-mail ou documento num quadro (computador ou celular) */
.lg-previa { display: flex; justify-content: center; flex: 1 1 auto; min-block-size: 60dvh; padding: var(--esp-12); background: var(--cor-superficie-2); border-radius: var(--raio-8); }
.lg-previa > iframe { inline-size: 100%; max-inline-size: calc(var(--largura-formulario) + var(--esp-64) * 2); min-block-size: 60dvh; border: var(--linha) solid var(--cor-borda); border-radius: var(--raio-8); color-scheme: light; background: Canvas; }
.lg-previa[data-largura="celular"] > iframe { max-inline-size: calc(var(--largura-campo-medio) + var(--esp-64)); }
.lg-modal--largo { inline-size: min(calc(var(--largura-modal) * 1.6), calc(100vw - var(--esp-32))); }
/* mensagem de resultado ao lado do botão (Salvo / erro) */
.lg-mensagem { font-weight: var(--peso-semi); color: var(--cor-texto-secundario); overflow-wrap: anywhere; }
.lg-mensagem--sucesso { color: var(--cor-sucesso-texto); }
.lg-mensagem--erro { color: var(--cor-erro-texto); }
.lg-mensagem--aviso { color: var(--cor-aviso-texto); }
/* texto longo (termos, política) */
textarea.lg-entrada--alta { min-block-size: 50dvh; }
/* bloco que é destino de link interno ("Nesta página"): não fica embaixo do cabeçalho fixo */
.lg-ancora { scroll-margin-block-start: calc(var(--altura-cabecalho) + var(--esp-16)); }
/* campo dentro do menu "⋯" (ex.: tema no menu da conta) */
.lg-menu-campo { padding: var(--esp-8) var(--esp-12); }
/* busca do cabeçalho: no PC fica aberta; abaixo de 1024 px vira o botão de lupa, que abre a busca num diálogo */
.lg-cabecalho-busca { position: relative; }
.lg-cabecalho-buscar { display: none; }
@media (max-width: 1023px) { .lg-cabecalho-buscar { display: inline-flex; } }
/* resultados da busca (lista que abre embaixo do campo) */
.lg-busca-resultados {
  position: absolute;
  z-index: var(--camada-menu-flutuante);
  inset-block-start: calc(100% + var(--esp-4));
  inset-inline: 0;
  min-inline-size: min(100%, var(--largura-aviso));
  max-block-size: 70dvh;
  overflow: auto;
  display: flex;
  flex-direction: column;
  padding: var(--esp-4);
  background: var(--cor-superficie-elevada);
  color: var(--cor-texto);
  border: var(--linha) solid var(--cor-borda);
  border-radius: var(--raio-8);
  box-shadow: var(--sombra-2);
}
.lg-dialogo-corpo .lg-busca-resultados { position: static; box-shadow: none; max-block-size: none; }
.lg-busca-grupo { padding: var(--esp-8) var(--esp-12) var(--esp-4); color: var(--cor-texto-secundario); font-size: var(--texto-14); font-weight: var(--peso-semi); }
.lg-busca-resultados .lg-menu-item { flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; padding-block: var(--esp-4); }
/* título do cartão clicável como <button> (atalho que troca de tela sem recarregar) */
button.lg-cartao-link { min-inline-size: var(--alvo-minimo); min-block-size: var(--alvo-minimo); padding: 0; border: 0; background: transparent; font-family: inherit; text-align: start; cursor: pointer; }
/* blocos com largura máxima (prévia de imagem, selo) */
.lg-bloco-medio { max-inline-size: calc(var(--largura-campo-medio) * 1.4); }
.lg-bloco-estreito { max-inline-size: calc(var(--largura-campo-curto) * 0.75); }
/* etapa clicável (volta para uma etapa do editor) */
.lg-etapa-ir { display: inline-flex; align-items: center; min-block-size: var(--controle-altura-p); padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.lg-etapa-ir:hover { text-decoration: underline; }
/* painéis antigos montados por script (adm-adaptar.js): sobreposição e caixa de diálogo próprias, números em cartões compactos */
.lg-sobreposicao { position: fixed; inset: 0; z-index: var(--camada-modal); display: grid; place-items: center; padding: var(--esp-16); background: var(--cor-sobreposicao); overflow: auto; }
.lg-sobreposicao[hidden] { display: none; }
.lg-dialogo-solto { display: flex; flex-direction: column; inline-size: min(calc(var(--largura-modal) * 1.6), 100%); max-block-size: 92dvh; overflow: hidden; background: var(--cor-superficie-elevada); color: var(--cor-texto); border-radius: var(--raio-12); box-shadow: var(--sombra-3, var(--sombra-2)); }
.lg-dialogo-solto > .lg-dialogo-corpo { flex: 1 1 auto; overflow: auto; display: grid; gap: var(--esp-12); align-content: start; }
.lg-numero--compacto { padding: var(--esp-12) var(--esp-16); }
.lg-numero--compacto .lg-numero-valor { font-size: var(--texto-24); overflow-wrap: anywhere; }
.lg-numero--compacto > small { color: var(--cor-texto-secundario); font-size: var(--texto-12); }
.lg-pilha > .lg-cabecalho-pagina { margin: 0; }
.lg-cartao > .lg-acoes, .lg-cartao .lg-acoes { margin-block-start: var(--esp-8); }
.lg-filtros-barra .lg-campo > .lg-entrada, .lg-filtros-barra .lg-selecao { inline-size: 100%; }
.lg-tabela td .lg-botao, .lg-tabela td .lg-acoes { margin: 0; }
@media print { .lg-menu-lateral, .lg-barra-inferior, .lg-cabecalho, .lg-pular, .lg-nao-imprimir { display: none !important; } .lg-app--com-menu { display: block; } }
/* utilitários de espaço e alinhamento (substituem os style="" antigos dos painéis; só tokens) */
.lg-u-m0 { margin: 0; }
.lg-u-mt-4 { margin-block-start: var(--esp-4); } .lg-u-mt-8 { margin-block-start: var(--esp-8); } .lg-u-mt-12 { margin-block-start: var(--esp-12); } .lg-u-mt-16 { margin-block-start: var(--esp-16); }
.lg-u-mb-8 { margin-block-end: var(--esp-8); }
.lg-u-my-4 { margin-block: var(--esp-4); } .lg-u-my-8 { margin-block: var(--esp-8); } .lg-u-my-12 { margin-block: var(--esp-12); }
.lg-u-mx-8 { margin-inline: var(--esp-8); }
.lg-u-t-sm { font-size: var(--texto-14); } .lg-u-t-base { font-size: var(--texto-16); } .lg-u-t-md { font-size: var(--texto-18); }
.lg-u-forte { font-weight: var(--peso-semi); }
.lg-u-maiusc { text-transform: uppercase; }
.lg-u-centrado { text-align: center; } .lg-u-direita { text-align: end; }
.lg-u-apoio { color: var(--cor-texto-secundario); } .lg-u-erro { color: var(--cor-erro-texto); } .lg-u-sucesso { color: var(--cor-sucesso-texto); }
.lg-u-flex { display: flex; } .lg-u-grid { display: grid; } .lg-u-bloco { display: block; }
.lg-u-wrap { flex-wrap: wrap; }
.lg-u-gap-4 { gap: var(--esp-4); } .lg-u-gap-8 { gap: var(--esp-8); } .lg-u-gap-12 { gap: var(--esp-12); } .lg-u-gap-16 { gap: var(--esp-16); }
.lg-u-centro { align-items: center; } .lg-u-topo { align-items: flex-start; } .lg-u-fundo { align-items: flex-end; }
.lg-u-entre { justify-content: space-between; } .lg-u-ini { justify-content: flex-start; } .lg-u-fim { justify-content: flex-end; }
.lg-u-self-ini { justify-self: start; } .lg-u-self-larg { justify-self: stretch; }
.lg-u-alinha-centro { align-self: center; } .lg-u-alinha-fim { align-self: end; }
.lg-u-itens-centro { justify-items: center; }
.lg-u-span2 { grid-column: 1 / -1; }
.lg-u-flex1 { flex: 1 1 var(--largura-campo-curto); min-inline-size: 0; }
.lg-u-minw { min-inline-size: min(100%, var(--largura-campo-medio)); }
.lg-u-larg { inline-size: 100%; }
.lg-u-mw-p { max-inline-size: var(--largura-campo-curto); } .lg-u-mw-m { max-inline-size: var(--largura-campo-medio); } .lg-u-mw-g { max-inline-size: min(100%, var(--largura-formulario)); } .lg-u-mw-texto { max-inline-size: var(--largura-texto-longo, 72ch); }
.lg-u-quebra { white-space: normal; } .lg-u-semquebra { white-space: nowrap; }
.lg-u-rola-x { overflow-x: auto; }
.lg-u-lista { padding-inline-start: var(--esp-16); }
.lg-u-cols2 { columns: 2; }
.lg-u-cols { grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--largura-campo-curto)), 1fr)); }
.lg-u-pad { padding: var(--esp-8); } .lg-u-borda { border: var(--linha) solid var(--cor-borda); border-radius: var(--raio-8); }
/* gráficos do financeiro (SVG montado por script): cores de série, legenda, dica fixa e barra proporcional */
.lg-grafico { --grafico-1: #2a78d6; --grafico-2: #c4511f; --grafico-3: #12805c; --grafico-4: #9a6b00; --grafico-5: #b53a73; --grafico-6: #5b6573; --grafico-grade: var(--cor-borda); --grafico-eixo: var(--cor-texto-secundario); }
:root[data-tema="escuro"] .lg-grafico { --grafico-1: #5aa0f0; --grafico-2: #f08a5d; --grafico-3: #3fc79a; --grafico-4: #e0b040; --grafico-5: #e57aa8; --grafico-6: #9aa4b2; }
.lg-grafico-area { position: relative; min-block-size: 16rem; min-inline-size: 0; }
.lg-grafico-area[aria-busy="true"] { opacity: 0.5; }
.lg-grafico-area svg { display: block; inline-size: 100%; max-inline-size: 100%; block-size: auto; overflow: visible; }
.lg-grafico-area svg text { font-size: 12px; fill: var(--cor-texto-secundario); }
.lg-grafico-area svg .v { fill: var(--cor-texto); font-weight: var(--peso-semi); }
.lg-grafico-legenda { display: flex; flex-wrap: wrap; gap: var(--esp-16); font-size: var(--texto-14); }
.lg-grafico-legenda > span, .lg-grafico-dica .row > span { display: inline-flex; align-items: center; gap: var(--esp-8); }
.lg-grafico-marca { inline-size: 1rem; block-size: 1rem; flex: none; }
.lg-grafico-dica { display: grid; gap: var(--esp-4); margin-block-start: var(--esp-8); padding: var(--esp-8) var(--esp-12); background: var(--cor-superficie-2); border-radius: var(--raio-8); font-size: var(--texto-14); }
.lg-grafico-dica[hidden] { display: none; }
.lg-grafico-dica .row { display: flex; justify-content: space-between; gap: var(--esp-8); align-items: center; }
.lg-barra-prop { display: block; appearance: none; -webkit-appearance: none; inline-size: 100%; max-inline-size: 10rem; block-size: var(--esp-8); margin-inline-start: auto; border: 0; border-radius: var(--raio-redondo); background: var(--cor-superficie-2); overflow: hidden; accent-color: var(--grafico-1, var(--cor-info)); }
.lg-barra-prop::-webkit-progress-bar { background: var(--cor-superficie-2); }
.lg-barra-prop::-webkit-progress-value { background: var(--grafico-1, var(--cor-info)); border-radius: var(--raio-redondo); }
.lg-barra-prop::-moz-progress-bar { background: var(--grafico-1, var(--cor-info)); border-radius: var(--raio-redondo); }
.lg-barra-prop--2::-webkit-progress-value { background: var(--grafico-2, var(--cor-aviso)); }
.lg-barra-prop--2::-moz-progress-bar { background: var(--grafico-2, var(--cor-aviso)); }
.lg-barra-prop--ok::-webkit-progress-value { background: var(--cor-sucesso); } .lg-barra-prop--ok::-moz-progress-bar { background: var(--cor-sucesso); }
.lg-barra-prop--erro::-webkit-progress-value { background: var(--cor-erro); } .lg-barra-prop--erro::-moz-progress-bar { background: var(--cor-erro); }
/* grupo de botões em que um fica marcado (aria-pressed): tipo de lançamento, visão, unidade */
.lg-alternador { display: inline-flex; flex-wrap: wrap; gap: var(--esp-4); padding: var(--esp-4); background: var(--cor-superficie-2); border-radius: var(--raio-8); max-inline-size: 100%; }
.lg-alternador > button { min-block-size: var(--alvo-minimo); padding: 0 var(--esp-16); border: 0; border-radius: var(--raio-8); background: transparent; color: var(--cor-texto-secundario); font: inherit; font-weight: var(--peso-semi); cursor: pointer; }
.lg-alternador > button:hover { color: var(--cor-texto); }
.lg-alternador > button[aria-pressed="true"] { background: var(--cor-superficie); color: var(--cor-texto); box-shadow: var(--sombra-1); }
.lg-alternador > button:focus-visible { outline: var(--linha-grossa) solid var(--cor-foco); outline-offset: var(--linha-grossa); }
/* lançamento (data, descrição, valor, ações) */
.lg-lancamentos { display: flex; flex-direction: column; }
.lg-lancamento { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: var(--esp-8) var(--esp-12); align-items: center; padding-block: var(--esp-12); border-block-end: var(--linha) solid var(--cor-borda); }
.lg-lancamento:last-child { border-block-end: 0; }
.lg-lancamento .dt { color: var(--cor-texto-secundario); font-size: var(--texto-14); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lg-lancamento .tx b { display: block; }
.lg-lancamento .tx small { display: block; color: var(--cor-texto-secundario); font-size: var(--texto-14); overflow-wrap: anywhere; }
.lg-lancamento .val { font-weight: var(--peso-forte); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 767px) { .lg-lancamento { grid-template-columns: minmax(0, 1fr) auto; } .lg-lancamento > .tx { grid-column: 1 / -1; grid-row: 2; } .lg-lancamento > :last-child { grid-column: 1 / -1; justify-content: flex-start; } }
/* grupo de opções com legenda (fieldset) */
.lg-grupo-opcoes { min-inline-size: 0; margin: 0; padding: var(--esp-12); border: var(--linha) solid var(--cor-borda); border-radius: var(--raio-8); display: grid; gap: var(--esp-4); align-content: start; max-block-size: 18rem; overflow-y: auto; }
.lg-grupo-opcoes > legend { padding-inline: var(--esp-4); font-weight: var(--peso-semi); }
.lg-recolhido > :not(summary) { margin-block-start: var(--esp-12); }
@media (max-width: 767px) { .lg-cabecalho-pagina--empilha { grid-template-columns: minmax(0, 1fr); } .lg-cabecalho-pagina--empilha > .lg-cabecalho-pagina-acoes { flex-wrap: wrap; } }
.lg-u-apagado { opacity: 0.55; } .lg-u-flex-none { flex: none; }
.lg-sem-rolagem { overflow: hidden; }
.lg-recorte { position: relative; overflow: hidden; inline-size: fit-content; max-inline-size: 100%; margin-inline: auto; touch-action: none; cursor: grab; background: var(--cor-superficie-2); border: var(--linha) solid var(--cor-borda); }
.lg-recorte > svg { display: block; max-inline-size: 100%; }
.lg-recorte.rq-redondo { border-radius: var(--raio-redondo); }
.lg-recorte-grade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to right, transparent 33%, rgb(255 255 255 / 0.5) 33% calc(33% + 1px), transparent calc(33% + 1px) 66%, rgb(255 255 255 / 0.5) 66% calc(66% + 1px), transparent calc(66% + 1px)), linear-gradient(to bottom, transparent 33%, rgb(255 255 255 / 0.5) 33% calc(33% + 1px), transparent calc(33% + 1px) 66%, rgb(255 255 255 / 0.5) 66% calc(66% + 1px), transparent calc(66% + 1px)); }
.lg-previa-capa { max-inline-size: calc(var(--largura-campo-medio) * 1.4); min-block-size: 6rem; display: grid; place-items: center; overflow: hidden; border-radius: var(--raio-8); background: var(--cor-superficie-2); color: var(--cor-texto-secundario); font-size: var(--texto-14); }
.lg-previa-marca { display: block; inline-size: 100%; max-inline-size: calc(var(--largura-campo-medio) * 1.6); border-radius: var(--raio-8); border: var(--linha) solid var(--cor-borda); }
/* grade de indicadores equilibrada por script (grade-equilibrada.js): colunas pelo atributo */
.lg-grade[data-colunas="1"] { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.lg-grade[data-colunas="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lg-grade[data-colunas="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lg-grade[data-colunas="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lg-grade[data-colunas="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.lg-grade[data-colunas="6"] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.lg-grade[data-colunas="7"] { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.lg-grade[data-colunas="8"] { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.lg-previa-imagem { display: grid; place-items: center; inline-size: 100%; block-size: 7rem; border-radius: var(--raio-8); background: var(--cor-superficie-2); overflow: hidden; }
.lg-botao-arquivo > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-inline-size: 100%; }
.lg-barra-linha { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) auto; gap: var(--esp-8); align-items: center; font-size: var(--texto-14); }
.lg-barra-linha > .lg-barra-prop, .lg-barra-linha > .trk { max-inline-size: none; margin: 0; }
.lg-barra-linha .tr { display: flex; flex-direction: column; gap: var(--esp-4); }
.lg-previa-caixa { padding: var(--esp-12); border: var(--linha) solid var(--cor-borda); border-radius: var(--raio-8); background: var(--cor-superficie-2); overflow: auto; max-inline-size: 100%; }
.lg-pilha--8 { gap: var(--esp-8); }
.lg-linha > *, .lg-acoes > * { min-inline-size: 0; }
.lg-linha:has(> .lg-u-flex1 > .lg-abas) { flex-wrap: wrap; }
.lg-pagina .lg-botao--p, .lg-sobreposicao .lg-botao--p { min-inline-size: var(--alvo-minimo); }
/* ajuda do painel (public/js/adm-ajuda.js): as regras que o script injetava em <style id="aj-css"> */
.aj-top { display: flex; flex-wrap: wrap; gap: var(--esp-8); align-items: center; }
.aj-top input { flex: 1 1 220px; min-inline-size: 0; }
.aj-sec { display: grid; gap: calc(var(--esp-4) * 1.5); border: calc(var(--linha) * 1.5) solid var(--cor-borda); border-radius: var(--raio-12); padding: var(--esp-12) calc(var(--esp-12) + var(--esp-4) / 2); }
.aj-sec h4 { margin: 0; font-size: var(--texto-16); }
.aj-sec p { margin: 0; }
.aj-sec ol, .aj-sec ul { margin: 0; padding-inline-start: calc(var(--esp-16) + var(--esp-4)); display: grid; gap: var(--esp-4); }
.aj-dica { font-size: calc(var(--texto-16) * 0.9); border-inline-start: var(--linha-marca) solid var(--cor-aviso-borda); padding: var(--esp-4) calc(var(--esp-12) - var(--esp-4) / 2); margin: 0; }
.aj-lista { display: flex; flex-wrap: wrap; gap: calc(var(--esp-4) * 1.5); }
.aj-lista button { font-size: calc(var(--texto-16) * 0.85); }
/* fim 25.A10 */
/* ---- 25.A11 Clube: painel e site do clube ---- */
/* estilo da instalação (escola.json › estilo): o /tema-instalacao.css do estilo "clube" liga --titulo-caixa e --rotulo-caixa
   (caixa alta) e encolhe os raios (cantos retos). Sem o estilo, nada muda (os valores padrão são os da base). */
.lg-base :is(.lg-titulo-1, .lg-titulo-2, .lg-grupo-titulo, .lg-marca-nome, .lg-estado-codigo, .lg-numero-valor) { text-transform: var(--titulo-caixa, none); }
.lg-base :is(.lg-botao, .lg-aba) { text-transform: var(--rotulo-caixa, none); letter-spacing: var(--rotulo-espaco, normal); }
/* gaveta larga (formulário em 2 colunas no PC, tabelas, estúdio de artes) */
.lg-gaveta--larga { inline-size: min(calc(var(--largura-gaveta) * 2), 100vw); }
@media (max-width: 767px) { .lg-gaveta--larga { inline-size: 100vw; } }
/* ação perigosa no rodapé do diálogo: fica à esquerda, longe da principal */
.lg-dialogo-rodape-esquerda { margin-inline-end: auto; }
/* miniatura de imagem numa linha da lista (foto da notícia, logo, desenho do exercício) */
.lg-miniatura { flex: none; display: block; inline-size: var(--esp-64); block-size: var(--icone-48); object-fit: cover; border-radius: var(--raio-4); background: var(--cor-superficie-2); border: var(--linha) solid var(--cor-borda); }
.lg-miniatura--g { inline-size: calc(var(--esp-64) * 2); block-size: calc(var(--icone-48) * 2); }
.lg-miniatura--contida { object-fit: contain; }
/* linha inteira da lista abre o item (o botão "Editar" da linha continua sendo o alvo do teclado) */
.lg-lista-item--clicavel { cursor: pointer; }
.lg-lista-item--clicavel:hover { background: var(--cor-superficie-2); }
/* grupo de etiquetas embaixo do título de uma linha */
.lg-etiquetas { display: flex; flex-wrap: wrap; gap: var(--esp-4); padding-block-start: var(--esp-4); }
.lg-etiquetas > .lg-etiqueta { white-space: normal; }
/* linha com várias ações: no celular as ações descem para baixo do texto (o texto fica com a largura toda) */
@media (max-width: 767px) {
  .lg-lista-item--empilha { flex-wrap: wrap; }
  .lg-lista-item--empilha > .lg-lista-principal { flex-basis: 100%; }
  .lg-lista-item--empilha > .lg-lista-lado { flex: 1 1 100%; min-inline-size: 0; max-inline-size: none; flex-wrap: wrap; justify-content: flex-start; }
}
/* cartão inteiro como link (ex.: indicador do início que leva à tela) */
a.lg-cartao { color: inherit; text-decoration: none; }
a.lg-cartao:hover { border-color: var(--cor-borda-controle); }
/* campo numérico curto dentro de tabela (pontos, nota, minutos) */
.lg-entrada--mini { max-inline-size: calc(var(--esp-64) + var(--esp-24)); }
/* linha de uma lista repetida dentro de um formulário (responsáveis, objetivos, exercícios do treino) */
.lg-repetidor-linha { display: flex; flex-direction: column; gap: var(--esp-8); padding: var(--esp-12); border: var(--linha) dashed var(--cor-borda-controle); border-radius: var(--raio-8); background: var(--cor-superficie-2); }
/* prévia de uma arte (imagem retrato ou paisagem), centrada sobre fundo neutro */
.lg-previa-arte { display: grid; place-items: center; min-block-size: calc(var(--esp-64) * 4); padding: var(--esp-12); border-radius: var(--raio-8); background: var(--cor-superficie-2); border: var(--linha) solid var(--cor-borda); }
.lg-previa-arte > img { display: block; max-inline-size: 100%; max-block-size: 70dvh; inline-size: auto; block-size: auto; box-shadow: var(--sombra-2); }
/* senha ou código provisório para a pessoa copiar (não muda maiúsculas) */
.lg-senha-provisoria { padding: var(--esp-12); border-radius: var(--raio-4); background: var(--cor-superficie-2); font-size: var(--texto-24); font-weight: var(--peso-forte); letter-spacing: 0.06em; text-align: center; user-select: all; overflow-wrap: anywhere; }
/* fim 25.A11 */
/* ---- 25.A12 Legacy: súmula ao vivo (modelo Copa Fácil) ---- */
/* placar: equipes nas pontas, números grandes no meio; cronômetro logo abaixo */
.lg-sv-placar { display: flex; flex-direction: column; gap: var(--esp-12); align-items: stretch; }
.lg-sv-placar-linha { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--esp-16); }
.lg-sv-equipe { display: flex; flex-direction: column; align-items: center; gap: var(--esp-8); min-inline-size: 0; text-align: center; font-weight: var(--peso-semi); }
.lg-sv-equipe-nome { overflow-wrap: anywhere; font-size: var(--texto-18); line-height: var(--altura-linha-titulo); }
.lg-sv-centro { display: flex; flex-direction: column; align-items: center; gap: var(--esp-4); }
.lg-sv-numeros { display: inline-flex; align-items: center; gap: var(--esp-12); margin: 0; font-family: var(--fonte-titulo); font-weight: var(--peso-forte); font-size: min(calc(var(--texto-36) * 2), 16vw); line-height: 1; font-variant-numeric: tabular-nums; }
.lg-sv-numeros--texto { font-size: var(--texto-24); text-align: center; }
.lg-sv-x { font-size: var(--texto-24); color: var(--cor-texto-secundario); font-weight: var(--peso-semi); }
.lg-sv-chips { justify-content: center; }
.lg-sv-andamento { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--alvo-espaco); }
.lg-sv-vivo { background: var(--cor-erro); border-color: var(--cor-erro); color: var(--cor-erro-contraste); }
/* cronômetro */
.lg-sv-relogio { align-items: center; text-align: center; }
.lg-sv-tempo { display: flex; align-items: baseline; justify-content: center; gap: var(--esp-8); margin: 0; font-family: var(--fonte-titulo); font-weight: var(--peso-forte); font-size: min(calc(var(--texto-36) * 2.2), 20vw); line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.lg-sv-extra { font-size: var(--texto-24); color: var(--cor-erro-texto); }
.lg-sv-relogio--fim .lg-sv-tempo { color: var(--cor-erro-texto); }
.lg-sv-periodo { margin: 0; }
.lg-sv-controles { justify-content: center; }
.lg-sv-controles > form { display: inline-flex; }
.lg-sv-relogio [hidden] { display: none; }
/* botões de lance por equipe */
.lg-sv-lances { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(var(--esp-64) * 2)), 1fr)); gap: var(--alvo-espaco); }
.lg-sv-lance { min-block-size: calc(var(--alvo-minimo) + var(--esp-8)); justify-content: center; gap: var(--esp-8); text-align: center; }
.lg-sv-lance-pts { font-variant-numeric: tabular-nums; }
/* linha do tempo (mais recente primeiro) */
.lg-sv-lista .lg-lista-item { align-items: center; gap: var(--esp-12); }
.lg-sv-quando { flex: none; min-inline-size: calc(var(--esp-64) + var(--esp-12)); font-family: var(--fonte-titulo); font-weight: var(--peso-forte); font-size: var(--texto-20); font-variant-numeric: tabular-nums; }
.lg-sv-lista .lg-lista-principal { flex: 1 1 12rem; }
.lg-sv-links { justify-content: flex-start; }
.lg-sv-resumo-lista { margin: 0; padding-inline-start: var(--esp-16); }
.lg-sv-cores { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-8); }
/* "Gool!" por cima da tela por 2 s */
.lg-sv-gool { position: fixed; inset: 0; z-index: var(--camada-modal); display: grid; place-items: center; pointer-events: none; font-family: var(--fonte-titulo); font-size: min(22vw, 10rem); font-weight: var(--peso-forte); color: var(--cor-erro); text-shadow: 0 6px 30px var(--cor-sombra-forte); animation: lg-sv-gool 2.2s ease-out forwards; }
@keyframes lg-sv-gool { 0% { opacity: 0; transform: scale(0.4); } 20% { opacity: 1; transform: scale(1.15); } 70% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.4); } }
@media (max-width: 767px) {
  .lg-sv-placar-linha { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--esp-8); }
  .lg-sv-numeros { font-size: min(calc(var(--texto-36) * 1.6), 15vw); gap: var(--esp-8); }
  .lg-sv-tempo { font-size: min(calc(var(--texto-36) * 2), 22vw); }
  .lg-sv-equipe-nome { font-size: var(--texto-16); }
  .lg-sv-lista .lg-lista-item { flex-wrap: wrap; }
  .lg-sv-lista .lg-lista-lado { inline-size: 100%; }
}
@media (prefers-reduced-motion: reduce) { .lg-sv-gool { animation: none; } }
/* fim 25.A12 */
/* ---- 25.A13 Legacy: súmula ao vivo 6.2 (layout do Copa Fácil) ---- */
/* números em estilo de relógio digital (7 segmentos só com CSS): <span class="lg-digital"><span class="lg-7seg" data-d="4"><i></i>×7</span>…</span>
   segmentos na ordem a (topo), b (dir. alto), c (dir. baixo), d (base), e (esq. baixo), f (esq. alto), g (meio); apagado = 10% */
.lg-digital { display: inline-flex; align-items: center; gap: 0.12em; line-height: 1; }
.lg-7seg { position: relative; display: inline-block; flex: none; inline-size: 0.56em; block-size: 1em; }
.lg-7seg > i { position: absolute; display: block; background: currentColor; border-radius: 0.05em; }
.lg-7seg > i:nth-child(1), .lg-7seg > i:nth-child(4), .lg-7seg > i:nth-child(7) { inset-inline: 0.08em; block-size: 0.1em; }
.lg-7seg > i:nth-child(1) { inset-block-start: 0; }
.lg-7seg > i:nth-child(4) { inset-block-end: 0; }
.lg-7seg > i:nth-child(7) { inset-block-start: calc(50% - 0.05em); }
.lg-7seg > i:nth-child(2), .lg-7seg > i:nth-child(3), .lg-7seg > i:nth-child(5), .lg-7seg > i:nth-child(6) { inline-size: 0.1em; block-size: calc(50% - 0.1em); }
.lg-7seg > i:nth-child(2) { inset-inline-end: 0; inset-block-start: 0.07em; }
.lg-7seg > i:nth-child(3) { inset-inline-end: 0; inset-block-end: 0.07em; }
.lg-7seg > i:nth-child(5) { inset-inline-start: 0; inset-block-end: 0.07em; }
.lg-7seg > i:nth-child(6) { inset-inline-start: 0; inset-block-start: 0.07em; }
.lg-7seg:is([data-d="1"], [data-d="4"]) > i:nth-child(1),
.lg-7seg:is([data-d="5"], [data-d="6"]) > i:nth-child(2),
.lg-7seg[data-d="2"] > i:nth-child(3),
.lg-7seg:is([data-d="1"], [data-d="4"], [data-d="7"]) > i:nth-child(4),
.lg-7seg:is([data-d="1"], [data-d="3"], [data-d="4"], [data-d="5"], [data-d="7"], [data-d="9"]) > i:nth-child(5),
.lg-7seg:is([data-d="1"], [data-d="2"], [data-d="3"], [data-d="7"]) > i:nth-child(6),
.lg-7seg:is([data-d="0"], [data-d="1"], [data-d="7"]) > i:nth-child(7) { opacity: 0.1; }
.lg-7seg-pontos { position: relative; display: inline-block; flex: none; inline-size: 0.14em; block-size: 1em; }
.lg-7seg-pontos::before, .lg-7seg-pontos::after { content: ""; position: absolute; inset-inline-start: 0.02em; inline-size: 0.1em; block-size: 0.1em; background: currentColor; border-radius: 0.02em; }
.lg-7seg-pontos::before { inset-block-start: 0.28em; }
.lg-7seg-pontos::after { inset-block-end: 0.28em; }
.lg-7seg-txt { font-family: var(--fonte-titulo); font-weight: var(--peso-forte); }
/* faixa preta de título (PLACAR, FALTAS ACUMULADAS, nome da equipe) e blocos */
.lg-sv2 { padding-block-end: calc(var(--icone-48) + var(--esp-32)); }
.lg-sv2-faixa { display: flex; align-items: center; gap: var(--esp-8); margin: 0; min-block-size: var(--alvo-minimo); padding: var(--esp-8) var(--esp-16); background: var(--cor-texto); color: var(--cor-fundo); font-family: var(--fonte-titulo); font-size: var(--texto-16); font-weight: var(--peso-forte); line-height: var(--altura-linha-compacta); text-transform: uppercase; letter-spacing: 0.06em; }
.lg-sv2-faixa-apoio { font-family: var(--fonte-interface); font-size: var(--texto-14); font-weight: var(--peso-normal); text-transform: none; letter-spacing: 0; }
.lg-sv2-faixa .lg-botao:focus-visible, .lg-sv2-topo :focus-visible, .lg-sv2-faixa:focus-visible { outline-color: var(--cor-fundo); }
.lg-sv2-faixa-botao { flex: none; margin-inline-start: auto; --botao-fundo: transparent; --botao-borda: transparent; --botao-texto: var(--cor-fundo); --botao-fundo-pressionado: transparent; }
.lg-sv2-bloco, .lg-sv2-placar { min-inline-size: 0; background: var(--cor-superficie); border: var(--linha) solid var(--cor-borda); border-radius: var(--raio-12); }
.lg-sv2-bloco > .lg-sv2-faixa:first-child, .lg-sv2-placar > .lg-sv2-faixa:first-child { border-start-start-radius: calc(var(--raio-12) - var(--linha)); border-start-end-radius: calc(var(--raio-12) - var(--linha)); }
.lg-sv2-bloco .lg-lista { border-inline: 0; border-radius: 0; border-block-end: 0; }
.lg-sv2-titulo { display: flex; align-items: center; gap: var(--esp-8); padding: var(--esp-8) var(--esp-8) var(--esp-8) var(--esp-16); }
.lg-sv2-titulo > h2 { flex: 1 1 auto; min-inline-size: 0; margin: 0; }
.lg-sv2-bloco > [data-sv-frag] > .lg-texto-apoio, .lg-sv2-bloco > .lg-texto-apoio, .lg-sv2-vazio { margin: 0; padding: var(--esp-8) var(--esp-16) var(--esp-16); }
/* barra de topo: voltar · situação · PDF · ⋮ (presa logo abaixo do cabeçalho ao rolar) */
.lg-sv2-topo { position: sticky; inset-block-start: var(--altura-cabecalho); z-index: var(--camada-fixo); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--esp-8); padding: var(--esp-4) var(--esp-8); background: var(--cor-texto); color: var(--cor-fundo); border-radius: var(--raio-8); box-shadow: var(--sombra-1); }
.lg-sv2-topo .lg-menu-mais-lista { color: var(--cor-texto); }
.lg-sv2-topo .lg-menu-mais-lista :focus-visible { outline-color: var(--cor-foco); }
.lg-sv2-topo-fim { display: flex; align-items: center; gap: var(--esp-4); }
.lg-sv2-topo-botao { min-block-size: var(--alvo-minimo); min-inline-size: var(--alvo-minimo); --botao-fundo: transparent; --botao-borda: transparent; --botao-texto: var(--cor-fundo); --botao-fundo-pressionado: transparent; }
.lg-sv2-topo-botao:hover { box-shadow: inset 0 0 0 var(--linha) var(--cor-fundo); }
.lg-sv2-pdf { --botao-borda: var(--cor-fundo); padding-inline: var(--esp-8); font-weight: var(--peso-forte); letter-spacing: 0.04em; }
.lg-sv2-situacao { justify-self: center; min-inline-size: 0; max-inline-size: 100%; }
.lg-sv2-situacao-botao { min-block-size: var(--alvo-minimo); max-inline-size: 100%; --botao-fundo: transparent; --botao-borda: var(--cor-fundo); --botao-texto: var(--cor-fundo); --botao-fundo-pressionado: transparent; text-transform: uppercase; letter-spacing: 0.04em; font-weight: var(--peso-forte); white-space: nowrap; }
.lg-sv2-situacao-botao > span:not(.lg-so-leitor) { overflow: hidden; text-overflow: ellipsis; }
.lg-sv2-situacao-botao--vivo::before { content: ""; flex: none; inline-size: var(--esp-8); block-size: var(--esp-8); border-radius: 50%; background: var(--cor-erro); box-shadow: 0 0 0 var(--linha) var(--cor-fundo); }
.lg-sv2-situacao .lg-sv-andamento { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: var(--esp-4); }
.lg-sv2-opcao { justify-content: flex-start; inline-size: 100%; min-block-size: var(--alvo-minimo); --botao-texto: var(--cor-texto); }
.lg-sv2-opcao--atual { --botao-fundo: var(--cor-superficie-2); font-weight: var(--peso-forte); }
@media (min-width: 768px) {
  .lg-sv2-situacao .lg-menu-mais-lista { inset-inline-end: auto; inset-inline-start: 50%; transform: translateX(-50%); }
}
.lg-sv2-meta { margin: 0; color: var(--cor-texto-secundario); font-size: var(--texto-apoio); text-align: center; }
/* placar */
.lg-sv2-placar-corpo { display: flex; flex-direction: column; gap: var(--esp-12); padding: var(--esp-16); }
.lg-sv2-numeros { display: inline-flex; align-items: center; gap: var(--esp-12); margin: 0; color: var(--cor-texto); font-size: min(calc(var(--texto-36) * 2), 15vw); line-height: 1; }
.lg-sv2-x { font-family: var(--fonte-titulo); font-size: var(--texto-24); font-weight: var(--peso-semi); color: var(--cor-texto-secundario); }
/* botão redondo do cronômetro (acompanha a rolagem) e o painel que ele abre */
.lg-sv2-flutuante { position: fixed; inset-inline-end: var(--esp-16); inset-block-end: calc(var(--esp-16) + env(safe-area-inset-bottom, 0px)); z-index: var(--camada-fixo); }
.lg-sv2-crono-botao { flex-direction: column; gap: 0; inline-size: calc(var(--icone-48) + var(--esp-16)); block-size: calc(var(--icone-48) + var(--esp-16)); min-inline-size: 0; padding: 0; border-radius: var(--raio-redondo); box-shadow: var(--sombra-3); --botao-fundo: var(--cor-texto); --botao-borda: var(--cor-fundo); --botao-texto: var(--cor-fundo); --botao-fundo-pressionado: var(--cor-texto); }
.lg-sv2-crono-botao .lg-icone { inline-size: var(--icone-24); block-size: var(--icone-24); }
.lg-sv2-crono-tempo { font-size: var(--texto-12); font-variant-numeric: tabular-nums; line-height: 1; }
.lg-sv2-crono { inline-size: min(calc(var(--esp-64) * 6), calc(100vw - var(--esp-32))); }
.lg-sv2-relogio { display: flex; flex-direction: column; align-items: stretch; gap: var(--esp-12); padding: var(--esp-12) var(--esp-16) var(--esp-16); overflow: auto; text-align: center; }
.lg-sv2-relogio-topo { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--esp-4); }
.lg-sv2-relogio-topo .lg-botao, .lg-sv2-relogio-meio .lg-botao { min-block-size: var(--alvo-minimo); inline-size: var(--alvo-minimo); }
.lg-sv2-relogio-periodo { margin: 0; font-family: var(--fonte-titulo); font-size: var(--texto-20); font-weight: var(--peso-forte); }
.lg-sv2-relogio-meio { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--esp-8); }
.lg-sv2-visor { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--esp-4); margin: 0; padding: var(--esp-12) var(--esp-8); background: var(--cor-superficie-2); border-radius: var(--raio-8); color: var(--cor-texto); font-size: min(calc(var(--texto-36) * 1.5), 13vw); }
.lg-sv2-visor .lg-sv-extra { font-size: var(--texto-16); }
.lg-sv2-relogio-baixo { display: flex; justify-content: center; gap: var(--esp-16); }
.lg-sv2-relogio-baixo .lg-botao { inline-size: calc(var(--alvo-minimo) + var(--esp-12)); block-size: calc(var(--alvo-minimo) + var(--esp-12)); border-radius: var(--raio-redondo); }
.lg-sv2-relogio-baixo .lg-icone { inline-size: var(--icone-24); block-size: var(--icone-24); }
/* faltas acumuladas (recolhível) */
.lg-sv2-faltas > summary { cursor: pointer; list-style: none; }
.lg-sv2-faltas > summary::-webkit-details-marker { display: none; }
.lg-sv2-faltas > summary > .lg-icone { margin-inline-start: auto; }
.lg-sv2-faltas[open] > summary > .lg-icone { transform: rotate(180deg); }
.lg-sv2-faltas:not([open]) > summary { border-radius: calc(var(--raio-12) - var(--linha)); }
.lg-sv2-faltas-lista { display: flex; flex-direction: column; gap: var(--esp-8); margin: 0; padding: var(--esp-8) var(--esp-16) var(--esp-12); list-style: none; }
.lg-sv2-faltas-linha { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-8) var(--esp-12); min-block-size: var(--alvo-minimo); }
.lg-sv2-faltas-nome { flex: 1 1 8rem; min-inline-size: 0; font-weight: var(--peso-semi); overflow-wrap: anywhere; }
.lg-sv2-bolinhas { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--esp-4); }
.lg-sv2-bolinha { inline-size: var(--esp-16); block-size: var(--esp-16); border-radius: 50%; background: var(--cor-desativado-fundo); border: var(--linha) solid var(--cor-borda-controle); }
.lg-sv2-bolinha--cheia { background: var(--cor-texto); border-color: var(--cor-texto); }
.lg-sv2-bolinhas-mais { font-weight: var(--peso-forte); font-variant-numeric: tabular-nums; }
.lg-sv2-faltas-acoes { display: inline-flex; align-items: center; gap: var(--esp-4); }
.lg-sv2-faltas-acoes .lg-botao { min-block-size: var(--alvo-minimo); min-inline-size: var(--alvo-minimo); }
/* uma tabela por equipe: # · jogadores (relacionado) · titular · gols · cartões */
.lg-sv2-equipes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr)); gap: var(--esp-16); align-items: start; }
.lg-sv2-time-nome { display: flex; align-items: center; gap: var(--esp-8); min-inline-size: 0; margin: 0; font: inherit; overflow-wrap: anywhere; }
.lg-sv2-tabela-caixa { min-inline-size: 0; }
.lg-sv2-tabela { font-size: var(--texto-14); }
.lg-sv2-tabela th, .lg-sv2-tabela td { padding: var(--esp-4); vertical-align: middle; }
.lg-sv2-tabela thead th { position: static; font-size: var(--texto-12); text-transform: uppercase; letter-spacing: 0.04em; }
.lg-sv2-tabela tbody tr:hover > * { background: transparent; }
.lg-sv2-col { inline-size: 1%; text-align: center; white-space: nowrap; }
.lg-sv2-col .lg-cartao-disciplinar { vertical-align: middle; }
.lg-sv2-camisa { font-variant-numeric: tabular-nums; font-weight: var(--peso-semi); }
.lg-sv2-tabela .lg-sv2-marcar { min-block-size: var(--alvo-minimo); align-items: center; gap: var(--esp-8); }
.lg-sv2-nome { display: flex; flex-direction: column; min-inline-size: 0; font-weight: var(--peso-semi); line-height: var(--altura-linha-compacta); text-transform: uppercase; overflow-wrap: anywhere; }
.lg-sv2-dn { font-size: var(--texto-12); font-weight: var(--peso-normal); color: var(--cor-texto-secundario); text-transform: none; }
.lg-sv2-fora .lg-sv2-nome, .lg-sv2-fora .lg-sv2-camisa { color: var(--cor-texto-secundario); }
.lg-sv2-tabela .lg-sv2-chave { justify-content: center; gap: 0; min-block-size: var(--alvo-minimo); min-inline-size: var(--alvo-minimo); }
.lg-sv2-tabela tbody tr[data-sv-extra] { display: none; }
.lg-sv2-time:has(.lg-sv2-mais > input:checked) .lg-sv2-tabela tbody tr[data-sv-extra] { display: table-row; }
.lg-sv2-gol { display: inline-grid; place-items: center; inline-size: var(--alvo-minimo); block-size: var(--alvo-minimo); padding: 0; border: var(--linha) solid var(--cor-borda-controle); border-radius: var(--raio-8); background: var(--cor-superficie); color: var(--cor-texto); font-family: var(--fonte-titulo); font-size: var(--texto-18); font-weight: var(--peso-forte); font-variant-numeric: tabular-nums; }
button.lg-sv2-gol, button.lg-sv2-cartao { cursor: pointer; }
.lg-sv2-gol--tem { background: var(--cor-texto); border-color: var(--cor-texto); color: var(--cor-fundo); }
.lg-sv2-cartao { position: relative; display: inline-grid; place-items: center; inline-size: var(--alvo-minimo); block-size: var(--alvo-minimo); padding: 0; border: 0; border-radius: var(--raio-4); background: transparent; color: var(--cor-texto); font: inherit; }
.lg-sv2-cartao::before { content: ""; inline-size: calc(var(--esp-16) + var(--esp-4)); block-size: calc(var(--esp-24) + var(--esp-4)); border-radius: var(--raio-4); background: var(--cor-desativado-fundo); border: var(--linha) solid var(--cor-borda-controle); }
.lg-sv2-cartao > span[aria-hidden] { position: absolute; inset-block-start: 0; inset-inline-end: 0; min-inline-size: var(--esp-16); padding-inline: calc(var(--esp-4) / 2); border-radius: var(--raio-redondo); background: var(--cor-superficie); border: var(--linha) solid var(--cor-borda-controle); font-size: var(--texto-12); font-weight: var(--peso-forte); line-height: var(--esp-16); }
.lg-sv2-cartao--tem.lg-sv2-cartao--amarelo::before { background: var(--cor-cartao-amarelo); border-color: var(--cor-cartao-amarelo); }
.lg-sv2-cartao--tem.lg-sv2-cartao--vermelho::before { background: var(--cor-cartao-vermelho); border-color: var(--cor-cartao-vermelho); }
.lg-sv2-cartao--tem.lg-sv2-cartao--azul::before { background: var(--cor-cartao-azul); border-color: var(--cor-cartao-azul); }
.lg-sv2-cartao--tem.lg-sv2-cartao--verde::before { background: var(--cor-sucesso); border-color: var(--cor-sucesso); }
.lg-cartao-disciplinar--verde { background: var(--cor-sucesso); }
button.lg-sv2-gol:focus-visible, button.lg-sv2-cartao:focus-visible { outline: var(--linha-grossa) solid var(--cor-foco); outline-offset: var(--linha); }
button.lg-sv2-gol:hover { box-shadow: inset 0 0 0 var(--linha) var(--cor-texto); }
button.lg-sv2-cartao:hover { background: var(--cor-superficie-2); }
.lg-sv2-mais { position: relative; display: flex; justify-content: center; padding: var(--esp-4) var(--esp-16); }
.lg-sv2-mais > input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; }
.lg-sv2-mais > span { display: inline-flex; align-items: center; gap: var(--esp-8); min-block-size: var(--alvo-minimo); padding-inline: var(--esp-12); border-radius: var(--raio-4); color: var(--cor-link); font-weight: var(--peso-semi); cursor: pointer; }
.lg-sv2-mais > span:hover { background: var(--cor-primaria-suave); }
.lg-sv2-mais > input:focus-visible + span { outline: var(--linha-grossa) solid var(--cor-foco); outline-offset: var(--linha); }
.lg-sv2-mais > input:checked + span .lg-icone { transform: rotate(180deg); }
.lg-sv2-sem-js { padding: var(--esp-8) var(--esp-16); }
.lg-sv2-sem-js[hidden] { display: none; }
.lg-sv2-outros { margin: var(--esp-8) var(--esp-16) var(--esp-16); }
/* confirmação curta do lance, lista de lances e registros */
.lg-sv2-rapido-quem { margin: 0; font-family: var(--fonte-titulo); font-size: var(--texto-20); font-weight: var(--peso-forte); text-transform: uppercase; overflow-wrap: anywhere; }
.lg-sv2-filtros { padding: 0 var(--esp-16) var(--esp-12); }
.lg-sv2-filtros[hidden] { display: none; }
.lg-sv2-lance-texto { font-weight: var(--peso-semi); text-transform: uppercase; overflow-wrap: anywhere; }
.lg-sv2-lance-tipo { font-weight: var(--peso-forte); }
.lg-sv2-lances .lg-lista-item[hidden] { display: none; }
.lg-sv2-foto { flex: none; display: inline-flex; }
.lg-sv2-foto > img { inline-size: var(--icone-48); block-size: var(--icone-48); object-fit: cover; border-radius: var(--raio-4); }
.lg-sv2-registros .lg-lista-principal { overflow-wrap: anywhere; }
.lg-sv2-ajuda { display: flex; flex-direction: column; gap: var(--esp-8); margin: 0; padding-inline-start: var(--esp-16); }
@media (max-width: 559px) {
  /* celular: a linha do atleta quebra em duas (nome em cima; titular, gols e cartões embaixo, à direita) */
  .lg-sv2-tabela, .lg-sv2-tabela thead, .lg-sv2-tabela tbody { display: block; }
  .lg-sv2-tabela tr { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; padding-block: var(--esp-4); border-block-end: var(--linha) solid var(--cor-borda); }
  .lg-sv2-tabela tbody tr:last-child { border-block-end: 0; }
  .lg-sv2-tabela th, .lg-sv2-tabela td { display: block; border: 0; }
  .lg-sv2-tabela tr > :first-child { flex: none; inline-size: var(--esp-32); }
  .lg-sv2-tabela tr > :nth-child(2) { flex: 1 1 calc(100% - var(--esp-32) - var(--esp-8)); min-inline-size: 0; }
  .lg-sv2-tabela tr > :nth-child(n + 3) { flex: none; inline-size: auto; }
  .lg-sv2-time:has(.lg-sv2-mais > input:checked) .lg-sv2-tabela tbody tr[data-sv-extra] { display: flex; }
  .lg-sv2-numeros { font-size: min(calc(var(--texto-36) * 1.6), 13vw); gap: var(--esp-8); }
}
@media (prefers-reduced-motion: no-preference) {
  .lg-sv2-faltas > summary > .lg-icone, .lg-sv2-mais .lg-icone { transition: transform var(--duracao-rapida) var(--curva); }
}
@media print { .lg-sv2-flutuante, .lg-sv2-topo { display: none; } }
/* fim 25.A13 */
/* ---- 25.A14 Legacy: escalação visual (campo desenhado) e lance livre na linha do tempo ---- */
/* Campo vertical: equipe B em cima (goleiro no alto), equipe A embaixo. Marcas (bordas, meio-campo, círculo e
   áreas) só com bordas; nomes em etiquetas com fundo de superfície (contraste independe da cor do gramado). */
.lg-escv { display: flex; flex-direction: column; gap: var(--esp-12); min-inline-size: 0; }
.lg-escv-opcoes { flex-wrap: wrap; }
.lg-escv-campo {
  --escv-marca: color-mix(in srgb, var(--cor-superficie-elevada) 72%, transparent);
  position: relative; isolation: isolate; display: grid; grid-template-rows: 1fr 1fr;
  inline-size: 100%; max-inline-size: 40rem; min-inline-size: 0; margin-inline: auto;
  padding: var(--esp-8); border-radius: var(--raio-8); background: var(--cor-sucesso);
}
.lg-escv-marcas { position: absolute; inset: var(--esp-8); z-index: -1; border: var(--linha-grossa) solid var(--escv-marca); border-radius: var(--raio-4); pointer-events: none; }
.lg-escv-campo::before { content: ""; position: absolute; z-index: -1; inset-inline: var(--esp-8); inset-block-start: 50%; border-block-start: var(--linha-grossa) solid var(--escv-marca); }
.lg-escv-campo::after { content: ""; position: absolute; z-index: -1; inset-block-start: 50%; inset-inline-start: 50%; inline-size: 5rem; block-size: 5rem; border: var(--linha-grossa) solid var(--escv-marca); border-radius: var(--raio-redondo); transform: translate(-50%, -50%); }
.lg-escv-metade { position: relative; display: flex; flex-direction: column; justify-content: space-around; gap: var(--esp-12); min-inline-size: 0; min-block-size: 15rem; padding: var(--esp-8) var(--esp-4); }
.lg-escv-metade::before { content: ""; position: absolute; z-index: -1; inset-inline: 22%; block-size: 3.5rem; border: var(--linha-grossa) solid var(--escv-marca); }
.lg-escv-metade--b::before { inset-block-start: 0; border-block-start: 0; }
.lg-escv-metade--a::before { inset-block-end: 0; border-block-end: 0; }
.lg-escv-equipe { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--esp-4); margin: 0; }
.lg-escv-equipe-nome, .lg-escv-formacao { max-inline-size: 100%; padding: calc(var(--esp-4) / 2) var(--esp-8); border-radius: var(--raio-4); background: var(--cor-superficie); color: var(--cor-texto); font-size: var(--texto-14); font-weight: 700; overflow-wrap: anywhere; }
.lg-escv-formacao { background: var(--cor-superficie-2); font-weight: 400; }
.lg-escv-vazio { align-self: center; margin: 0; padding: var(--esp-4) var(--esp-8); border-radius: var(--raio-4); background: var(--cor-superficie); color: var(--cor-texto-secundario); font-size: var(--texto-14); }
.lg-escv-linha { display: flex; align-items: flex-start; justify-content: space-around; gap: var(--esp-4); min-inline-size: 0; margin: 0; padding: 0; list-style: none; }
.lg-escv-jogador { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: var(--esp-4); min-inline-size: 0; max-inline-size: 7rem; text-align: center; }
.lg-escv-camisa { position: relative; display: inline-grid; place-items: center; flex: none; inline-size: 2.5rem; block-size: 2.5rem; border-radius: var(--raio-redondo); box-shadow: 0 0 0 var(--linha-grossa) var(--escv-marca); font-family: var(--fonte-titulo); font-size: var(--texto-18); font-weight: 700; line-height: 1; }
.lg-escv-metade--a .lg-escv-camisa { background: var(--cor-primaria); color: var(--cor-primaria-contraste); }
.lg-escv-metade--b .lg-escv-camisa { background: var(--cor-superficie); color: var(--cor-texto); }
.lg-escv-camisa > img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; border-radius: inherit; }
.lg-escv-camisa--foto > .lg-escv-numero { visibility: hidden; }
.lg-escv-capitao { position: absolute; inset-block-start: calc(var(--esp-4) * -1); inset-inline-end: calc(var(--esp-8) * -1); display: grid; place-items: center; inline-size: 1.125rem; block-size: 1.125rem; border-radius: var(--raio-redondo); background: var(--cor-ouro-fundo); color: var(--cor-ouro); font-family: var(--fonte-interface); font-size: var(--texto-12); }
.lg-escv-nome { max-inline-size: 100%; padding: 0 var(--esp-4); border-radius: var(--raio-4); background: var(--cor-superficie); color: var(--cor-texto); font-size: var(--texto-12); line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* "Apenas número": some a foto e o nome fica só para leitor de tela */
.lg-escv--so-numero .lg-escv-camisa > img { display: none; }
.lg-escv--so-numero .lg-escv-camisa--foto > .lg-escv-numero { visibility: visible; }
.lg-escv--so-numero .lg-escv-nome { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 380px) {
  .lg-escv-campo { padding: var(--esp-4); }
  .lg-escv-camisa { inline-size: 2.25rem; block-size: 2.25rem; font-size: var(--texto-16); }
}
/* lance livre na lista "Lances da partida" (página pública): foto opcional, carregada só quando aparece */
.lg-lance-foto { display: block; inline-size: fit-content; max-inline-size: 100%; min-block-size: var(--alvo-minimo); margin-block-start: var(--esp-8); border-radius: var(--raio-8); }
.lg-lance-foto > img { display: block; inline-size: 100%; max-inline-size: min(20rem, 100%); block-size: auto; max-block-size: 14rem; object-fit: cover; border-radius: var(--raio-8); }
@media print { .lg-escv-opcoes { display: none; } }
/* fim 25.A14 */
/* ---- 25.A15 Escolas: processo seletivo com lista de interesse e WhatsApp só para dúvidas (6.3) ---- */
/* botão flutuante do WhatsApp com texto visível ("Dúvidas? Fale no WhatsApp"); sem o modificador, continua só o ícone */
.lg-flutuante--texto > .lg-botao { inline-size: auto; min-inline-size: var(--icone-48); padding-inline: var(--esp-16); gap: var(--esp-8); }
.lg-flutuante-texto { font-weight: var(--peso-semi); white-space: nowrap; }
/* fim 25.A15 */
/* ---- 25.A16 Escolas: evento anual da escola (página /<slug>, ex.: ASAS CUP) (6.4.0) ---- */
/* imagem de tabela, resultado ou cartaz enviada pela coordenação: inteira (sem corte), no máximo a largura de um formulário */
.lg-figura-arquivo { max-inline-size: var(--largura-formulario); }
.lg-figura-arquivo .lg-imagem { aspect-ratio: auto; max-block-size: 80vh; }
/* fim 25.A16 */

/* ===================================== 22. Impressão (relatórios e tabelas) =====================================
   Carteirinhas e súmulas mantêm as próprias folhas no tamanho físico atual (cartão, A4). */
@media print {
  @page { size: A4; margin: 15mm; }
  /* !important: na impressão, a navegação some mesmo que alguma tela a force a aparecer */
  .lg-cabecalho, .lg-menu-lateral, .lg-barra-inferior, .lg-rodape-acao, .lg-filtros, .lg-menu-mais, .lg-avisos,
  .lg-tabela-selecao, .lg-tabela-acoes, .lg-tabela-ver-celula, .lg-paginacao, .lg-nao-imprimir { display: none !important; }
  .lg-base { background: #fff; color: #000; font-size: 11pt; }
  .lg-app, .lg-app--com-menu { display: block; }
  .lg-pagina { padding: 0; max-inline-size: none; }
  .lg-cartao, .lg-lista, .lg-tabela-caixa { box-shadow: none; border-color: #999; break-inside: avoid; }
  .lg-tabela-caixa { overflow: visible; max-block-size: none; background: none; }
  .lg-tabela { display: table; font-size: 9pt; }
  .lg-tabela thead { display: table-header-group; position: static; }
  .lg-tabela thead th { position: static; background: #eee; color: #000; }
  .lg-tabela tr { display: table-row; break-inside: avoid; }
  .lg-tabela th, .lg-tabela td { display: table-cell; border-block-end: 0.5pt solid #999; }
  .lg-tabela [data-prioridade] { display: table-cell; }
  .lg-tabela td::before { content: none; }
  .lg-etiqueta { border-color: #000; background: none; color: #000; }
  .lg-link, .lg-base a { color: #000; }
  .lg-titulo-1, .lg-titulo-2 { break-after: avoid; }
}