/* ==========================================================================
   Intranet Grupo Bom Pastor — Estilos compartilhados entre todas as páginas
   ==========================================================================
   Este arquivo cobre apenas o que o Tailwind (via CDN) não resolve sozinho:
   fontes, keyframes de animação e pequenos ajustes globais. O grosso do
   layout é feito com classes utilitárias do Tailwind, direto no HTML.
   ========================================================================== */

html, body {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
}

.font-display {
  font-family: 'Outfit', sans-serif;
}

body {
  background-color: var(--primaria-suave);
}

::selection {
  background-color: var(--acao);
  color: #fff;
}

/* Scrollbar discreta (Webkit) para listas e dropdowns internos */
.overflow-y-auto::-webkit-scrollbar,
.overflow-x-auto::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.overflow-y-auto::-webkit-scrollbar-thumb,
.overflow-x-auto::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.15);
  border-radius: 999px;
}

/* ==========================================================================
   ANIMAÇÕES DE ENTRADA — e por que TODAS terminam em `backwards`

   `both` mantém o último quadro grudado no elemento para sempre. Como o último
   quadro destas animações tem `transform: translateY(0)`, o elemento ficava com
   um transform aplicado — identidade, invisível, e mesmo assim um transform.

   Isso não é detalhe de estilo. Um elemento com transform vira o CONTÊINER DE
   POSICIONAMENTO dos `position: fixed` descendentes. E todo modal do site é
   `fixed inset-0`: eles deixavam de se prender à janela e passavam a se prender
   ao conteúdo da página. Com a página rolada, o escurecimento não cobria o topo
   e o modal aparecia deslocado — medido: wrapper em topo -29, modal seguindo
   ele em vez de ficar em 0.

   `backwards` aplica o primeiro quadro antes de começar e DEVOLVE o elemento ao
   estado normal ao terminar. Como o estado normal é exatamente o último quadro
   (opacidade 1, sem deslocamento), não muda nada na aparência — e o transform
   deixa de existir.
   ========================================================================== */
@keyframes fade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-fade {
  animation: fade 0.35s ease backwards;
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.animate-slide-up {
  animation: slideUp 0.25s ease backwards;
}

@keyframes slideLeft {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}
.animate-slide-left {
  animation: slideLeft 0.3s ease backwards;
}

/* Sidebar: transições suaves de largura/posição, sem depender de JS de terceiros */
.sidebar-aside {
  transition: width 0.3s ease, transform 0.3s ease;
}
.sidebar-main-wrapper {
  transition: margin-left 0.3s ease;
}

/* line-clamp (fallback simples caso o plugin do Tailwind não esteja disponível no CDN) */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Ícones Lucide (via CDN lucide.js) herdam a cor/tamanho do elemento pai */
[data-lucide] {
  display: inline-block;
  vertical-align: middle;
}

/* --------------------------------------------------------------------------
   Subtítulo do cabeçalho de página — alinhado com o ÍCONE

   Aqui havia uma regra `.subtitulo-pagina` que recuava o subtítulo em
   `largura do ícone + gap`, para ele começar embaixo da primeira LETRA do título.
   O padrão adotado é o oposto, e é o do cabeçalho "Mural do Departamento": ícone,
   título e subtítulo compartilham a MESMA borda esquerda. O bloco passa a ter uma
   margem só, em vez de o subtítulo ficar deslocado para dentro.

   Não sobrou nada para o CSS fazer: o <p> é irmão do <h1> e já nasce na borda do
   container. A regra foi removida em vez de virar `padding-left: 0` — uma
   declaração sem efeito só sobrevive até alguém perguntar para que serve.
   -------------------------------------------------------------------------- */

/* ==========================================================================
   CABEÇALHO FLUTUANTE — a fixação mora AQUI, e não no <header>

   O <header> tinha `sticky top-0` desde sempre e NUNCA grudou. O motivo é
   silencioso: um elemento `sticky` só se desloca dentro do próprio pai, e o pai
   dele (#headerRoot) tem exatamente a altura dele — 68px de conteúdo em 68px de
   caixa. Sem folga, `sticky` não tem para onde ir e o elemento rola embora como
   qualquer outro. Medido: ao rolar 800px, o cabeçalho ia para -800.

   Subindo a fixação para o #headerRoot, o pai passa a ser o wrapper da página,
   que é alto — e aí ela funciona.

   Ancorada em zero e sem margem: a barra vai de borda a borda, e o que a
   separa do conteúdo é o desfoque do fundo com uma sombra rasa — não um recuo.
   ========================================================================== */
#headerRoot {
  position: sticky;
  top: 0;
  z-index: 30;
}

/* ==========================================================================
   CAMADA DE MOVIMENTO

   Regras que valem para tudo o que está aqui:

   1. SÓ ANIMA `opacity`, `transform`, `color`, `background`, `border-color` e
      `box-shadow`. Nenhuma dessas provoca recálculo de layout, então nada se
      desloca e nenhuma medição do sistema é afetada — o organograma mede a
      posição dos cartões para traçar as linhas de quem responde a dois chefes,
      e animar `width`/`height`/`top` ali daria linha no lugar errado.

   2. Animação que mexe em `transform` usa `backwards`, nunca `both`. `both`
      deixa o último quadro grudado, e um `transform` grudado — mesmo a matriz
      identidade, que não muda nada na tela — transforma o elemento em contêiner
      de posicionamento dos `fixed` descendentes. Foi assim que os modais
      deixaram de se prender à janela. Ver o bloco de animações acima.

      `both` continua certo quando a animação só mexe em opacidade E a regra
      base é `opacity: 0`: aí é o `forwards` que segura o elemento visível no
      fim. É o caso do texto do carrossel na home. A armadilha é o `transform`
      grudado, não o `both`.

   3. Nada aqui decide se algo FUNCIONA. Animação é acabamento; se ela não
      rodar, tudo continua clicável e legível.
   ========================================================================== */

:root {
  /* Um lugar só para o ritmo do site. Trocar aqui muda tudo junto. */
  --mov-rapido: 120ms;
  --mov-normal: 200ms;
  --mov-lento: 320ms;
  /* Sai rápido e desacelera no fim: é o que dá sensação de resposta imediata
     sem o corte seco do `linear`. */
  --mov-saida: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- Botões: resposta ao toque ----
   O afundar de 2% é o retorno tátil que falta num clique de tela. Fica no
   `transform`, que não mexe no layout: o botão não empurra o vizinho. */
button:not(:disabled),
a[class*="rounded"],
label[class*="cursor-pointer"] {
  transition:
    background-color var(--mov-normal) ease,
    border-color var(--mov-normal) ease,
    color var(--mov-normal) ease,
    box-shadow var(--mov-normal) ease,
    transform var(--mov-rapido) ease;
}
button:not(:disabled):active,
a[class*="rounded"]:active {
  transform: scale(0.97);
}

/* Botão desabilitado não responde: prometer resposta a um clique que não vai
   acontecer é pior do que não prometer nada. */
button:disabled { transition: opacity var(--mov-normal) ease; }

/* ---- Campos de formulário ---- */
input, select, textarea {
  transition:
    background-color var(--mov-normal) ease,
    border-color var(--mov-normal) ease,
    box-shadow var(--mov-normal) ease;
}

/* ---- Foco visível ----
   `:focus-visible` e não `:focus`: o anel aparece para quem navega por teclado
   e não para quem clicou com o mouse, que já sabe onde clicou. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--marca-500, #0d7dc4);
  outline-offset: 2px;
  border-radius: 0.5rem;
}

/* ---- Entrada em cascata das seções da página ----
   Cada bloco de primeiro nível entra um pouco depois do anterior. O atraso é
   pequeno e PARA no sexto: numa lista longa, escalonar tudo faria o último item
   demorar segundos para aparecer — o efeito viraria espera. */
.animate-fade > * {
  animation: fade var(--mov-lento) var(--mov-saida) backwards;
}
.animate-fade > *:nth-child(1) { animation-delay: 0ms; }
.animate-fade > *:nth-child(2) { animation-delay: 45ms; }
.animate-fade > *:nth-child(3) { animation-delay: 90ms; }
.animate-fade > *:nth-child(4) { animation-delay: 135ms; }
.animate-fade > *:nth-child(5) { animation-delay: 180ms; }
.animate-fade > *:nth-child(n+6) { animation-delay: 200ms; }

/* ---- Rolagem suave ----
   Vale para os links de âncora e para `scrollIntoView`, que várias telas usam
   ao abrir um item. Saltar a página inteira sem transição faz perder o fio. */
html { scroll-behavior: smooth; }

/* ==========================================================================
   MOVIMENTO REDUZIDO — o interruptor geral

   Não é acessibilidade de fachada: para quem tem sensibilidade vestibular,
   conteúdo que desliza provoca enjoo de verdade. Quem marcou essa preferência
   no sistema recebe o site inteiro, sem nenhum movimento.

   `!important` aqui é deliberado: esta regra precisa vencer qualquer animação
   declarada em qualquer arquivo, inclusive as que vierem depois.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   A CHAMA DO TOPFEED

   MOVIMENTO É O AVISO, COR É O ESTADO — e confundir os dois é o que faz um
   menu lateral cansar. Uma chama tremulando em laço no canto do olho compete
   com a leitura o dia inteiro; então o tremular acontece UMA vez, quando a
   novidade chega, e o que fica depois é a cor e o ponto, que não se mexem.

   Vale para as duas chamas: a do menu, que avisa de longe, e a do título da
   tela, que confirma de perto que a publicação entrou.
   ========================================================================== */

@keyframes chama-acende {
  0%   { transform: translateY(0)    rotate(0)     scale(1); }
  20%  { transform: translateY(-3px) rotate(-6deg) scale(1.22); }
  40%  { transform: translateY(0)    rotate(5deg)  scale(0.94); }
  60%  { transform: translateY(-2px) rotate(-3deg) scale(1.12); }
  80%  { transform: translateY(0)    rotate(2deg)  scale(0.98); }
  100% { transform: translateY(0)    rotate(0)     scale(1); }
}

/* O pivô fica na BASE do desenho, não no meio: fogo balança a ponta e fica
   preso embaixo. Girando pelo centro, o ícone parece uma peça solta girando. */
.chama-acende {
  animation: chama-acende 900ms ease-in-out backwards;
  transform-origin: 50% 85%;
}

/* O estado "tem coisa nova para ler", que sobrevive ao fim da animação. O
   laranja é o mesmo da marca, e é a única cor do menu que não é branca — quem
   olha de relance encontra sem procurar. */
.topfeed-novo .nav-icone-caixa { color: var(--acento-500); }

/* O ponto. Existe porque cor sozinha não basta: para quem não distingue
   laranja de branco, a forma é o que informa. Fica no canto do ícone e não
   ocupa espaço no fluxo, então o menu não se mexe quando ele aparece. */
.topfeed-novo .nav-icone-caixa::after {
  content: '';
  position: absolute;
  top: -1px;
  right: -1px;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--acento-500);
  box-shadow: 0 0 0 2px var(--marca-900);
}

/* ---- A publicação que acabou de entrar ----
   Desce para o lugar em vez de aparecer do nada. É o que liga o clique em
   "Publicar" ao cartão que surge no topo — sem isso a lista simplesmente muda,
   e a pessoa precisa procurar o que mudou. */
@keyframes post-entra {
  from { opacity: 0; transform: translateY(-14px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

.post-entra { animation: post-entra 420ms var(--mov-saida) backwards; }

/* ==========================================================================
   ALVO DE TOQUE — o dedo precisa de mais espaço do que o cursor.

   O QUE ESTAVA PEQUENO, medido nas telas de 320 a 414px: o botão do menu e o
   de fechar a gaveta, os dois com 36x36, presentes em TODAS as páginas; o de
   trocar a foto do perfil, também 36x36; os dois botões de imagem do
   compositor da Comunidade, com 16px de altura; as fichas de filtro das
   Solicitações, com 24; e a caixinha de seleção do Manager, 16x16.

   Trinta e seis pixels não é um número inventado de ruim: é abaixo do menor
   piso recomendado (40px; a WCAG usa 44, o Material 48), e a taxa de erro de
   toque cresce depressa embaixo disso. Num aparelho pequeno, errar o botão do
   menu significa abrir outra coisa — e o menu é o único caminho entre as
   páginas no celular.

   A CORREÇÃO NÃO MUDA UM PIXEL DO DESENHO. Em vez de engordar o botão, um
   pseudo-elemento invisível estende a ÁREA CLICÁVEL até 44px a partir do
   centro. O que se vê continua igual; o que o dedo acerta é maior.

   `pointer: coarse` limita tudo isto a quem toca a tela. No computador, com
   mouse, nada muda — e alvo grande demais ali atrapalha, porque cria zonas
   clicáveis onde não há nada visível.
   ========================================================================== */
@media (pointer: coarse) {
  #mobileMenuBtn,
  #sidebarMobileCloseBtn,
  #changePhotoBtn,
  #feedAddFoto,
  #feedTirarFoto,
  .selecionar-pessoa {
    position: relative;
  }

  /* `max(100%, 44px)` cresce só o que falta: um botão que já tem 47px de
     largura mantém os 47, e só a altura sobe de 16 para 44. Engordar os dois
     lados criaria sobreposição entre botões vizinhos, e aí o dedo acertaria o
     alvo errado — trocando um defeito por outro pior, porque invisível. */
  #mobileMenuBtn::after,
  #sidebarMobileCloseBtn::after,
  #changePhotoBtn::after,
  #feedAddFoto::after,
  #feedTirarFoto::after,
  .selecionar-pessoa::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: max(100%, 44px);
    height: max(100%, 44px);
  }

  /* As fichas de filtro ficam lado a lado e QUEBRAM LINHA: estender a área
     invisível faria a ficha de cima roubar o toque da de baixo. Aqui a altura
     cresce de verdade, e o espaçamento entre linhas acompanha. */
  .filter-chip {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }

  /* Mesma ideia para as abas Visualizar/Configurar: elas dividem um trilho, e
     área invisível sobreposta trocaria uma pela outra. */
  .tab-btn {
    min-height: 40px;
  }
}