/* ============================================================
   APP FM CONECTA — CARD DE AVISO (desce do alto)
   Ver docs/CONTRATO-AVISOS.md §5.1 e §7 (regras de construção).
   Usa os tokens de tokens.css — nada de cor fixa aqui.
   ============================================================ */

/* Container que empilha até 3 cards, abaixo do cabeçalho e sempre acima da barra de
   navegação de baixo — mas SEM cobri-la: fica ancorado no topo. */
.aviso-card-container {
  position: fixed;
  /* Fica ABAIXO do cabeçalho (achado 17) — senão o card cobre o sininho por cima
     do .app-header (sticky, --z-nav) e o toque naquela área vai para o card, não
     para o sino. 68px é a altura REAL medida do cabeçalho COM o sino (auditoria
     17/09, achado 16: 73px era chutado; o cabeçalho sem sino mede 56,8px e com sino
     ~68px — 68px + 8px de respiro fecha o vão que sobrava solto no meio da tela). */
  top: calc(env(safe-area-inset-top, 0px) + 68px + 8px);
  left: 0;
  right: 0;
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  pointer-events: none; /* só os cards (filhos) recebem clique — o container é transparente a toque */
}

/* Desktop (>=1024px, onde a barra lateral aparece): ancora no canto superior
   direito em vez de centralizar no viewport inteiro (achado 20) - centralizado
   ele pousava por cima do titulo da tela, atras da barra lateral de 240px. */
@media (min-width: 1024px) {
  .aviso-card-container {
    left: auto;
    right: 16px;
    align-items: flex-end;
    padding: 0;
  }
}

.aviso-card {
  --aviso-cor: var(--cat-magenta);
  --aviso-brilho: var(--glow-magenta);
  pointer-events: auto;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  max-width: 420px;
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-radius: var(--r-lg, 14px);
  border: 1px solid transparent;
  background:
    linear-gradient(var(--surface-2), var(--surface-2)) padding-box,
    var(--grad-brand) border-box;
  box-shadow: var(--shadow-pop), 0 16px 36px -24px var(--aviso-brilho);
  color: var(--text);
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  animation: aviso-card-entrar .36s var(--ease, ease-out) both;
}

.aviso-card--comunicado {
  --aviso-cor: var(--notif-comunicado);
  --aviso-brilho: var(--glow-magenta);
}
.aviso-card--universidade {
  --aviso-cor: var(--notif-conteudo);
  --aviso-brilho: var(--glow-lavender);
}
.aviso-card--ranking {
  --aviso-cor: var(--notif-ranking);
  --aviso-brilho: var(--glow-purple);
}
.aviso-card--agenda {
  --aviso-cor: var(--notif-agenda);
  --aviso-brilho: var(--glow-coral);
}

/* Luz ambiente e filete de tempo seguem a linguagem dos cards já aprovados. */
.aviso-card::before {
  content: '';
  position: absolute;
  z-index: -1;
  width: 150px;
  height: 150px;
  top: -92px;
  left: -54px;
  border-radius: 50%;
  background: var(--aviso-brilho);
  opacity: .58;
  filter: blur(8px);
  pointer-events: none;
}
.aviso-card::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--grad-brand);
  transform-origin: left center;
  animation: aviso-card-tempo 6s linear both;
  pointer-events: none;
}

.aviso-card:hover { box-shadow: var(--shadow-pop), 0 18px 42px -20px var(--aviso-brilho); }
.aviso-card:focus-visible {
  outline: 2px solid var(--roxo);
  outline-offset: 2px;
}

.aviso-card.is-saindo {
  animation: aviso-card-sair .2s ease-in both;
}

.aviso-card-icone-wrap {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid color-mix(in srgb, var(--aviso-cor) 38%, transparent);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--aviso-cor) 16%, transparent);
  color: var(--aviso-cor);
  box-shadow: 0 8px 20px -14px var(--aviso-brilho);
}

.aviso-card-icone {
  width: 22px;
  height: 22px;
}

.aviso-card-texto {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.aviso-card-tipo {
  margin-bottom: 1px;
  color: var(--aviso-cor);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  line-height: 1.2;
  text-transform: uppercase;
}

.aviso-card-titulo {
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.25;
  color: var(--text);
  overflow-wrap: anywhere;
}

.aviso-card-mensagem {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.aviso-card-acao {
  margin-top: 4px;
  color: var(--ink-brand);
  font-size: 11px;
  font-weight: 600;
}

/* Achado 17 (auditoria 17/09): só aparece quando o JS mede que o clamp de 2 linhas
   de fato cortou o texto e o clique do card vai pra outro lugar — o card não pode
   prometer texto que não mostra. Discreto de propósito: não compete com o título. */
.aviso-card-vercentral {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-brand);
  text-decoration: underline;
}

/* O X agora é um <button> de verdade (achado 15/14), com o próprio alvo de toque
   de 44 px — não depende mais do card inteiro ser o alvo. */
.aviso-card-fechar {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  min-width: 44px;
  min-height: 44px;
  margin: -10px -8px -10px 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  color: var(--text-muted);
  cursor: pointer;
}
.aviso-card-fechar:hover { color: var(--text); }
.aviso-card-fechar svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }

@keyframes aviso-card-entrar {
  from { opacity: 0; transform: translateY(-18px) scale(.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes aviso-card-sair {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-10px); }
}
@keyframes aviso-card-tempo {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

/* Respeita prefers-reduced-motion (contrato §7.9): sem deslizar, só aparecer/sumir. */
@media (prefers-reduced-motion: reduce) {
  .aviso-card { animation: aviso-card-aparecer .12s linear both; }
  .aviso-card.is-saindo { animation: aviso-card-desaparecer .12s linear both; }
  .aviso-card::after { animation: none; }
}
@keyframes aviso-card-aparecer { from { opacity: 0; } to { opacity: 1; } }
@keyframes aviso-card-desaparecer { from { opacity: 1; } to { opacity: 0; } }

/* ============================================================
   ÍCONE POR TIPO NA CENTRAL DE AVISOS (#/avisos) — 24/09, DECISOES 275 item 15
   Mesma receita do quadradinho do card que desce (.aviso-card-icone-wrap), para o
   mesmo aviso ter a MESMA cara no card e na Central. A cor vem dos tokens --notif-*.
   Tipo desconhecido fica sem modificador: o quadrado neutro de antes, com o ícone
   padrão (nunca sem ícone).
   ============================================================ */
.aviso-tipo-icone {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--ink-brand);
}
.aviso-tipo-icone[class*="aviso-tipo-icone--"] {
  background: color-mix(in srgb, var(--aviso-cor) 16%, transparent);
  border-color: color-mix(in srgb, var(--aviso-cor) 38%, transparent);
  color: var(--aviso-cor);
}
.aviso-tipo-icone--comunicado   { --aviso-cor: var(--notif-comunicado); }
.aviso-tipo-icone--universidade { --aviso-cor: var(--notif-conteudo); }
.aviso-tipo-icone--ranking      { --aviso-cor: var(--notif-ranking); }
.aviso-tipo-icone--agenda       { --aviso-cor: var(--notif-agenda); }