/* Primitivas reaproveitáveis. Dependem de tokens.css.
 * Nenhuma delas carrega consulta de mídia: o que muda com a largura vem por
 * token, e os tokens mudam em layout.css. */

/* --- marca --- */
.marca { display: flex; align-items: center; gap: 10px }

.marca__selo {
  /* o selo fica sempre sobre branco, então a cor é fixa — no escuro o token
     clarearia e o contraste cairia. O canvas também a fixa. */
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #FFFFFF;
  color: #1F6F5C;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.04em;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.marca__nome { font-size: 22px; font-weight: 800; letter-spacing: -0.02em }

/* --- botões: cápsula, um cheio por tela --- */
.botao {
  height: var(--altura-botao);
  border: 0;
  border-radius: 27px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 16px;
  text-decoration: none;
  white-space: nowrap;
}

.botao--cheio { background: var(--pr); color: var(--on); font-weight: 800 }
.botao--fio { background: transparent; border: 1.5px solid var(--ln); color: var(--tx); font-weight: 700 }
.botao--texto { height: 48px; border-radius: 24px; background: transparent; color: var(--tx); font-size: 15px; font-weight: 600 }

/* Botão miúdo: a mesma família, em tamanho de ação dentro de um cartão —
   "Voltar", "Recusar", "Cancelar". Antes isso era `.conversa__voltar` e
   `.conversa__acao`, que moravam na folha do chat e eram usados em cinco
   telas que nada tinham a ver com conversa. Botão é componente; mora aqui. */
.botao--miudo { height: 40px; border-radius: 12px; font-size: 13px; padding: 0 12px }

/* Recusar e cancelar não são o mesmo que excluir: o contorno continua neutro e
   só a letra é vermelha, para não disputar atenção com a ação principal. */
.botao--recusa { color: var(--er) }

.selo-g {
  width: 24px;
  height: 24px;
  border-radius: 12px;
  border: 1.5px solid var(--ln);
  font-size: 13px;
  font-weight: 800;
  color: var(--pr);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* --- cartão ---

   O cartão é uma COLUNA. Isso mora aqui, e não na folha de cada tela, porque
   foi assim que o Caderno quebrou: `display: flex` estava escrito em quatro
   folhas de tela (comunidade, estudar, inicio, perfil) e em nenhuma outra. Na
   tela do Caderno, que não carrega nenhuma das quatro, o cartão virava um
   bloco comum — os três números do topo saíam na mesma linha, emendados, e o
   `gap` de quem o usava não fazia efeito nenhum.

   É o mesmo erro do `.sessoes__titulo`, com um agravante: a auditoria não
   pegava, porque a classe ESTAVA definida; o que faltava era o `display` dela
   em metade das telas. A auditoria agora também olha isso.

   Quem precisa de outro respiro troca só o `gap`, nunca o `display`. */
.cartao {
  background: var(--sf);
  border-radius: var(--raio-cartao);
  box-shadow: var(--sombra);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* --- nota de rodapé --- */
.legal {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--t2);
  text-align: center;
}

/* --- abas de alternância (criar conta / entrar) --- */
.abas {
  display: flex;
  gap: 24px;
  border-bottom: 1px solid var(--ln);
}

.abas__item {
  padding: 0 0 12px;
  border: 0;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  background: transparent;
  font-size: 15px;
  font-weight: 600;
  color: var(--t2);
}

.abas__item[aria-selected="true"] {
  border-bottom-color: var(--pr);
  color: var(--tx);
  font-weight: 800;
}

/* --- campo de formulário --- */
.campo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
}

.campo__entrada {
  height: 52px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: var(--bg);
  color: var(--tx);
  padding: 0 16px;
  /* 16px evita o zoom automático do Safari ao focar o campo */
  font-size: 16px;
  font-weight: 400;
  width: 100%;
}

.campo__entrada::placeholder { color: var(--t3) }

.campo[data-erro="sim"] .campo__entrada { border-color: var(--er) }

.campo__erro {
  font-size: 13px;
  font-weight: 600;
  color: var(--er);
  min-height: 0;
}

.campo__erro:empty { display: none }

/* --- aviso do servidor --- */
.aviso {
  margin: 0;
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.45;
  font-weight: 600;
}

.aviso--erro { background: var(--ac-s); color: var(--ac-t) }
.aviso--ok { background: var(--soft); color: var(--pr) }
.aviso:empty { display: none }

/* --- botão ocupado --- */
.botao[aria-busy="true"] { opacity: 0.65; pointer-events: none }

/* --- âncora numérica: rótulo pequeno, número grande, frase curta --- */
.ancora { display: flex; align-items: baseline; gap: 12px }

.ancora__numero {
  font-size: 56px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
}

.ancora__texto { font-size: 14px; line-height: 1.4; color: var(--t2) }

/* --- opção de escolha única, em lista --- */
.opcoes { display: flex; flex-direction: column; gap: 10px }

.opcao {
  min-height: 64px;
  text-align: left;
  border: 1px solid var(--ln);
  border-radius: 16px;
  background: var(--sf);
  color: var(--tx);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}

.opcao[aria-checked="true"] { border: 2px solid var(--pr) }

.opcao__texto { display: flex; flex-direction: column; gap: 2px; min-width: 0 }
.opcao__nome { font-size: 15px; font-weight: 700 }
.opcao__sub { font-size: 13px; color: var(--t2) }

.opcao__marca {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 11px;
  border: 2px solid var(--t3);
  display: flex;
  align-items: center;
  justify-content: center;
}

.opcao[aria-checked="true"] .opcao__marca { border-color: var(--pr) }

.opcao__marca::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background: transparent;
}

.opcao[aria-checked="true"] .opcao__marca::after { background: var(--pr) }

/* Escolher UM é bolinha; marcar VÁRIOS é caixa com visto. As duas listas de
   concurso no perfil — "o que você estuda" e "o que te interessa" — tinham a
   mesma bolinha, e nada dizia que numa se escolhe um e na outra quantos
   quiser. O papel ARIA já distinguia; agora o olho também. */
.opcao[role="checkbox"] .opcao__marca { border-radius: 6px }
.opcao[role="checkbox"] .opcao__marca::after {
  width: 11px;
  height: 6px;
  border-radius: 0;
  border-left: 2.5px solid transparent;
  border-bottom: 2.5px solid transparent;
  background: transparent;
  transform: rotate(-45deg) translate(1px, -1px);
}

.opcao[role="checkbox"][aria-checked="true"] .opcao__marca {
  background: var(--pr);
  border-color: var(--pr);
}

.opcao[role="checkbox"][aria-checked="true"] .opcao__marca::after {
  background: transparent;
  border-left-color: var(--on);
  border-bottom-color: var(--on);
}

/* --- contador de meta: menos, número, mais --- */
.contador-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

.contador-meta__passo {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 24px;
  border: 1px solid var(--ln);
  background: var(--bg);
  color: var(--tx);
  font-size: 24px;
  line-height: 1;
}

.contador-meta__valor {
  font-size: 76px;
  font-weight: 800;
  line-height: 1;
  min-width: 110px;
  text-align: center;
}

.contador-meta__rotulo {
  font-size: 13px;
  font-weight: 700;
  color: var(--t2);
  text-align: center;
}

/* --- item de navegação: linha no trilho, coluna na barra de abas --- */
.nav-item {
  min-height: 44px;
  padding: 0 12px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  color: var(--t2);
  background: transparent;
}

.nav-item[aria-current="page"] {
  background: var(--soft);
  color: var(--pr);
  font-weight: 700;
}

.nav-item[aria-disabled="true"] { opacity: 0.4; pointer-events: none }
.nav-item__rotulo { flex: 1 }

/* --- selo de contagem, em laranja --- */
.selo-contagem {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--ac);
  color: var(--ac-on);
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- grade de cartões que acomoda o que couber ---

   `auto-fill` e não `auto-fit`: com poucos cartões, `auto-fit` colapsa as
   colunas vazias e um cartão sozinho se estica pela largura toda. Numa lista
   de gente isso faz a primeira pessoa parecer um banner.

   Sem `align-items`: os cartões de uma linha ficam da mesma altura, e com
   `margin-top: auto` nas ações os botões de todos caem na mesma linha. Antes
   o cartão de quem tinha a apresentação mais longa esticava sozinho e a grade
   parecia desmontada. */
.grade-cartoes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

/* --- barra de progresso --- */
.barra {
  height: 8px;
  border-radius: 4px;
  background: var(--ln);
  overflow: hidden;
}

.barra__feito {
  display: block;
  height: 8px;
  border-radius: 4px;
  background: var(--pr);
}

/* --- lista de atalhos --- */
.lista { background: var(--sf); border-radius: var(--raio-cartao); box-shadow: var(--sombra); padding: 8px 24px }

.lista__item {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 64px;
  border-bottom: 1px solid var(--ln);
  text-decoration: none;
  color: var(--tx);
}

.lista__item:last-child { border-bottom: 0 }
.lista__item[aria-disabled="true"] { opacity: 0.45; pointer-events: none }

.lista__icone {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 12px;
  background: var(--soft);
  color: var(--pr);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lista__texto { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0 }
.lista__nome { font-size: 15px; font-weight: 700 }
.lista__sub { font-size: 13px; color: var(--t2) }

/* --- rótulo de seção --- */
.rotulo { font-size: 13px; font-weight: 700; color: var(--t2) }
.rotulo--erro { color: var(--er) }

@media (max-width: 899px) {
  .nav-item {
    flex: 1;
    flex-direction: column;
    gap: 3px;
    justify-content: center;
    min-height: 52px;
    padding: 0;
    border-radius: 0;
    font-size: 11px;
    background: transparent;
  }

  /* A aba em que você está: a cor sozinha é pouco num ícone de 20px, e quem
     enxerga mal não vê nada. Ganha uma barrinha no topo da aba, que é a marca
     que todo mundo lê sem precisar comparar com as vizinhas. */
  .nav-item {
    position: relative;
    -webkit-tap-highlight-color: transparent;
  }

  .nav-item[aria-current="page"] { background: transparent; color: var(--pr) }

  .nav-item[aria-current="page"]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--pr);
  }

  /* Resposta ao toque. Sem isto o dedo encosta, a navegação demora o que
     demorar, e a tela fica igual — parece que o toque não pegou e a pessoa
     toca de novo. O realce vale para abas E para itens de menu. */
  .nav-item:active { background: var(--soft) }
  .nav-item:active .nav-item__rotulo { opacity: 0.7 }

  .nav-item__rotulo { flex: none }
  .lista { padding: 4px 20px }
}

/* --- chips: filtro que liga e desliga --- */
.chips { display: flex; flex-wrap: wrap; gap: 8px }
/* Chip de sugestão: preenche um campo, não filtra uma lista. Fica em verde
   claro justamente para não ser confundido com os chips de filtro, que são
   estado da tela. */
.chip--sugestao {
  height: 28px;
  padding: 0 10px;
  border: 0;
  border-radius: 14px;
  background: var(--soft);
  color: var(--pr);
  font-size: 12px;
  font-weight: 700;
}

.chip {
  height: 36px;
  padding: 0 14px;
  border-radius: 18px;
  border: 1px solid var(--ln);
  background: var(--sf);
  color: var(--tx);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.chip[aria-pressed="true"],
.chip[aria-checked="true"] {
  border-color: var(--pr);
  background: var(--pr);
  color: var(--on);
  font-weight: 700;
}

/* --- interruptor --- */
.interruptor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 48px;
  border: 0;
  background: transparent;
  color: var(--tx);
  padding: 0;
  text-align: left;
  width: 100%;
}

.interruptor__texto { display: flex; flex-direction: column; gap: 2px; min-width: 0 }
.interruptor__nome { font-size: 15px; font-weight: 600 }
.interruptor__sub { font-size: 13px; color: var(--t2) }

.interruptor__trilho {
  width: 44px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 13px;
  background: var(--t3);
  display: flex;
  align-items: center;
  padding: 3px;
  justify-content: flex-start;
}

.interruptor[aria-checked="true"] .interruptor__trilho {
  background: var(--pr);
  justify-content: flex-end;
}

.interruptor__bola { width: 20px; height: 20px; border-radius: 10px; background: #FFFFFF }

/* ===========================================================================
   Barra de ações do topo da tela.

   Antes estes atalhos eram links soltos dentro de um parágrafo cinza — sumiam
   no texto e ninguém via que dava para clicar. Agora são botões de verdade: a
   ação principal preenchida, as demais com fio. O padrão vale para todas as
   telas, para que a mesma coisa pareça a mesma coisa em qualquer lugar.
   ======================================================================== */
.acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 14px 0 4px;
}

.acoes .botao {
  height: 42px;
  padding: 0 18px;
  font-size: 14px;
  flex: 0 0 auto;
}

.acoes__separador { flex-basis: 100%; height: 0 }

/* ===========================================================================
   Modal.

   Usa <dialog> do navegador: Esc fecha, foco fica preso dentro e o fundo
   escurece sem precisar de JavaScript para nada disso.
   ======================================================================== */
.modal {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100dvh - 64px);
  padding: 0;
  border: 0;
  border-radius: var(--raio-cartao);
  background: var(--sf);
  color: var(--tx);
  box-shadow: var(--sombra-solta);
  overflow: hidden;
}

.modal::backdrop { background: rgba(10, 16, 14, 0.55) }

/* Modal largo: o W13 põe "quando" e "quem explica o quê" lado a lado. Dois
   grupos em 560px empilham e o formulário fica com oito campos em coluna,
   que é exatamente o que o artboard evita. */
.modal--largo { width: min(760px, calc(100vw - 32px)) }

.modal__caixa {
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 64px);
}

.modal__topo {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 22px 24px 0;
}

.modal__titulo {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.modal__fechar {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 18px;
  background: var(--soft);
  color: var(--t2);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
}

.modal__fechar:hover { color: var(--tx) }

.modal__descricao {
  margin: 6px 24px 0;
  font-size: 14px;
  color: var(--t2);
}

.modal__corpo {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 24px;
  overflow-y: auto;
}

.modal__rodape {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 16px 24px 22px;
  border-top: 1px solid var(--ln);
  background: var(--sf);
}

/* O resumo do que vai ser enviado, à esquerda dos botões: antes de confirmar,
   a pessoa confere dia, hora e duração num lugar só. */
.modal__nota { flex: 1; min-width: 0; font-size: 13px; color: var(--t2) }
.modal__nota:empty { display: none }

.modal__rodape .botao { height: 46px; padding: 0 22px; flex: 0 0 auto }

.modal__erro {
  margin: 0 24px;
  color: var(--er);
  font-size: 14px;
  min-height: 0;
}

.modal__erro:empty { display: none }

@media (max-width: 559px) {
  .modal { width: 100vw; max-width: 100vw; max-height: 92dvh; border-radius: 18px 18px 0 0 }
  .modal__caixa { max-height: 92dvh }
  .modal__rodape { flex-direction: column-reverse }
  .modal__rodape .botao { width: 100% }
  .modal__nota { order: 3; text-align: center }
}

/* ===========================================================================
   Filtro não é ação.

   As duas coisas eram pílulas do mesmo tamanho e formato, e no Feed havia três
   fileiras empilhadas — publicar, concurso e tipo — todas iguais. Quem olha não
   tem como saber qual delas faz alguma coisa acontecer.

   A partir daqui: AÇÃO é botão (fundo cheio ou fio, 42px, `.acoes`). FILTRO é
   texto que acende (sem borda, 34px, `.filtros`). `.chips` segue sendo escolha
   dentro de formulário, onde a pílula marcável é o que se espera.
   ======================================================================== */
.filtros-grupo {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.filtros-grupo__rotulo {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--t3);
}

.filtros {
  display: flex;
  gap: 4px;
  /* Rola na horizontal em vez de quebrar linha: uma fileira que vira três
     empilhadas é justamente o que embaralhava a tela. */
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
  margin: 0 calc(var(--medianiz) * -1);
  padding-left: var(--medianiz);
  padding-right: var(--medianiz);
}

.filtros::-webkit-scrollbar { display: none }

/* O recuo de 14px do primeiro botão desalinhava o texto dele em relação ao
   texto dos cartões abaixo. A fileira recua o mesmo tanto para compensar. */
.filtros { margin-left: -14px }

.filtro {
  flex: 0 0 auto;
  height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 17px;
  background: transparent;
  color: var(--t2);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.filtro:hover { color: var(--tx) }

.filtro[aria-checked="true"],
.filtro[aria-pressed="true"] {
  background: var(--soft);
  color: var(--pr);
  font-weight: 700;
}

/* ===========================================================================
   Ritmo vertical.

   Dentro de um bloco o espaço é curto; entre blocos é largo. Sem isso tudo
   fica à mesma distância de tudo e a tela não tem partes — foi o que aconteceu
   no Feed, com formulário, filtros e lista todos colados no mesmo intervalo.
   ======================================================================== */
.secao {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.conteudo__interno > .secao + .secao { margin-top: 12px }

/* Título de bloco. Vive aqui, e não numa folha de tela, porque seis telas o
   usam — em cinco delas ele estava sem estilo nenhum, caindo no h2 do
   navegador, que é maior que o próprio título da página. */
.secao__titulo {
  margin: 14px 0 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--t2);
}

.secao__sub {
  margin: -6px 0 0;
  font-size: 14px;
  color: var(--t2);
}

/* Texto corrido não acompanha a largura do cartão: linha longa demais cansa
   antes de informar. */
/* Subtítulo de bloco. Morava em comunidade.css, mas onze telas o usam e
   nem todas carregam aquela folha. */
.com__sub { margin: 0; font-size: 15px; line-height: 1.5; color: var(--t2) }
.secao__sub,
.com__sub { max-width: 68ch }


/* ===========================================================================
   Componentes que moravam em folhas de tela.

   `placar`, `caderno__acoes` e `feed__texto` nasceram cada um numa tela e
   foram sendo reusados em outras — que não carregavam a folha de origem. O
   resultado é invisível: o elemento aparece, só que sem estilo. Quem usa em
   mais de um lugar mora aqui.
   ======================================================================== */

/* --- placar --- */
.grade-placar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px }
.placar {
  background: var(--sf);
  border-radius: var(--raio-cartao);
  box-shadow: var(--sombra);
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.placar__numero { font-size: 32px; font-weight: 800; line-height: 1 }
.placar__rotulo { font-size: 13px; color: var(--t2) }

/* --- acoes de cartao --- */
.caderno__acoes { display: flex }
.caderno__acoes .botao { padding: 0 28px }

/* --- campo alto --- */
.feed__texto {
  height: auto;
  padding: 12px 16px;
  line-height: 1.5;
  resize: vertical;
  font-weight: 400;
}


/* Ajuda abaixo de um campo. Emitida por `ESQUAD.campo`, usada em onze telas, e
   até agora não existia em lugar nenhum: o texto saía com o tamanho do corpo,
   competindo com o próprio rótulo. */
.campo__sub {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--t2);
}


/* --- estado vazio ---
   Estava escrito duas vezes, em caderno.css e comunidade.css, com valores que
   já tinham começado a divergir. Uma definição só. */
.vazio { display: flex; flex-direction: column; gap: 10px; padding: 28px 4px; align-items: flex-start }
.vazio .botao { margin-top: 8px; padding: 0 28px }
.vazio__titulo { margin: 0; font-size: 22px; font-weight: 800; line-height: 1.25 }
.vazio__texto { margin: 0; font-size: 15px; line-height: 1.5; color: var(--t2); max-width: 54ch }

/* --- estado do áudio ---
   Mesma duplicação entre salas.css e sessoes.css. */
.sala-audio__estado { font-size: 17px; font-weight: 700 }
.sala-audio__estado[data-ok="sim"] { color: var(--ok) }
.sala-audio__estado[data-ok="erro"] { color: var(--er) }
.sala-audio__nota { margin: 0; font-size: 14px; line-height: 1.5; color: var(--t2) }
.sala-audio__nota:empty { display: none }


/* Ação secundária e destrutiva.

   Em Parceiros, "Conectar", "Denunciar" e "Bloquear" eram três botões do mesmo
   peso — e os dois últimos, que quase nunca se usam, chamavam tanto quanto o
   que a tela existe para fazer. Agora são texto, e só ficam vermelhos quando o
   ponteiro chega. */
.acao-discreta {
  height: 38px;
  padding: 0 10px;
  border: 0;
  border-radius: 19px;
  background: transparent;
  color: var(--t3);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}

.acao-discreta:hover { color: var(--er); background: var(--sf) }

/* ===========================================================================
   Menu flutuante.

   O canvas pede que denunciar, bloquear, desfazer amizade e encerrar sala
   saiam de baixo de um `⋯` em vez de ficarem como botões soltos no cartão —
   são ações raras e perigosas, e um botão permanente ao lado da ação principal
   convida ao engano.
   ======================================================================== */
.menu-flutuante {
  position: fixed;
  z-index: 60;
  min-width: 232px;
  max-width: min(320px, calc(100vw - 16px));
  padding: 8px;
  border-radius: 16px;
  background: var(--sf);
  box-shadow: var(--sombra-solta);
  display: flex;
  flex-direction: column;
}

.menu-flutuante__linha { height: 1px; background: var(--ln); margin: 6px 0 }

.menu-flutuante__conta {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 12px;
}

.menu-item {
  min-height: 44px;
  padding: 6px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--tx);
  font-family: inherit;
  font-size: 14px;
  text-align: left;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.menu-item:hover { background: var(--bg) }
.menu-item:active { background: var(--soft) }
.menu-item--perigo { color: var(--er); font-weight: 700 }
.menu-item--perigo:hover { background: var(--ac-s) }

.menu-item__texto {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.menu-item__sub { font-size: 12px; color: var(--t2) }
.menu-item__visto { flex: 0 0 auto; color: var(--pr) }

/* Confirmar algo destrutivo não usa o verde de "siga em frente". */
.botao--perigo { background: var(--er); color: #FFFFFF }

/* ===========================================================================
   Cabeçalho de página do layout v2.

   Título e subtítulo à esquerda, UMA ação principal à direita. Antes a ação
   ficava numa fileira abaixo do cabeçalho, misturada com atalhos de navegação.
   ======================================================================== */
.pagina__topo {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.pagina__titulo { display: flex; flex-direction: column; gap: 4px; min-width: 0 }

.pagina__titulo h1 {
  margin: 0;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.pagina__acoes { display: flex; gap: 10px; flex-wrap: wrap }
.pagina__acoes .botao { height: 44px; padding: 0 22px; font-size: 14px }

/* ===========================================================================
   Abas.

   Filtro que divide a mesma lista é aba sublinhada, com a contagem ao lado —
   não pílula. A pílula dizia "escolha uma opção"; a aba diz "esta lista tem
   partes, e você está nesta".
   ======================================================================== */
.abas-barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--ln);
}

/* `min-width: 0` é o que faz o `overflow-x` valer de alguma coisa.

   Sem ele, um filho de flex não encolhe abaixo do tamanho do conteúdo: a
   faixa de abas ficava tão larga quanto as quatro abas somadas, a rolagem
   nunca entrava e "Questões comentadas" era cortada na borda do telefone sem
   jeito de alcançar. */
.abas {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  gap: 24px;
  overflow-x: auto;
  scrollbar-width: none;
}

.abas::-webkit-scrollbar { display: none }

.aba {
  flex: 0 0 auto;
  padding: 0 0 12px;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: transparent;
  color: var(--t2);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.aba:hover { color: var(--tx) }

.aba[aria-selected="true"] {
  border-bottom-color: var(--pr);
  color: var(--tx);
  font-weight: 800;
}

.aba__n { color: var(--t3); font-weight: 600; font-variant-numeric: tabular-nums }

.abas-barra__ordem {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 8px;
  font-size: 13px;
  color: var(--t2);
  white-space: nowrap;
}

.abas-barra__ordem select {
  height: 34px;
  padding: 0 10px;
  font-size: 13px;
  width: auto;
}

/* ===========================================================================
   Corpo de duas colunas: lista à esquerda, painel de contexto à direita.
   ======================================================================== */
/* O empilhamento vertical de uma página.

   `.conteudo__interno` já faz isso para os filhos diretos. O problema aparece
   quando uma tela embrulha o conteúdo numa <section> — como o Feed, que tem
   duas visões no mesmo arquivo: a <section> vira um bloco comum, o gap do pai
   não alcança os netos, e cabeçalho, abas e colunas ficam colados uns nos
   outros sem um pixel entre eles. Era esse o espaçamento errado do Feed.

   Quem embrulha o conteúdo numa <section> põe esta classe nela. */
.pagina-pilha {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Lista de itens iguais empilhados: publicações do feed, aulas, denúncias.
   Sem isto cada tela repetia um `display:flex` próprio, e as que esqueciam
   ficavam com os cartões encostados. */
.pilha-lista {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pagina__colunas {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-start;
}

.pagina__principal {
  flex: 2 1 520px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pagina__lado {
  flex: 1 1 260px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.painel { gap: 10px; padding: 18px 20px }
.painel__titulo { font-size: 14px; font-weight: 800 }

.painel__linha {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: var(--t2);
}

.painel__linha b { color: var(--tx); font-weight: 700 }

.painel__nota {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--t2);
}

.painel__linha + .painel__nota { border-top: 1px solid var(--ln); padding-top: 10px }

@media (max-width: 1199px) {
  .pagina__lado { flex-basis: 100%; flex-direction: row; flex-wrap: wrap }
  .pagina__lado > * { flex: 1 1 260px }
}

/* O ⋯ de uma pessoa, do W17. Mesma forma do ⋯ da barra lateral e do cartão de
   publicação: a mesma coisa tem que parecer a mesma coisa. */
.mais-pessoa {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--t2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.mais-pessoa:hover { background: var(--bg); color: var(--tx) }

/* Estado à direita de um item de menu: "Gratuito", "Meta, tema". Diz em que
   pé está a coisa sem obrigar a abrir a tela. */
.menu-item__estado {
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--t2);
}

/* Escolha entre formatos, em cartões lado a lado. Usado ao abrir uma sala. */
.formatos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}

.formato {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px;
  border: 1px solid var(--ln);
  border-radius: 12px;
  background: var(--sf);
  color: var(--tx);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.formato[aria-checked="true"] {
  border: 2px solid var(--pr);
  background: var(--soft);
  padding: 11px;
}

.formato__nome { font-size: 13px; font-weight: 800 }
.formato__sub { font-size: 12px; color: var(--t2); line-height: 1.4 }


/* ===========================================================================
   Avatar com marca de presença, e o selo de relação.

   Nasceram no diretório de parceiros e hoje aparecem também em Amigos, Salas
   e Início — quatro telas, e só uma delas carregava comunidade.css. Componente
   usado em mais de um lugar mora aqui.
   ======================================================================== */
.av-caixa { position: relative; flex: 0 0 auto }
.av {
  width: 48px;
  height: 48px;
  border-radius: 24px;
  background: var(--av);
  background-size: cover;
  background-position: center;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.av--foto { color: transparent }
.av--pequeno { width: 32px; height: 32px; border-radius: 16px; font-size: 12px; background: var(--pr) }
.av--medio { width: 40px; height: 40px; border-radius: 20px; font-size: 14px }
.av__ponto {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 12px;
  height: 12px;
  border-radius: 6px;
  background: #2E9E6B;
  border: 2px solid var(--sf);
}
.selo {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
}
.selo--amigo { background: var(--soft); color: var(--pr) }
.selo--espera { background: var(--ac-s); color: var(--ac-t) }


/* Número de destaque e elo de texto. Nasceram no Início; Questões usa os
   mesmos. Componente de duas telas mora aqui. */
.numero-grande {
  font-size: 64px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
}
.numero-medio { font-size: 40px; font-weight: 800; line-height: 1 }
.numero-medio small { font-size: 18px; color: var(--t2); font-weight: 700 }
.elo {
  border: 0;
  background: transparent;
  color: var(--pr);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

/* ===========================================================================
   Tabela.

   Usada quando a pergunta é comparativa — qual assunto mais tira ponto, quando
   foi o último erro. Cartões respondem a primeira e escondem a segunda.
   ======================================================================== */
.tabela-cartao { padding: 0; gap: 0; overflow: hidden }

.tabela-cartao__filtros {
  padding: 14px 22px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--ln);
}

/* A tabela rola dentro da própria caixa: a página nunca anda de lado. */
.tabela-rolo { overflow-x: auto }

.tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  min-width: 640px;
}

.tabela thead th {
  text-align: left;
  padding: 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--t2);
}

.tabela thead th:first-child,
.tabela tbody td:first-child { padding-left: 22px }

.tabela tbody tr { border-top: 1px solid var(--ln) }
.tabela tbody td { padding: 14px 12px; vertical-align: middle }

.tabela__forte { font-weight: 700 }
.tabela__fraco { color: var(--t2) }
/* O cabeçalho da coluna de número alinha com o número, não com a margem.
   `.tabela thead th` é mais específico que `.tabela__num`, então sem esta
   linha o rótulo ficava à esquerda e os algarismos à direita, desencontrados. */
.tabela__num,
.tabela thead th.tabela__num { text-align: right }
.tabela__erros { font-weight: 800; color: var(--er) }
.tabela__acao { text-align: right; padding-right: 22px }
.tabela__acao .botao { height: 34px; padding: 0 14px; font-size: 13px }

.kpi-numero { font-size: 32px; font-weight: 800; line-height: 1.15 }

/* ===========================================================================
   Vazio grande: ícone, frase e a saída.

   Nasceu em Sessões e hoje serve o Caderno também — por isso mora aqui. É o
   que a pessoa vê na primeira visita, então não é uma linha de texto solta:
   é um cartão com o que fazer em seguida.
   ======================================================================== */
.vazio-grande {
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 40px 28px;
}

.vazio-grande__icone {
  width: 64px;
  height: 64px;
  border-radius: 32px;
  background: var(--soft);
  color: var(--pr);
  display: flex;
  align-items: center;
  justify-content: center;
}

.vazio-grande__titulo { margin: 0; font-size: 20px; font-weight: 800 }

.vazio-grande__texto {
  margin: 0;
  font-size: 14px;
  color: var(--t2);
  max-width: 44ch;
  line-height: 1.5;
}

.vazio-grande .botao { margin-top: 6px; height: 40px; padding: 0 18px }


/* Três cartões de número lado a lado: Início e Caderno usam o mesmo.

   Sem `align-items: start`: numa linha de cartões irmãos as alturas casam.
   Com ele, cada cartão ficava do tamanho do próprio texto e a linha virava
   uma escada — que foi o que apareceu em Parceiros e no Caderno.

   `auto-fill` e não `auto-fit`: o Caderno mostra um indicador só quando está
   vazio, e com `auto-fit` esse cartão sozinho se esticava pelos 1120px — um
   "0" perdido no meio de uma faixa branca. Com `auto-fill` a coluna vazia
   continua existindo e o cartão fica do tamanho de um cartão. */
.grade-placar-3 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

/* Cartão de número: mais apertado que o cartão comum, porque o conteúdo é
   rótulo, número e uma linha de apoio — e não um bloco de texto. Com o padding
   de 24px e o respiro de 12px do cartão padrão, três linhas curtas ocupavam a
   altura de um parágrafo inteiro. */
.grade-placar-3 > .cartao { padding: 18px 22px; gap: 4px }


/* ===========================================================================
   Cartão de pessoa ou de item numa grade, e a variante tracejada de convite.
   Nasceu em Parceiros; Salas e Simulados usam o mesmo.
   ======================================================================== */
.p-cartao {
  background: var(--sf);
  border-radius: var(--raio-cartao);
  box-shadow: var(--sombra);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.p-cartao--convite {
  background: transparent;
  box-shadow: none;
  border: 1.5px dashed var(--t3);
  justify-content: center;
  gap: 8px;
}
.p-cartao__topo { display: flex; align-items: center; gap: 12px; min-width: 0 }
.p-cartao__link {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}
.p-cartao__nomes { min-width: 0; display: flex; flex-direction: column; gap: 2px }
.p-cartao__nome {
  font-size: 15px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.p-cartao__onde { font-size: 13px; color: var(--t2); line-height: 1.4 }
.p-cartao__nota {
  margin: 0;
  background: var(--bg);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--t2);
}
.p-cartao__nota--forte { color: var(--tx) }
.p-cartao__nota--forte b { color: var(--ok); font-size: 15px }
.p-cartao__acoes { display: flex; gap: 8px; align-items: center; margin-top: auto }
.p-cartao__acoes .botao { flex: 1; height: 40px; padding: 0 12px; font-size: 14px; min-width: 0 }
.p-cartao__acoes .mais-pessoa {
  width: 40px;
  height: 40px;
  border: 1px solid var(--ln);
  border-radius: 20px;
}

/* Controle segmentado: Questões e Sala ao vivo usam o mesmo. */
.segmentado {
  display: flex;
  gap: 6px;
  background: var(--bg);
  border-radius: 12px;
  padding: 4px;
}
.segmento {
  height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--tx);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.segmento[aria-checked="true"] {
  background: var(--sf);
  font-weight: 800;
  box-shadow: 0 1px 2px rgba(23, 32, 28, 0.12);
}