/* ============================================
   ECOVISION IA — Alertas CSS
   Estilos exclusivos da central de alertas
   ============================================ */

/* ============================================
   HEADER DA PÁGINA
   ============================================ */
.alertas-header {
  margin-bottom: var(--espaco-4);
}

.alertas-titulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--espaco-4);
}

.alertas-titulo h2 {
  font-size: var(--tamanho-xl);
  font-weight: var(--peso-bold);
  color: var(--cor-texto);
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  margin-bottom: 0;
}

.alertas-titulo h2 i {
  color: var(--cor-atencao);
}

/* ============================================
   FILTROS
   ============================================ */
.alertas-filtros {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-2);
}

.tag-grupo {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-2);
}

.tag {
  display: inline-flex;
  align-items: center;
  padding: var(--espaco-1) var(--espaco-3);
  font-size: var(--tamanho-xs);
  font-weight: var(--peso-medio);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-full);
  cursor: pointer;
  transition: all var(--transicao-rapida);
  background-color: var(--cor-branca);
  color: var(--cor-texto-secundario);
  font-family: var(--fonte-principal);
}

.tag:hover {
  border-color: var(--cor-primaria-borda);
  color: var(--cor-primaria);
  background-color: var(--cor-primaria-fundo);
}

.tag-ativa {
  background-color: var(--cor-primaria-fundo);
  border-color: var(--cor-primaria);
  color: var(--cor-primaria);
  font-weight: var(--peso-semibold);
}

/* ============================================
   LISTA DE ALERTAS
   ============================================ */
.alertas-lista {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-1);
}

/* Agrupamento por data */
.alerta-grupo {
  margin-bottom: var(--espaco-3);
}

.alerta-grupo-titulo {
  font-size: var(--tamanho-xs);
  font-weight: var(--peso-semibold);
  color: var(--cor-texto-terciario);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: var(--espaco-2) var(--espaco-1);
  margin-bottom: var(--espaco-1);
}

/* Card de alerta individual */
.alerta-card {
  display: flex;
  align-items: flex-start;
  gap: var(--espaco-3);
  padding: var(--espaco-4);
  background: var(--cor-branca);
  border: 1px solid var(--cor-borda-clara);
  border-radius: var(--raio-lg);
  transition: all var(--transicao-media);
  cursor: pointer;
  position: relative;
}

.alerta-card:hover {
  box-shadow: var(--sombra-md);
  border-color: var(--cor-borda);
  transform: translateX(2px);
}

.alerta-card.nao-lido {
  background: var(--cor-fundo);
  border-left: 3px solid var(--cor-primaria);
}

.alerta-card.nao-lido::before {
  content: '';
  position: absolute;
  top: var(--espaco-4);
  right: var(--espaco-4);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cor-primaria);
}

/* Ícone do alerta */
.alerta-icone {
  width: 40px;
  height: 40px;
  border-radius: var(--raio-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.alerta-icone.critico {
  background: var(--cor-perigo-fundo);
  color: var(--cor-perigo);
}

.alerta-icone.alto {
  background: #fee2e2;
  color: #dc2626;
}

.alerta-icone.medio {
  background: var(--cor-atencao-fundo);
  color: var(--cor-atencao);
}

.alerta-icone.baixo {
  background: var(--cor-info-fundo);
  color: var(--cor-info);
}

/* Conteúdo do alerta */
.alerta-conteudo {
  flex: 1;
  min-width: 0;
}

.alerta-titulo {
  font-weight: var(--peso-semibold);
  font-size: var(--tamanho-sm);
  color: var(--cor-texto);
  margin-bottom: var(--espaco-1);
}

.alerta-mensagem {
  font-size: var(--tamanho-sm);
  color: var(--cor-texto-secundario);
  line-height: 1.5;
  margin-bottom: var(--espaco-2);
}

.alerta-meta {
  display: flex;
  align-items: center;
  gap: var(--espaco-3);
  flex-wrap: wrap;
}

.alerta-data {
  font-size: var(--tamanho-xs);
  color: var(--cor-texto-terciario);
  display: flex;
  align-items: center;
  gap: var(--espaco-1);
}

.alerta-tipo-badge {
  font-size: var(--tamanho-xs);
  padding: 2px 8px;
  border-radius: var(--raio-full);
  font-weight: var(--peso-medio);
}

.alerta-tipo-badge.vencimento {
  background: var(--cor-perigo-fundo);
  color: var(--cor-perigo);
}

.alerta-tipo-badge.condicionante {
  background: var(--cor-atencao-fundo);
  color: #92400e;
}

.alerta-tipo-badge.documento {
  background: var(--cor-info-fundo);
  color: #1e40af;
}

/* Ações do alerta */
.alerta-acoes {
  display: flex;
  gap: var(--espaco-1);
  flex-shrink: 0;
}

.alerta-btn-acao {
  width: 32px;
  height: 32px;
  border-radius: var(--raio-sm);
  border: none;
  background: transparent;
  color: var(--cor-texto-terciario);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transicao-rapida);
  font-size: 0.9rem;
}

.alerta-btn-acao:hover {
  background: var(--cor-fundo-escuro);
  color: var(--cor-texto);
}

.alerta-btn-acao.marcar-lido:hover {
  color: var(--cor-sucesso);
}

.alerta-btn-acao.navegar:hover {
  color: var(--cor-primaria);
}

/* ============================================
   EMPTY STATE
   ============================================ */
.empty-state {
  text-align: center;
  padding: var(--espaco-10) var(--espaco-4);
  color: var(--cor-texto-terciario);
}

.empty-state i {
  font-size: 3rem;
  margin-bottom: var(--espaco-4);
  opacity: 0.4;
}

.empty-state h4 {
  color: var(--cor-texto-secundario);
  margin-bottom: var(--espaco-2);
}

/* ============================================
   ANIMAÇÕES
   ============================================ */
.alerta-card {
  animation: fadeIn 0.3s ease forwards;
}

.alerta-card:nth-child(1) { animation-delay: 0s; }
.alerta-card:nth-child(2) { animation-delay: 0.05s; }
.alerta-card:nth-child(3) { animation-delay: 0.1s; }
.alerta-card:nth-child(4) { animation-delay: 0.15s; }
.alerta-card:nth-child(5) { animation-delay: 0.2s; }

/* ============================================
   RESPONSIVO
   ============================================ */
@media (max-width: 767px) {
  .alerta-card {
    padding: var(--espaco-3);
  }

  .alerta-acoes {
    flex-direction: column;
  }

  .alerta-meta {
    gap: var(--espaco-2);
  }
}