/* =====================================================================
   Central de Notificações — Etapa 03 (chamado 3985587)
   Estilos do slot #notificacoes na home. Copiado/adaptado do protótipo
   aprovado (prototipos/home-reconstruida-sininho.html:127-197),
   renomeando as classes .sino-* -> .notificacoes-*.
   A alternância de estados (mock body.state-*) NÃO é copiada: quem
   alterna no real é o JS (assets/modules/portal/Notificacoes.js).
   ===================================================================== */

/* Ancoragem do dropdown absoluto: fica no próprio .notificacoes-wrap.
   Retorno do Renan (28/07): o sino saiu de dentro de #calendario e virou filho
   direto de #box-header (entre a saudação e o calendário), então o
   #calendario { position: relative } que existia só para essa ancoragem
   deixou de ser necessário. */
.notificacoes-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  align-self: center;
}

/* Gatilho da central (o ícone clicável). Etapa 03: SEM círculo — só o ícone.
   Fundo transparente, sem borda, sem dimensões fixas; padding mínimo só p/
   conforto de clique. Continua position:relative p/ ancorar o badge. */
#notificacoes.notificacoes-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: opacity 0.15s;
  position: relative;
  padding: 2px;
}
#notificacoes.notificacoes-btn svg {
  width: 19px;
  height: 19px;
  stroke: #00353e;
  transition: stroke 0.15s;
}
/* Hover discreto SEM caixa: o traço do ícone vira turquesa (sem fundo/círculo) */
#notificacoes.notificacoes-btn:hover svg {
  stroke: #009f8f;
}

/* Badge vermelho com o contador de não-vistas.
   Âncora (Etapa 03): a borda ESQUERDA fica FIXA no canto superior-direito do
   ícone (left fixo, right:auto) e o elemento CRESCE para a DIREITA conforme
   ganha dígitos — o conteúdo empurra a borda direita (width:auto). O teto
   "99+" continua vindo do front (header.php).
   text-align:center: o número fica centrado no círculo. Era `left`, para o
   primeiro dígito cair sempre no mesmo x quando o contador muda de tamanho —
   trocado porque com 1 dígito (o caso comum) o padding deixava o número
   visivelmente à esquerda do centro.
   Etapa 03 — recalibrado p/ o ícone SEM círculo (~19px + 2px padding = box
   ~23px): a borda esquerda fixa (left:12px) cai no canto sup.-direito do ícone
   e o badge cresce p/ a direita ("1", "14", "99+" partilham o mesmo x). */
.notificacoes-badge {
  position: absolute;
  top: -7px;
  left: 12px;
  right: auto;
  width: auto;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background: #e11900;
  color: #fff;
  font-size: 0.62rem;
  font-weight: bold;
  line-height: 18px;
  text-align: center;
  white-space: nowrap;
  box-sizing: border-box;
  /* SEM borda: com box-sizing:border-box, os 2px comiam a altura do conteúdo
     (18 - 4 = 14px) enquanto o line-height seguia 18px — o número descia e
     ficava fora do centro do círculo. */
  box-shadow: 0 0 0 1px #e11900;
}

/* Dropdown do feed.
   Alinhado à ESQUERDA do sino (left, não right): com o sino entre a saudação e
   o calendário — perto da borda esquerda do conteúdo — um dropdown de 340px
   ancorado à direita ficaria torto/estouraria a viewport. A setinha acompanha
   o mesmo lado, caindo sob o ícone. */
.notificacoes-dropdown {
  position: absolute;
  top: 32px;
  left: -8px;
  width: 340px;
  z-index: 50;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.18);
  overflow: hidden;
  font-size: 0.82rem;
  color: #333;
}
.notificacoes-dropdown::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 16px;
  width: 12px;
  height: 12px;
  background: #fff;
  border-left: 1px solid #e5e5e5;
  border-top: 1px solid #e5e5e5;
  transform: rotate(45deg);
}
.notificacoes-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 14px;
  border-bottom: 1px solid #eee;
}
/* Título do dropdown: letter-spacing mais fechado p/ casar com o cabeçalho
   (Etapa 03). Só o título — o corpo dos itens não é alterado. */
.notificacoes-head h4 {
  margin: 0;
  font-size: 0.92rem;
  color: #00353e;
  font-weight: bold;
  letter-spacing: -0.02em;
}

/* Altura fixa: ~5 itens inteiros + o 6º cortado -> a barra fina indica que
   há mais ao rolar. Rolagem NATIVA (lazy-load real via JS), com scrollbar
   fina e discreta. */
.notificacoes-list-wrap {
  position: relative;
}
.notificacoes-list {
  max-height: 410px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: #d9d9d9 transparent;
}
.notificacoes-list::-webkit-scrollbar {
  width: 5px;
}
.notificacoes-list::-webkit-scrollbar-track {
  background: transparent;
}
.notificacoes-list::-webkit-scrollbar-thumb {
  background: #d9d9d9;
  border-radius: 3px;
}
.notificacoes-list::-webkit-scrollbar-thumb:hover {
  background: #bfbfbf;
}

.notificacoes-item {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid #f1f1f1;
  text-decoration: none;
  color: inherit;
  position: relative;
}
.notificacoes-item:hover {
  background: #fafafa;
}
.notificacoes-item.nao-vista {
  background: #f2fbf9;
}
.notificacoes-item.nao-vista:hover {
  background: #eaf8f4;
}
.notificacoes-item .dot {
  flex: 0 0 8px;
  margin-top: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: transparent;
}
.notificacoes-item.nao-vista .dot {
  background: #009f8f;
}

.notificacoes-txt {
  flex: 1;
  min-width: 0;
}
/* letter-spacing igual ao do cabeçalho (.notificacoes-head h4) p/ que TODOS os
   títulos compartilhem o mesmo tracking. Cobre "Nova publicação em" + o span
   .area por herança — o nome da área deixa de destoar (Etapa 03, #3985587). */
.notificacoes-txt .titulo {
  margin: 0 0 3px;
  line-height: 1.25;
  color: #00353e;
  letter-spacing: -0.02em;
}
.notificacoes-txt .titulo .area {
  color: #009f8f;
  font-weight: 600;
}
.notificacoes-txt .subtitulo {
  margin: 0 0 4px;
  line-height: 1.3;
  color: #4a4a4a;
  font-size: 0.78rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.notificacoes-txt .tempo {
  margin: 0;
  font-size: 0.68rem;
  color: #9a9a9a;
}

/* Indicador de carregando (lazy-load) */
.notificacoes-loading {
  padding: 12px 14px;
  text-align: center;
  font-size: 0.72rem;
  color: #9a9a9a;
}

/* Rodapé "fim da fila" (Etapa 03): anexado 1x quando não há mais nada a
   carregar/revelar. Discreto, centralizado, cor suave. */
.notificacoes-fim {
  padding: 14px 14px 16px;
  text-align: center;
  font-size: 0.7rem;
  color: #b0b0b0;
  border-top: 1px solid #f1f1f1;
}

/* Estado vazio (sóbrio) — "Você está em dia" */
.notificacoes-empty {
  padding: 34px 26px 38px;
  text-align: center;
}
.notificacoes-empty .icon {
  width: 46px;
  height: 46px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: #eef7f4;
  display: flex;
  align-items: center;
  justify-content: center;
}
.notificacoes-empty .icon svg {
  width: 24px;
  height: 24px;
  stroke: #009f8f;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.notificacoes-empty h5 {
  margin: 0 0 5px;
  font-size: 0.9rem;
  color: #00353e;
  font-weight: bold;
}
.notificacoes-empty p {
  margin: 0;
  font-size: 0.78rem;
  color: #8a8a8a;
  line-height: 1.35;
}

/* ------------------------------------------------------------------
   Etapa 10 (chamado 3985587) — chip de menção "@colaborador".
   Vale FORA do editor: as interações já gravadas são renderizadas no
   histórico da tela de visualizar chamado (fora do iframe do TinyMCE).
   Dentro do iframe o mesmo CSS chega por MencaoColaborador.CSS.
   Este arquivo já é carregado globalmente por template2.0/header.php.
   ------------------------------------------------------------------ */
.mention-chip {
  background: #eaf6d8;
  color: #3f6600;
  border: 1px solid #cfe6a3;
  border-radius: 4px;
  padding: 0 5px;
  font-weight: bold;
  white-space: nowrap;
}