/* language: CSS, file: alertas.css, target: pagina /alertas
   Layout da lista de avisos. Nao carrega alerta.css: o modal de criacao de
   aviso vive nas paginas com card, e /alertas nao tem card nenhum. */

.alertas-topo{display:flex;align-items:flex-end;justify-content:space-between;gap:1.25rem;
  flex-wrap:wrap;margin:2rem 0 1.25rem}
.alertas-topo h1{font-family:var(--font-serif);font-size:clamp(1.6rem,3.4vw,2.2rem);font-weight:500;
  letter-spacing:-.02em}
.alertas-sub{font-size:.88rem;color:var(--texto-secundario);margin-top:.35rem}
.alertas-acoes{display:flex;gap:.6rem}
.btn-sec{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:.6rem 1.3rem;
  border-radius:var(--radius-pill);border:1px solid var(--borda-media);background:#fff;
  color:var(--texto-principal);font-size:.85rem;font-weight:600;text-decoration:none;
  transition:border-color .18s,background .18s,color .18s}
.btn-sec svg{width:14px;height:14px}
.btn-sec:hover{border-color:var(--verde-principal);background:var(--verde-salvia-claro);
  color:var(--verde-principal)}

.alertas-nota{font-size:.82rem;color:var(--texto-secundario);background:var(--leitura-bg);
  border:1px solid var(--borda-suave);border-radius:var(--radius-md);
  padding:.85rem 1rem;line-height:1.6;margin-bottom:1.75rem}
.alertas-nota b{color:var(--leitura);font-weight:700}

.avisos-bloco{margin-top:1rem}
.avisos-lista{display:flex;flex-direction:column;gap:.6rem}
.aviso-item{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding:.9rem 1.1rem;border:1px solid var(--borda-suave);border-radius:var(--radius-md);
  background:#fff}
.aviso-item-info{display:flex;flex-direction:column;gap:.2rem;min-width:0;flex:1}
.aviso-item-titulo{font-size:.86rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.aviso-item-meta{font-size:.76rem;color:var(--texto-terciario);font-variant-numeric:tabular-nums}
.aviso-item-meta b{color:var(--verde-principal);font-weight:700}
.btn-remover-alerta{min-height:38px;padding:.45rem 1rem;border-radius:var(--radius-pill);
  border:1px solid var(--borda-media);background:#fff;color:var(--texto-secundario);
  font-size:.78rem;font-weight:600;cursor:pointer;transition:all .18s}
.btn-remover-alerta:hover{border-color:var(--alerta-borda);background:var(--alerta-bg);
  color:var(--alerta)}

/* Estado vazio: a pagina nao pode ser um branco quando nao ha aviso. */
.vazio-alertas{text-align:center;padding:3rem 1rem;border:1px dashed var(--borda-media);
  border-radius:var(--radius-md);background:var(--leitura-bg)}
.vazio-alertas h2{font-family:var(--font-serif);font-size:1.15rem;font-weight:500;
  margin-bottom:.5rem}
.vazio-alertas p{font-size:.86rem;color:var(--texto-secundario);max-width:44ch;
  margin:0 auto 1.25rem;line-height:1.6}

@media (max-width:640px){
  .alertas-topo{align-items:flex-start}
  .aviso-item{align-items:flex-start}
}