/* =========================================================================
   Extreme Team - fundação do sistema visual
   Ordem de carregamento em todo template: theme.css → folhas de tela → extreme.css
   theme.css define tokens e primitivas. extreme.css aplica a identidade por cima.
   ========================================================================= */

@import url('fontes.css');
@import url('tokens.css');
@import url('componentes.css');

/* Os valores abaixo são ALIAS dos tokens --et-* (tokens.css). Mudar a identidade
   é mudar o token; estas variáveis só existem para as folhas de tela antigas. */
:root {
  /* ---- Superfícies escuras (painéis de marca, barra lateral, hero) ----
     Preto puro porque a arte da marca tem fundo preto: qualquer preto
     "quase" desenha um retângulo visível em volta do logo. */
  --ink:var(--et-black);
  --ink-2:var(--et-surface-dark);
  --ink-3:#2C2E31;
  --ink-4:#3C3F43;

  /* ---- Superfícies claras: papel quente, cartão branco ---- */
  --paper:var(--et-cream);
  --paper-2:#E3DED1;     /* faixa mais funda sobre o papel */
  --surface:#FFFFFF;
  --surface-2:#F6F3EC;   /* faixas de formulário, cabeçalho de tabela */
  --line:#DFDACC;
  --line-strong:#C5BEAC;

  /* ---- Texto: três níveis, todos acima de 4.5:1 sobre --paper ---- */
  --text:#16181A;
  --text-2:#4C5155;
  --text-3:#63686D;
  --text-on-ink:#F4F1E8;
  --text-on-ink-2:#A9ADB1;

  /* ---- Marca: amarelo reservado para ação e estado ativo ---- */
  --yellow:var(--et-gold);
  --yellow-soft:#FEF0BC;
  --gold:#D6A210;

  /* ---- Apoio decorativo: só nas formas abstratas do fundo e em selos
     de marca. Nunca comunicam situação. ---- */
  --clay:#B9541F;
  --forest:#1C4A38;

  /* ---- Semânticas de situação ---- */
  --green:#1D6244;      --green-bg:#DFEEE7;   --green-ink:#14503A;
  --red:#A03325;        --red-bg:#F7E1DD;     --red-ink:#7C2C22;
  --amber:#8A6B00;      --amber-bg:#FBEFC6;   --amber-ink:#5F4A00;
  --blue:#1C4478;       --blue-bg:#DDE6F5;    --blue-ink:#1A3E6C;
  --slate:#4C5155;      --slate-bg:#E4E2DC;   --slate-ink:#41454A;

  /* ---- Espaçamento: escala de 4 ---- */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-7:32px; --sp-8:40px; --sp-9:48px; --sp-10:64px; --sp-11:80px;

  /* ---- Raio: cartão generoso, controle contido ----
     O cartão é o bloco de leitura (20–28px). Botões e campos ficam num raio
     menor para continuar parecendo controle, não pastilha. */
  --radius-pill:999px;
  --radius-sm:8px;
  --radius:12px;
  --radius-card:22px;
  --radius-lg:28px;

  /* ---- Elevação: sombra curta e fria, só onde há de fato profundidade ---- */
  --shadow-card:0 1px 2px rgba(26,22,10,.05), 0 10px 26px -18px rgba(26,22,10,.35);
  --shadow-raised:0 2px 4px rgba(26,22,10,.06), 0 18px 40px -24px rgba(26,22,10,.45);
  --shadow-dialogo:0 30px 70px -20px rgba(0,0,0,.55);

  /* ---- Tipografia ---- */
  --display:var(--et-font-display);
  --body:var(--et-font-body);

  --fs-micro:12px; --fs-xs:13px; --fs-sm:14px; --fs-md:15px;
  --fs-base:16px;  --fs-lg:18px;

  --h1:clamp(32px,3.6vw,44px);
  --h2:clamp(24px,2.6vw,30px);
  --h3:21px;

  /* ---- Altura de controles: 44px é o alvo mínimo de toque ---- */
  --control-h:48px;
  --control-h-sm:40px;
  --control-h-lg:54px;

  /* ---- Foco: anel de dois tons, legível em fundo claro e escuro ---- */
  --focus-ink:#000000;
  --focus-halo:rgba(253,207,23,.75);

  /* ---- Movimento ----
     Uma curva de entrada (desacelera e para) e uma de saída (some rápido).
     Três durações bastam: resposta ao toque, mudança de estado e entrada de
     tela. Nada aqui passa de meio segundo nem se repete. */
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-saida:cubic-bezier(.4,0,1,1);
  --dur-rapida:180ms;
  --dur-media:280ms;
  --dur-entrada:420ms;
  --desloca:10px;

  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px); --safe-r:env(safe-area-inset-right,0px);
}

/* Blocos de fundo escuro invertem o anel de foco para continuar visível. Bloco
   escuro novo: ponha .et-escuro nele em vez de crescer estas listas. */
.home-header,.app-header,.admin-header,.detail-header,.account-header,
.auth-shell,.bottom-nav,
.home-footer,.app-footer,.aluno-hero,.mensalidade-card,.plano-situacao-card,
.et-plano--destaque,.et-toasts,.erro-cartao,.et-escuro {
  --focus-ink:var(--yellow);
  --focus-halo:rgba(253,207,23,.3);
}

/* Botões e caixas sobre fundo escuro (.et-botao e .et-caixa, em componentes.css):
   contorno, fantasma, secundário e link passam a texto claro, borda dourada discreta
   e realce dourado; a caixa marcada fica dourada com o sinal preto. */
.home-header,.app-header,.admin-header,.detail-header,.account-header,
.auth-shell,.home-footer,.app-footer,.aluno-hero,.erro-cartao,
.et-plano--destaque,.et-consentimento,.et-toasts,.et-escuro,
.mensalidade-card[data-status="pendente"],.mensalidade-card[data-status="atrasado"],
.mensalidade-card[data-status="recusado"] {
  --botao-tinta:var(--et-text-on-dark);
  --botao-tinta-forte:var(--et-gold);
  --botao-borda:var(--et-line-dark-strong);
  --botao-borda-forte:var(--et-gold);
  --botao-fundo:transparent;
  --botao-suave:rgba(245,185,20,.08);
  --botao-suave-forte:rgba(245,185,20,.16);
  --caixa-borda:var(--et-line-dark-strong);
  --caixa-fundo:transparent;
  --caixa-marcada:var(--et-gold);
  --caixa-ponto:var(--ink);
  --interruptor-trilho:var(--et-surface-dark-2);
  --interruptor-borda:var(--et-line-dark-strong);
  --interruptor-polegar-borda:transparent;
  --interruptor-polegar-fundo:var(--et-text-on-dark-muted);
  --interruptor-ligado:var(--et-gold);
  --interruptor-polegar-ligado:var(--et-black);
  --caixa-sinal:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------- base -- */

* { box-sizing:border-box; }
/* Bebas Neue só existe em peso 400. As folhas antigas pedem 700/800 nos títulos;
   sem isto o navegador sintetiza um negrito borrado por cima da fonte. */
html { min-width:320px; scroll-behavior:smooth; background:var(--paper); font-synthesis-weight:none; }
/* clip, não hidden: hidden faria o body virar contêiner de rolagem e quebraria todo
   position:sticky da página (a marca do cadastro, cabeçalhos fixos). */
html,body { max-width:100%; overflow-x:clip; }
body {
  margin:0; min-height:100vh; min-height:100dvh;
  color:var(--text); background:transparent;
  font-family:var(--body); font-size:var(--fs-base); line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

/* Formas abstratas do fundo: dourado, preto, laranja queimado e verde escuro
   em opacidade baixa. Uma camada fixa, sem DOM e sem custo de scroll. */
body::before {
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-color:var(--paper);
  background-image:
    radial-gradient(38vw 38vw at 96% -6%, rgba(214,162,16,.20), transparent 62%),
    radial-gradient(26vw 26vw at -8% 6%, rgba(28,74,56,.13), transparent 64%),
    radial-gradient(30vw 30vw at 8% 104%, rgba(185,84,31,.11), transparent 62%),
    radial-gradient(22vw 22vw at 88% 88%, rgba(0,0,0,.07), transparent 66%);
}

button,input,select,textarea { font:inherit; color:inherit; }
a { color:inherit; }
img { max-width:100%; }
h1,h2,h3,h4 { text-wrap:balance; }
p { text-wrap:pretty; }

/* Valores monetários, datas e contagens alinham em coluna. */
td,th,.tabular,.metric-value,.summary-grid strong,.stat-value { font-variant-numeric:tabular-nums; }

.skip-link {
  position:fixed; z-index:100; top:var(--sp-3); left:var(--sp-3);
  padding:var(--sp-3) var(--sp-5); border-radius:var(--radius);
  color:var(--ink); background:var(--yellow);
  font-size:var(--fs-sm); font-weight:700; text-decoration:none;
  box-shadow:var(--shadow-raised);
  transform:translateY(-200%); transition:transform .2s var(--ease);
}
.skip-link:focus-visible { transform:none; }

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

/* --------------------------------------------------------------- marca -- */

.site-brand {
  display:inline-flex; align-items:center; gap:var(--sp-3);
  color:inherit; text-decoration:none; text-transform:uppercase;
  font:400 14px/1 var(--display); letter-spacing:.1em;
}
.site-brand img { width:38px; height:38px; object-fit:contain; flex:0 0 auto; }
.site-brand strong { display:block; margin-top:3px; color:var(--yellow); font-size:20px; letter-spacing:.04em; }

/* ---------------------------------------------------- títulos e rótulos -- */

/* Rótulo de contexto acima do título. Curto e informativo, nunca decorativo. */
.eyebrow {
  display:flex; align-items:center; gap:var(--sp-2);
  margin:0 0 var(--sp-2);
  color:var(--text-2); font-size:var(--fs-micro); font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
}
.eyebrow::before { content:""; flex:0 0 auto; width:18px; height:3px; border-radius:2px; background:var(--yellow); }

.page-title {
  margin:0;
  font:400 var(--h1)/1.02 var(--display);
  letter-spacing:-.01em; text-transform:uppercase;
}

/* Selo numerado. Só para sequências reais (etapas de um cadastro). */
.round-badge {
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; flex:0 0 auto;
  border:2px solid var(--gold); border-radius:50%;
  color:var(--text); background:var(--surface);
  font:400 16px/1 var(--display);
}

/* ------------------------------------------------------------- campos -- */

/* A linha do interruptor também é um <label>, mas monta o próprio layout; o
   :where() mantém a especificidade de sempre. */
.field label:not(:where(.et-interruptor-linha)),.grupo-input label:not(:where(.et-interruptor-linha)) {
  display:block; margin-bottom:var(--sp-2);
  color:var(--text); font-size:var(--fs-sm); font-weight:600;
}
/* Rótulo de uma opção (caixa de seleção) não é rótulo de bloco. */
.field label.dia-opcao,.grupo-input label.dia-opcao { margin-bottom:0; }
/* "Opcional", "Obrigatória", "Mínimo 8 caracteres": nota curta na mesma linha
   do rótulo, alinhada à direita do campo. */
.field label:not(:where(.et-interruptor-linha)):has(small),.grupo-input label:not(:where(.et-interruptor-linha)):has(small) {
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-3);
}
.field label:not(:where(.et-interruptor-linha)) small,.grupo-input label:not(:where(.et-interruptor-linha)) small {
  flex:0 0 auto; color:var(--text-3);
  font-size:var(--fs-xs); font-weight:400;
}

/* O controle em si é o .et-campo / .et-caixa de componentes.css; aqui ficam o
   rótulo, a ajuda, o erro e o input de arquivo. */
input[type="file"] {
  padding:var(--sp-2); font-size:var(--fs-xs);
  border:1px solid var(--line-strong); border-radius:var(--radius); background:var(--surface);
}
input[type="file"]::file-selector-button {
  margin-right:var(--sp-3); padding:var(--sp-2) var(--sp-3);
  border:1px solid var(--line-strong); border-radius:var(--radius-sm);
  background:var(--surface-2); font:inherit; font-size:var(--fs-xs); font-weight:600; cursor:pointer;
}

/* Texto de apoio abaixo de um campo. */
.grupo-input small,.field-hint {
  display:block; margin-top:var(--sp-2);
  color:var(--text-2); font-size:var(--fs-xs); line-height:1.5;
}

/* Erro de um campo específico, dito ao lado dele e não no topo do formulário. */
.field-erro {
  margin:var(--sp-2) 0 0;
  color:var(--red-ink); font-size:var(--fs-xs); font-weight:600; line-height:1.5;
}
/* O atributo `hidden` do HTML vale menos que qualquer regra de classe com `display`.
   Sem esta linha a mensagem de erro aparecia já no carregamento da página. */
.field-erro[hidden] { display:none; }

/* Rótulo de caixa de seleção: o texto acompanha a caixa em vez de ficar acima dela. */
.opcao-inline {
  display:flex; align-items:flex-start; gap:var(--sp-3);
  margin-bottom:0; font-weight:500; line-height:1.5; cursor:pointer;
}
.opcao-inline .et-caixa { margin-top:2px; }

/* ------------------------------------------------------------- botões -- */
/* O botão é o .et-botao de componentes.css. Aqui só o que envolve botões. */

.form-inline,.form-remover { display:inline-flex; }
.form-inline button,.form-remover button { font-family:inherit; }

/* Linha de ações no rodapé de um formulário. */
.form-actions {
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-3);
  margin-top:var(--sp-2);
}

/* Ícone dentro de botão, selo ou item de navegação. */
.icone {
  flex:0 0 auto; width:18px; height:18px;
  fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
}

/* Marcador quadrado com ícone: usado em métricas e cabeçalhos de bloco. */
.icon-tile {
  display:grid; place-items:center; flex:0 0 auto;
  width:44px; height:44px; border-radius:var(--radius);
  color:var(--ink); background:var(--yellow-soft);
}
.icon-tile svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }

/* -------------------------------------------------- avisos e mensagens -- */

/* Avisos em linha: .et-aviso de componentes.css. */

/* Etiqueta de situação: é o .et-selo de componentes.css (sempre cor mais texto,
   nunca só cor). */

/* Estado vazio: diz o que falta e, quando cabe, como resolver. */
.empty-state {
  padding:var(--sp-8) var(--sp-5);
  color:var(--text-2); font-size:var(--fs-sm); text-align:center;
}

/* -------------------------------------------------------------- avatar -- */

.student-avatar {
  display:inline-grid; place-items:center; flex:0 0 auto;
  width:38px; height:38px; margin-right:var(--sp-3);
  overflow:hidden; border-radius:var(--radius-pill);
  color:var(--yellow); background:var(--ink);
  font:400 16px/1 var(--display); text-transform:uppercase;
}
.avatar-img { display:block; width:100%; height:100%; object-fit:cover; border-radius:inherit; }

/* ------------------------------------------------------------ tabelas -- */

/* A tabela é o .et-tabela de componentes.css (cabeçalho, linhas, rolagem, busca e
   ordenação); aqui só o comportamento de qualquer <table>. */
table { width:100%; border-collapse:collapse; }
caption { padding:var(--sp-3) var(--sp-5); color:var(--text-2); font-size:var(--fs-xs); text-align:left; }
td strong { font-weight:600; }

/* Célula com uma pessoa: avatar e nome na mesma linha de base. */
td .student-avatar { vertical-align:middle; }

/* Célula que reúne várias ações. */
.acao-cell { white-space:nowrap; }
.acao-cell > * + * { margin-left:var(--sp-2); }

/* ------------------------------------------------------- foco e motion -- */

:focus-visible {
  outline:2px solid var(--focus-ink); outline-offset:2px;
  box-shadow:0 0 0 5px var(--focus-halo);
  border-radius:var(--radius-sm);
}
/* O navegador já desenha o anel; não precisa também do realce de hover. */
:focus:not(:focus-visible) { outline:none; }

/* --------------------------------------------------------- movimento --- */
/* Regra da casa: cada tela tem UMA entrada, no bloco que abre a página. O
   resto só se mexe quando a pessoa age. Sem laço, sem brilho, sem flutuação. */

@keyframes entra { from { opacity:0; transform:translateY(var(--desloca)); } to { opacity:1; transform:none; } }

/* Aplique .entra no bloco de abertura. Filhos com --ordem entram em cascata
   curta; a ordem existe para guiar a leitura, não para virar espetáculo. */
.entra { animation:entra var(--dur-entrada) var(--ease) both; }
.entra-1,.entra-2,.entra-3,.entra-4,.entra-5 {
  animation:entra var(--dur-entrada) var(--ease) both;
}
.entra-1 { animation-delay:40ms; }
.entra-2 { animation-delay:100ms; }
.entra-3 { animation-delay:160ms; }
.entra-4 { animation-delay:220ms; }
.entra-5 { animation-delay:280ms; }



/* ------------------------------------------------- deslize entre telas -- */
/* Trocar de seção é a outra exceção à regra da entrada única: o conteúdo desliza
   do lado para onde a pessoa foi (components/deslize.html decide e marca data-deslize no
   <html>). Cabeçalho e menu ficam parados; só a pílula da seção ativa corre
   até o item novo. Sem data-deslize (login, página pública) fica o esmaecer
   padrão do navegador. */

/* A adesão (@view-transition) fica inline em components/deslize.html: numa folha
   externa o Chrome às vezes consulta a regra antes de aplicá-la e descarta a
   transição. */

main#conteudo { view-transition-name:conteudo; }
.admin-header,.app-header,.detail-header { view-transition-name:cabecalho; }
.bottom-nav { view-transition-name:menu-inferior; }
.admin-nav-scroll a[aria-current="page"],.bottom-nav a.is-active { view-transition-name:secao-ativa; }
/* No celular a pílula que conta é a da barra de baixo; duas com o mesmo nome
   cancelariam a transição. */
@media (min-width:721px) { .app-header nav a.is-active { view-transition-name:secao-ativa; } }

/* A pílula corre como bloco amarelo liso; o rótulo novo só aparece perto da
   chegada e no tamanho natural. Esticar o retrato do item entre larguras
   diferentes espreme o texto, e cruzar os dois rótulos deixa texto fantasma. */
::view-transition-group(secao-ativa) {
  animation-duration:var(--dur-media); animation-timing-function:var(--ease);
  border-radius:var(--radius); background:var(--yellow);
}
@media (min-width:721px) {
  html:has(.app-header nav a.is-active)::view-transition-group(secao-ativa) { border-radius:var(--radius-pill); }
}
::view-transition-old(secao-ativa) { display:none; }
::view-transition-new(secao-ativa) {
  inline-size:auto; left:50%; translate:-50% 0;
  animation:rotulo-chega var(--dur-media) var(--ease) both;
}
@keyframes rotulo-chega { 0%,45% { opacity:0; } }

html[data-deslize="avanca"] { --lado:1; }
html[data-deslize="volta"] { --lado:-1; }
@keyframes desliza-entra { from { opacity:0; translate:calc(var(--lado) * 56px) 0; } }
@keyframes desliza-sai { 70%,to { opacity:0; } to { translate:calc(var(--lado) * -56px) 0; } }

/* A caixa não viaja de uma posição de rolagem para a outra: só o deslize lateral. */
html[data-deslize]::view-transition-group(conteudo) { animation:none; }
html[data-deslize]::view-transition-old(conteudo) {
  animation:desliza-sai var(--dur-rapida) var(--ease-saida) both;
}
html[data-deslize]::view-transition-new(conteudo) {
  animation:desliza-entra var(--dur-media) var(--ease) 40ms both;
}

@media (prefers-reduced-motion:reduce) {
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*) { animation:none !important; }
}

/* Linha de tabela muda de cor sem salto (o selo tem a própria transição). */
tbody tr td { transition:background var(--dur-rapida) ease; }

/* ------------------------------------------------ botão em operação ---- */
/* Usado enquanto o servidor conversa com o Mercado Pago: o botão trava, avisa
   por texto e mostra um giro discreto. O texto nunca some sozinho. */

@keyframes girando { to { transform:rotate(1turn); } }

[data-ocupado="true"],
.form-outras-formas[aria-busy="true"] [data-checkout-abrir] { cursor:progress; }
[data-ocupado="true"]::after,
.form-outras-formas[aria-busy="true"] [data-checkout-abrir]::after {
  content:""; flex:0 0 auto; width:15px; height:15px; margin-left:var(--sp-1);
  border:2px solid currentColor; border-top-color:transparent; border-radius:50%;
  opacity:.85; animation:girando 700ms linear infinite;
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
  .entra,.entra-1,.entra-2,.entra-3,.entra-4,.entra-5,.et-aviso {
    animation:none !important; opacity:1; transform:none;
  }
  .et-botao:active { transform:none; }
  /* O giro vira um traço parado: continua dizendo "em andamento" sem se mexer. */
  [data-ocupado="true"]::after,
  .form-outras-formas[aria-busy="true"] [data-checkout-abrir]::after {
    animation:none !important; border-top-color:currentColor; opacity:.5;
  }
}

/* --------------------------------------------- tabelas viram lista (mobile) -- */
/* Ativado com a classe .table-stack no wrapper da tabela. Cada linha vira um
   cartão com rótulo e valor, sem rolagem horizontal. Cartão compacto: a célula
   .celula-titulo (quem ou o quê da linha) vira a cabeça do cartão, sem rótulo, e o
   menu ⋮ da .celula-menu fica no canto dela. */

@media (max-width:640px) {
  /* Cada linha já traz a própria moldura: a do componente sai, e a lista cresce
     com a página em vez de rolar dentro de uma caixa de 440px. */
  .et-tabela:has(> .table-stack) { overflow:visible; border:0; border-radius:0; background:transparent; }
  .et-tabela-rolagem.table-stack { max-height:none; overflow:visible; }
  .et-tabela-rolagem.table-stack > table { min-width:0; }
  .table-stack { border:0; border-radius:0; background:transparent; }
  .table-stack table,.table-stack thead,.table-stack tbody,
  .table-stack th,.table-stack td,.table-stack tr { display:block; }
  .table-stack table { background:transparent; }
  .table-stack tr[hidden] { display:none; }
  .table-stack thead {
    position:absolute; width:1px; height:1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }
  .table-stack tbody tr {
    margin-bottom:var(--sp-3); padding:var(--sp-5);
    border:1px solid var(--line); border-radius:var(--radius-card);
    background:var(--surface); box-shadow:var(--shadow-card);
  }
  .table-stack tbody tr:last-child { margin-bottom:0; }
  .table-stack tbody tr:hover td { background:transparent; }
  .table-stack td {
    display:flex; align-items:center; justify-content:space-between;
    gap:var(--sp-4); padding:var(--sp-2) 0; border:0; text-align:right;
  }
  .table-stack td + td { border-top:1px solid var(--line); }
  .table-stack td[data-label]::before {
    content:attr(data-label); flex:0 0 auto; margin-right:auto;
    color:var(--text-2); font-size:var(--fs-micro); font-weight:700;
    letter-spacing:.06em; text-transform:uppercase; text-align:left;
  }
  .table-stack td.sem-rotulo::before,.table-stack td:empty::before { content:none; }
  /* Célula de ações com vários botões não cabe numa linha; empilha. */
  .table-stack td.acao-cell {
    flex-direction:column; align-items:stretch; gap:var(--sp-2);
    margin-top:var(--sp-3); padding-top:var(--sp-4); text-align:left;
  }
  .table-stack td.acao-cell::before { margin-bottom:var(--sp-1); }
  .table-stack td.acao-cell > * + * { margin-left:0; }

  .table-stack tbody tr:has(> td.celula-titulo):not([hidden]) {
    display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:var(--sp-3);
    padding:var(--sp-4) var(--sp-5) var(--sp-3);
  }
  .table-stack tbody tr:has(> td.celula-titulo) > td { grid-column:1 / -1; border-top:1px solid var(--line); }
  .table-stack tbody tr:has(> td.celula-titulo) > td.celula-titulo {
    grid-column:1; grid-row:1; justify-content:flex-start; min-height:44px;
    padding:0 0 var(--sp-3); border-top:0; text-align:left; font-size:var(--fs-md); font-weight:600;
  }
  /* Só nome e menu (lista de matriculados): sem o respiro para a linha de baixo. */
  .table-stack tbody tr:has(> td.celula-titulo):not(:has(> td:nth-child(3))) { padding-block:var(--sp-3); }
  .table-stack tbody tr:has(> td.celula-titulo):not(:has(> td:nth-child(3))) > td.celula-titulo { padding-bottom:0; }
  .table-stack tbody tr:has(> td.celula-titulo) > td.celula-menu {
    grid-column:2; grid-row:1; align-self:start; padding:0; border-top:0;
  }
  .table-stack td.celula-titulo::before,.table-stack td.celula-menu::before { content:none; }
  .table-stack td.celula-menu:not(:has(.et-menu)) { display:none; }
  /* Linha vazia continua sendo um aviso, não um cartão. */
  .table-stack tbody tr:has(> td.empty-state) { padding:0; border-style:dashed; box-shadow:none; background:transparent; }
  .table-stack td.empty-state { display:block; text-align:center; }
  .table-stack td.empty-state::before { content:none; }
}

/* ------------------------------------------- navegação inferior (mobile) -- */

.bottom-nav { display:none; }

@media (max-width:720px) {
  .bottom-nav {
    position:fixed; z-index:40; left:var(--sp-3); right:var(--sp-3);
    bottom:calc(var(--sp-3) + var(--safe-b));
    display:flex; justify-content:space-around;
    padding:var(--sp-2) var(--sp-1);
    border:1px solid var(--ink-3); border-radius:var(--radius-lg);
    background:rgba(10,10,10,.94);
    backdrop-filter:blur(10px);
    box-shadow:0 18px 40px -18px rgba(0,0,0,.85);
  }
  .bottom-nav a {
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    flex:1; min-height:52px; padding:var(--sp-1); border-radius:var(--radius);
    color:var(--text-on-ink-2); font-size:11px; font-weight:600;
    letter-spacing:.02em; text-decoration:none; text-align:center;
    transition:color .16s ease, background .16s ease;
  }
  .bottom-nav a svg {
    width:22px; height:22px; fill:none; stroke:currentColor;
    stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
  }
  .bottom-nav a.is-active { color:var(--ink); background:var(--yellow); }
  .bottom-nav a { transition:color var(--dur-rapida) ease, background var(--dur-rapida) ease; }
  /* A barra flutua a 12px do fim e mede 68px: a folga abaixo do conteúdo cobre
     as duas medidas mais um respiro, para nenhum botão parar embaixo dela. */
  body.has-bottom-nav { padding-bottom:calc(104px + var(--safe-b)); }
  html:has(body.has-bottom-nav) { scroll-padding-bottom:calc(104px + var(--safe-b)); }
}

/* ------------------------------------------------------------ impressão -- */

@media print {
  .no-print,.bottom-nav,.skip-link { display:none !important; }
  body { background:#fff; }
  body::before { display:none; }
  .entra,.entra-1,.entra-2,.entra-3,.entra-4,.entra-5 {
    animation:none !important; opacity:1; transform:none;
  }
}

/* ------------------------------------------------ células de tabela -- */

/* Valores, datas e competências ocupam uma linha só: quebrar "R$ 1.080,00"
   ao meio atrapalha a leitura da coluna. */
.celula-numero,.celula-valor { white-space:nowrap; }
.celula-valor { font-weight:600; }

/* Avatar e nome lado a lado. O flex fica no <span> interno, não no <td>: um td
   flex sai do cálculo de altura da linha e desalinha as bordas das colunas. */
.pessoa { display:flex; align-items:center; gap:var(--sp-3); min-width:0; }
.pessoa > strong { font-weight:600; }
@media (min-width:641px) {
  /* Largura mínima para o nome completo não cair em três linhas. */
  td.celula-pessoa,th.coluna-pessoa { min-width:210px; }
}

/* Tabela larga: cada coluna precisa de espaço para não quebrar palavra a palavra.
   Abaixo dessa largura o próprio wrapper rola na horizontal; no celular a tabela
   já vira lista (.table-stack). */
@media (min-width:641px) {
  .tabela-pagamentos > table { min-width:980px; }
}

/* No celular a célula de ações vira uma pilha: o formulário em volta do botão
   não pode encolher o alvo de toque. */
@media (max-width:640px) {
  .table-stack td.acao-cell form,
  .table-stack td.acao-cell .form-inline,
  .table-stack td.acao-cell .form-remover { display:block; width:100%; }
  .table-stack td.acao-cell form button,
  .table-stack td.acao-cell .et-botao { width:100%; }
}

/* ------------------------------------------- alvos de toque no celular -- */
/* No toque, 44px é o mínimo confortável. Vale para navegação, botões
   compactos e as ações em texto que ficam sozinhas numa pilha. */

/* Celular e tablet são telas de toque: 44px é o mínimo confortável. Vale para
   navegação, botões compactos e as ações em texto que ficam sozinhas. */
@media (max-width:1023px) {
  .site-brand { min-width:44px; min-height:44px; }
}
@media (max-width:720px) {
  .bottom-nav a { min-height:54px; }
}

/* Paginação de tabela ------------------------------------------------------
   Os controles são .et-botao pequenos de contorno; aqui só o arranjo. O estado
   sem destino leva aria-disabled e fica apagado como um botão desabilitado, para
   "não há página anterior" parecer o que é, não um link que não responde. */
.paginacao {
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:var(--sp-3); margin-top:var(--sp-5);
  padding-top:var(--sp-4); border-top:1px solid var(--line);
}
.paginacao-intervalo { margin:0; color:var(--text-2); font-size:var(--fs-xs); }
.paginacao-intervalo strong { color:var(--text); font-weight:600; }
.paginacao-controles { display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-3); }
.paginacao-posicao { color:var(--text-2); font-size:var(--fs-xs); font-variant-numeric:tabular-nums; }

@media (max-width:560px) {
  .paginacao { justify-content:center; text-align:center; }
  /* Numa coluna só: "Página 2 de 3" fica acima dos botões em vez de espremida
     entre eles, e cada botão ganha a linha inteira como alvo de toque. */
  .paginacao-controles { flex-direction:column; width:100%; align-items:stretch; }
  .paginacao-controles .et-botao { width:100%; }
  /* Só o indicador sobe; "anterior" e "próxima" mantêm a ordem de leitura. */
  .paginacao-posicao { order:-1; }
}