/* =========================================================
   Componente: Tabs e Stepper
   ========================================================= */

/* ---------- Tabs ---------- */
/* A tira de abas ROLA quando nao cabe, em vez de esticar o documento.
   Sem isto ela era um `display: flex` sem `overflow`, e item de flex nao encolhe
   abaixo do proprio conteudo (`min-width: auto`): no Portal do Aluno as abas
   somavam 526px numa tela de 390 e empurravam o LAYOUT VIEWPORT para 526.
   O estrago aparecia longe da causa — a barra de abas do rodape e `fixed` com
   `left/right: 0`, logo acompanha o layout viewport, e o botao "Mais" ia para
   x=460 numa tela de 390: **fora da tela**. No celular, onde a sidebar nao
   existe, isso deixava o aluno sem menu e sem como sair do sistema.
   Defeito pre-existente (a tira e de outro bloco), achado pela verificacao do
   bloco G. A convencao do sistema ja era esta desde o bloco B: conteudo largo
   rola dentro do proprio container, nunca alarga a pagina. */
/* CONTROLE SEGMENTADO (leva "layout premium", o "Week | Month" da
   referencia): trilha em pilula no fundo abafado, a opcao ligada vira uma
   pilula de SUPERFICIE com sombra suave e texto na primaria. Substitui a aba
   sublinhada. `width: fit-content` com `max-width: 100%` para a trilha
   abracar as opcoes e, quando elas nao cabem, continuar rolando por dentro. */
.tabs-cf {
  display: flex;
  gap: 2px;
  width: fit-content;
  max-width: 100%;
  padding: 4px;
  background: var(--bg-muted);
  border-radius: var(--radius-full);
  overflow-x: auto;
  /* A barra de rolagem em si nao aparece: no toque o gesto basta, e no desktop
     a tira quase nunca estoura. */
  scrollbar-width: none;
}
.tabs-cf::-webkit-scrollbar { display: none; }
.tabs-cf__tab {
  position: relative;
  flex: none;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  padding: 0.5rem 1.1rem;
  border-radius: var(--radius-full);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.tabs-cf__tab:hover { color: var(--text-primary); }
.tabs-cf__tab.active {
  color: var(--color-primary);
  font-weight: var(--fw-semibold);
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
}
/* No escuro a superficie (#171C19) sobre a trilha (#1B211D) quase nao se
   distingue e a sombra nao le: a opcao ligada ganha a tinta da primaria. */
:root[data-theme='dark'] .tabs-cf__tab.active { background: var(--color-primary-soft); box-shadow: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .tabs-cf__tab.active { background: var(--color-primary-soft); box-shadow: none; }
}
@media (hover: none) and (pointer: coarse), (max-width: 991.98px) {
  /* 44px, o piso do projeto (bloco H). A varredura da leva pegou os 40 que
     estavam aqui. */
  .tabs-cf__tab { min-height: 44px; }
}
.tabs-cf__panel { padding-top: var(--space-4); }
.tabs-cf__panel[hidden] { display: none; }

/* ---------- Stepper ---------- */
.stepper-cf { display: flex; align-items: center; }
.stepper-cf__step { display: flex; align-items: center; gap: var(--space-2); }
.stepper-cf__dot {
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: var(--text-sm); font-weight: var(--fw-semibold);
  background: var(--bg-muted); color: var(--text-muted);
  border: 2px solid var(--border-color);
  transition: all var(--dur-base) var(--ease-out);
}
.stepper-cf__label { font-size: var(--text-sm); color: var(--text-muted); font-weight: var(--fw-medium); }
.stepper-cf__line { width: 40px; height: 2px; background: var(--border-color); margin: 0 var(--space-2); }

.stepper-cf__step.active .stepper-cf__dot { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }
.stepper-cf__step.active .stepper-cf__label { color: var(--text-primary); }
.stepper-cf__step.done .stepper-cf__dot { background: var(--presente); border-color: var(--presente); color: #fff; }
.stepper-cf__step.done ~ .stepper-cf__line,
.stepper-cf__line.done { background: var(--presente); }

/* =========================================================
   Bottom nav (bloco G) — a navegacao do celular.

   Existe SO em <= 991px, o mesmo ponto de corte em que a sidebar passa a ficar
   escondida (components.css). Um unico ponto de corte para os dois evita a
   faixa de larguras em que nao haveria navegacao nenhuma na tela.

   O ponto de corte e por LARGURA, e nao por `(pointer: coarse)` como no bloco
   C: aqui o que decide e o espaco horizontal para a sidebar de 264px, nao o
   tipo de toque. Um desktop de janela estreita tambem ganha as abas, e esta
   correto — e a mesma tela que ja perdia a sidebar.
   ========================================================= */
.bottom-nav { display: none; }

@media (max-width: 991px) {
  .bottom-nav {
    display: grid;
    grid-auto-flow: column;
    /* `minmax(0, 1fr)` e NAO `1fr`: `1fr` significa `minmax(auto, 1fr)`, e esse
       minimo `auto` impede a coluna de encolher abaixo do conteudo. Medido: um
       rotulo de 208px numa coluna de 78px fazia a COLUNA crescer para 208 —
       `overflow: hidden` e `text-overflow: ellipsis` no rotulo nunca entravam
       em acao, porque a caixa nunca ficava menor que o texto. Os rotulos das 5
       linguas hoje sao curtos, entao nada estourava; uma traducao mais longa
       (ou uma aba nova) empurraria a barra inteira em silencio.
       Com o minimo em 0 a coluna pode encolher, e ai o rotulo reticencia. */
    grid-auto-columns: minmax(0, 1fr);
    position: fixed;
    left: 0; right: 0; bottom: 0;
    /* Acima do conteudo e do header grudado (1020), abaixo do overlay/sheet
       (1400/1401) — o menu do "Mais" tem de cobrir a barra que o abriu. */
    z-index: 1030;
    background: var(--bg-surface);
    border-top: 1px solid var(--border-color);
    /* Altura EXPLICITA (com o `border-box` global), e nao herdada da altura das
       abas: assim `--bottom-nav-height` vale a faixa inteira, borda inclusa, e
       quem reserva espaco com `calc(--bottom-nav-height + --safe-bottom)`
       acerta o pixel. Deixando a altura crescer a partir das abas, a faixa
       media 1px MAIS que o token (a borda de cima) e o rodape da pagina ficava
       1px atras dela — medido no Chrome, 58 contra 59.
       A area segura entra como padding para que o fundo pinte por tras do
       indicador de gestos em vez de deixar uma tira transparente. */
    height: calc(var(--bottom-nav-height) + var(--safe-bottom));
    padding-bottom: var(--safe-bottom);
    padding-left: var(--safe-left);
    padding-right: var(--safe-right);
    box-shadow: 0 -1px 3px rgba(15, 23, 42, 0.05);
  }

  .bottom-nav__tab {
    /* Preenche a faixa (que ja desconta borda e area segura), em vez de
       redeclarar a altura e voltar a divergir dela. */
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    /* Sem borda/fundo proprios: o <button> do "Mais" tem de ficar identico aos
       <a> das abas, e o navegador da ao button um estilo de fabrica. */
    background: none;
    border: 0;
    padding: 0 2px;
    text-decoration: none;
    color: var(--text-secondary);
    transition: color var(--transition-fast);
    -webkit-tap-highlight-color: transparent;
  }

  /* O icone mora numa caixa em PILULA: transparente em repouso e tingida na aba
     ativa (leva "layout premium", como na referencia de app). A caixa tem
     tamanho fixo para a pilula nao "pular" quando a aba acende. */
  .bottom-nav__icon {
    display: grid;
    place-items: center;
    width: 56px;
    max-width: 100%;
    height: 30px;
    border-radius: var(--radius-full);
    font-size: 1.1rem;
    line-height: 1;
    transition: background var(--transition-fast), color var(--transition-fast);
  }

  .bottom-nav__label {
    font-size: 0.65rem;
    line-height: 1.1;
    max-width: 100%;
    /* Rotulo longo em outro idioma nao pode empurrar a largura da coluna nem
       quebrar em duas linhas: o grid e de colunas iguais, e uma segunda linha
       desalinharia essa aba de todas as outras. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* `--color-primary`, e nao `--pitch-600` cru: e exatamente o que
     `.sidebar-link.active` usa. A aba acesa e a mesma informacao que o item
     aceso da sidebar, e as duas tem de mudar juntas se a primaria mudar. */
  .bottom-nav__tab.active { color: var(--color-primary); font-weight: 600; }
  .bottom-nav__tab.active .bottom-nav__icon { background: var(--color-primary-soft); }

  /* No celular nao existe :hover, entao o toque precisa de resposta propria —
     mesma regra do bloco E. */
  .bottom-nav__tab:active { background: var(--bg-surface-hover); }
}

/* =========================================================
   Botao flutuante de CRIAR (leva "layout premium").

   No celular o "Adicionar" do topo da tela some e vira este botao redondo no
   canto, acima da barra de abas — onde o polegar ja esta. So existe onde a
   tela tem criacao (o CrudPage decide por `canCreate`), entao nao ha botao
   flutuante sem acao. No desktop ele nao aparece: la o botao do topo fica.

   Some enquanto houver dialogo aberto (Bootstrap poe .modal-open, o
   SweetAlert poe .swal2-shown — as DUAS, ver a armadilha no CLAUDE.md do
   frontend): ele ficaria por cima do rodape do formulario.
   ========================================================= */
.fab-cf { display: none; }

@media (max-width: 991px) {
  .fab-cf {
    display: grid;
    place-items: center;
    position: fixed;
    right: calc(var(--space-4) + var(--safe-right));
    bottom: calc(var(--bottom-nav-height) + var(--safe-bottom) + var(--space-4));
    z-index: 1025;
    width: 56px;
    height: 56px;
    border: 0;
    border-radius: var(--radius-full);
    background: var(--color-primary);
    color: var(--color-on-primary);
    font-size: 1.3rem;
    box-shadow: var(--shadow-lg);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: background var(--transition-fast);
  }
  .fab-cf:active { background: var(--color-primary-hover); }
  .fab-cf:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }
  body.modal-open .fab-cf,
  body.swal2-shown .fab-cf { display: none; }

  /* O botao do topo da tela vira o flutuante. */
  #crud-add-btn { display: none; }
}

/* ---------- Menu completo dentro do bottom sheet ("Mais") ---------- */

.sheet-nav__group + .sheet-nav__group { margin-top: var(--space-4); }

.sheet-nav__title {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
}

.sheet-nav__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  /* 44px de alvo de toque: e a lista com mais itens do sistema (28), e onde
     alvo pequeno mais custa. */
  min-height: 44px;
  width: 100%;
  padding: var(--space-2) var(--space-2);
  border: 0;
  background: none;
  border-radius: var(--radius-md);
  color: var(--text-primary);
  text-decoration: none;
  font-size: var(--text-base);
  text-align: left;
}

.sheet-nav__icon {
  flex: none;
  width: 30px; height: 30px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  /* Sem badge colorido por secao: `--nav-accent-*` saiu do sistema junto com a
     nav arco-iris da sidebar (ver app.js). Este menu e a MESMA navegacao vista
     no celular, entao tinha de perder a cor junto — se ficasse, o mesmo item
     apareceria colorido num lugar e neutro no outro. */
  background: var(--bg-muted);
  color: var(--text-secondary);
  font-size: 0.85rem;
}

.sheet-nav__link.active {
  background: var(--bg-surface-hover);
  font-weight: 600;
}
.sheet-nav__link:active { background: var(--bg-surface-hover); }
/* A cor do "Sair" vem do `text-danger` do Bootstrap no proprio elemento, igual
   ao item de sair do rodape da sidebar. Nao ha token de "danger" no design
   system, e os que existem (--falta, --atrasado) sao de STATUS de presenca e
   cobranca: emprestar um deles aqui repetiria justamente o erro que o bloco D
   corrigiu na Agenda. */
.sheet-nav__link--sair .sheet-nav__icon { background: none; color: inherit; }