/* ============================================================
   TOASTS — região fixa + cartão. A cor da borda/ícone vem do
   tipo (estado finito): um modifier por tipo (sucesso/erro/
   alerta/info).
   ============================================================ */

.toasts {
  position: fixed;
  /* 76px = topbar fixa do aluno (64px) + respiro; evita cobrir ações do header */
  top: 76px;
  right: 16px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--sup);
  border: 1px solid var(--borda-suave);
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
  padding: 12px 14px;
  min-width: 260px;
  max-width: 380px;
}

.toast__mensagem {
  flex: 1;
  font-size: 13.5px;
  color: var(--texto);
}

/* Cor por tipo: borda esquerda + ícone (a cor do ícone herda da borda). */
.toast--sucesso { border-left: 4px solid var(--sucesso); }
.toast--erro { border-left: 4px solid var(--perigo); }
.toast--alerta { border-left: 4px solid var(--alerta); }
.toast--info { border-left: 4px solid var(--info-texto); }

.toast--sucesso .toast__icone { color: var(--sucesso-texto); }
.toast--erro .toast__icone { color: var(--perigo-texto); }
.toast--alerta .toast__icone { color: var(--alerta); }
.toast--info .toast__icone { color: var(--info-texto); }