/* =========================================================================
   Extreme Team - camada de identidade.
   Carregar SEMPRE por último, depois de theme.css e da folha da tela.

   Regra da marca: preto é a base, o amarelo marca ação e item ativo.
   Fora disso ele não aparece. A arte do dragão nunca é redesenhada nem
   recortada: entra sempre como imagem inteira sobre fundo preto.
   ========================================================================= */

/* --------------------------------------------------- barra superior ----- */
/* Um cabeçalho escuro, arredondado, flutuando sobre o papel. */

.app-header,.detail-header,.account-header {
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-5);
  margin:var(--sp-4) clamp(var(--sp-4),3vw,var(--sp-7)) 0;
  padding:var(--sp-3) var(--sp-5);
  border:1px solid var(--ink-3); border-radius:var(--radius-lg);
  color:var(--text-on-ink); background:var(--ink);
  box-shadow:var(--shadow-card);
}

.app-header nav,.app-header > div,.admin-header > div {
  display:flex; align-items:center; gap:var(--sp-4); min-width:0;
}

.app-header nav a,.admin-header a,.detail-header a:not(.et-botao),.account-header a:not(.et-botao) {
  color:var(--text-on-ink-2);
  font-size:var(--fs-sm); font-weight:500; text-decoration:none;
  transition:color .16s ease;
}
.app-header nav a:hover,.admin-header a:hover,.detail-header a:not(.et-botao):hover,
.account-header a:not(.et-botao):hover { color:var(--yellow); }

/* Item ativo: pastilha amarela. A cor sozinha nunca basta, então o item
   ativo também carrega aria-current. */
.app-header nav a.is-active,.app-header nav a[aria-current="page"] {
  color:var(--ink); background:var(--yellow); font-weight:700;
  padding:var(--sp-2) var(--sp-4); border-radius:var(--radius-pill);
}

/* Sair, voltar e entrar nos cabeçalhos são .et-botao pequenos em pílula. */
.logout-form { margin:0; }

/* Cargo de quem está logado, ao lado do botão de sair. */
.admin-header > div > span,.app-header > div > span {
  color:var(--text-on-ink-2); font-size:var(--fs-xs); font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
}

/* ------------------------------------- administração: barra lateral ----- */
/* No desktop a navegação vira uma coluna escura fixa ao lado do conteúdo.
   No celular volta a ser uma barra no topo com as seções roláveis. */

body.admin-shell {
  display:grid; grid-template-columns:236px minmax(0,1fr);
  gap:var(--sp-6); align-items:start;
  padding:var(--sp-6) var(--sp-6) var(--sp-6) var(--sp-6);
  min-height:100dvh;
}

.admin-header {
  display:flex; flex-direction:column; gap:var(--sp-7);
  position:sticky; top:var(--sp-6);
  min-height:calc(100dvh - var(--sp-9));
  padding:var(--sp-6) var(--sp-5);
  border:1px solid var(--ink-3); border-radius:var(--radius-lg);
  color:var(--text-on-ink); background:var(--ink);
  box-shadow:var(--shadow-raised);
  overflow:hidden;
}
/* Selo dourado discreto no rodapé da coluna, atrás do botão de sair. */
.admin-header::after {
  content:""; position:absolute; z-index:0; right:-70px; bottom:-70px;
  width:200px; height:200px; border-radius:50%;
  background:radial-gradient(circle,rgba(214,162,16,.30),transparent 68%);
  pointer-events:none;
}
.admin-header > *,.admin-header nav { position:relative; z-index:1; }

.admin-header .site-brand {
  flex-direction:column; align-items:flex-start; gap:var(--sp-3);
  padding-bottom:var(--sp-6); border-bottom:1px solid var(--ink-3);
  width:100%;
}
.admin-header .site-brand img { width:56px; height:56px; }

.admin-header nav.admin-nav { display:flex; flex-direction:column; flex:1; min-width:0; }
.admin-nav-scroll {
  display:flex; flex-direction:column; align-items:stretch; gap:var(--sp-1);
}
.admin-nav-scroll::-webkit-scrollbar { display:none; }

.admin-nav-scroll a.link-turmas {
  display:flex; align-items:center; gap:var(--sp-3);
  min-height:48px; padding:0 var(--sp-4);
  border-radius:var(--radius); border:1px solid transparent;
  color:var(--text-on-ink-2); font-size:var(--fs-sm); font-weight:600;
  text-decoration:none;
  transition:color .16s ease, background .16s ease;
}
.admin-nav-scroll a.link-turmas:hover { color:var(--text-on-ink); background:var(--ink-2); }
.admin-nav-scroll a.link-turmas .icone { width:20px; height:20px; }
.admin-nav-scroll a.is-active,
.admin-nav-scroll a[aria-current="page"] {
  color:var(--ink); background:var(--yellow); font-weight:700;
}
.admin-nav-scroll a.is-active:hover { color:var(--ink); background:var(--yellow); }

.admin-header .logout-form { width:100%; }
.admin-header .logout-form .et-botao { --botao-raio:var(--et-radius-btn); width:100%; justify-content:flex-start; min-height:48px; }

@media (max-width:1023px) {
  body.admin-shell { grid-template-columns:minmax(0,1fr); gap:0; padding:0; }
  .admin-header {
    position:sticky; top:0; z-index:30;
    flex-direction:row; flex-wrap:wrap; align-items:center; gap:var(--sp-3) var(--sp-5);
    min-height:0; margin:0; padding:var(--sp-3) clamp(var(--sp-4),4vw,var(--sp-7));
    border-width:0 0 1px; border-radius:0;
  }
  .admin-header::after { display:none; }
  .admin-header .site-brand {
    flex-direction:row; align-items:center; width:auto;
    padding-bottom:0; border-bottom:0;
  }
  .admin-header .site-brand img { width:38px; height:38px; }
  /* Marca e "Sair" na primeira linha; a fila de seções ocupa a segunda inteira. */
  .admin-header nav.admin-nav { order:3; flex-basis:100%; flex-direction:row; }
  .admin-header .logout-form { order:2; margin-left:auto; }
  .admin-nav-scroll {
    flex:1; min-width:0; flex-direction:row; gap:var(--sp-2);
    overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  .admin-nav-scroll a.link-turmas { min-height:44px; padding-inline:var(--sp-4); white-space:nowrap; }
  .admin-header .logout-form { width:auto; }
  .admin-header .logout-form .et-botao { --botao-raio:var(--et-radius-pill); width:auto; min-height:44px; }
}
/* Entre o celular e o desktop há espaço para as seções em duas linhas —
   melhor do que cortar a última no fim do rolamento. */
@media (max-width:1023px) and (min-width:601px) {
  .admin-nav-scroll { flex-wrap:wrap; overflow:visible; }
}
/* No celular a fila rola na horizontal com os rótulos visíveis: esconder o
   texto deixaria cinco destinos identificados só por ícone — e sem nome
   também para quem usa leitor de tela.

   O degradê aparece só do lado que ainda tem seção escondida: admin_nav.js
   escreve data-rolagem="inicio|meio|fim|nenhuma" conforme a posição. Sem JS o
   atributo não existe e a fila continua rolável, apenas sem o aviso. */
@media (max-width:600px) {
  .admin-nav-scroll {
    position:relative;
    scroll-snap-type:x proximity;
    scroll-padding-inline:var(--sp-4);
    scroll-behavior:smooth;
  }
  .admin-nav-scroll a.link-turmas {
    padding-inline:var(--sp-3); font-size:var(--fs-xs);
    scroll-snap-align:start; scroll-margin-inline:var(--sp-4);
  }
  .admin-nav-scroll a.link-turmas .icone { width:18px; height:18px; }
  .admin-header .logout-form .et-botao { padding-inline:var(--sp-3); }

  .admin-nav-scroll[data-rolagem="inicio"] {
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);
  }
  .admin-nav-scroll[data-rolagem="fim"] {
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 28px);
    mask-image:linear-gradient(90deg,transparent,#000 28px);
  }
  .admin-nav-scroll[data-rolagem="meio"] {
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent);
    mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent);
  }
  /* Um item recém-focado pelo teclado não pode ficar debaixo do degradê. */
  .admin-nav-scroll a.link-turmas:focus-visible { -webkit-mask-image:none; mask-image:none; }
}
@media (max-width:600px) and (prefers-reduced-motion:reduce) {
  .admin-nav-scroll { scroll-behavior:auto; }
}

/* A landing (cabeçalho, hero, rodapé, modal de login) é estilizada só em index.css.
   Aqui ficavam um cabeçalho flutuante `position:absolute`, um .hero-visual e um
   .extreme-lockup que venciam o index.css por carregarem depois. */

.section-copy { border-left-color:var(--yellow); }

/* ------------------------------------- login, cadastro e recuperação ---- */

/* O visual de login, cadastro e recuperação vive só em auth.css (classes .auth-*).
   Aqui ficava um bloco para .brand-panel, .form-panel, .signup e .label-row que
   pintava links de escuro sobre o cartão escuro e vencia o auth.css por ordem de
   carregamento. Só sobrou o que o modal de login da landing ainda usa. */

.modal-signup a {
  color:var(--et-gold); text-decoration:underline;
  text-decoration-color:var(--gold); text-decoration-thickness:2px; text-underline-offset:3px;
}
.modal-signup a:hover { color:var(--et-text-on-dark); text-decoration-color:var(--et-text-on-dark); }

/* -------------------------------------------- áreas internas do sistema -- */

.profile-page,.container-admin,.container-detalhes { max-width:1240px; }

/* Cabeçalho de página das telas internas. */
.admin-intro,.detail-intro { padding-bottom:var(--sp-6); border-bottom:1px solid var(--line-strong); }

/* Marca do aluno (inicial) nas telas de detalhe; o avatar novo (.et-avatar) tem estilo próprio. */
.detail-intro > span:not(.et-avatar) {
  border-radius:var(--radius-pill); color:var(--ink); background:var(--yellow);
  transform:none;
}

/* Faixa de formulário dentro de um painel. */
.form-plano,.form-turma,.form-pagamento,.form-filtros-financeiro {
  border:1px solid var(--line); border-radius:var(--radius-card); background:var(--surface-2);
}

/* Fichas de plano do admin: a borda muda no hover, sem levantar a ficha. */
.plan-list article {
  border-color:var(--line); background:var(--surface);
  transition:border-color .16s ease, box-shadow .16s ease;
}
.plan-list article:hover { border-color:var(--text); transform:none; }

.student-avatar { color:var(--yellow); background:var(--ink); }
/* Sobre o cabeçalho preto o avatar precisa de contorno para não sumir. */
.app-header .student-avatar { border:1px solid var(--ink-4); background:var(--ink-2); }

/* Estado vazio: marca discreta da academia acima do texto. */
.empty-state { position:relative; padding-top:var(--sp-11); }
.empty-state::before {
  content:""; position:absolute; top:var(--sp-7); left:50%;
  width:34px; height:34px; margin-left:-17px;
  background:url('/static/imagens/logo-icon.png') center/contain no-repeat;
  opacity:.35;
}
td.empty-state::before,tr .empty-state::before,.table-stack .empty-state::before { display:none; }
td.empty-state,tr .empty-state { padding-top:var(--sp-8); }

/* --------------------------------------------------------- responsivo --- */

@media (max-width:1023px) {
  .app-header .student-avatar { width:44px; height:44px; font-size:19px; }
  .app-header nav a { display:inline-flex; align-items:center; min-height:44px; }
}
@media (max-width:720px) {
  .app-header nav a:not(#link-sair):not(.nav-avatar-link) { display:none; }
  .app-header,.detail-header,.account-header {
    margin:var(--sp-3) var(--sp-3) 0; padding:var(--sp-3) var(--sp-4);
    border-radius:var(--radius-card);
  }
}
@media (max-width:620px) {
  /* Some da vista, mas continua sendo o nome do link para o leitor de tela: a
     logo ao lado tem alt="" e, com display:none, o link ficaria sem nome. */
  .app-header .site-brand span,
  .detail-header .site-brand span,
  .account-header .site-brand span {
    position:absolute; width:1px; height:1px; overflow:hidden;
    clip:rect(0,0,0,0); white-space:nowrap;
  }
  .detail-intro > span:not(.et-avatar) { width:58px; height:58px; }
}