/* Container fixo no canto inferior esquerdo */
#atlas-toast-container {
    position: fixed;
    left: 16px;
    bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 1052; /* acima do backdrop (1040) e abaixo do modal bootstrap (~1055) */
    pointer-events: none; /* clicks passam por trás onde não há toast */
}
  
/* Toast base */
.atlas-toast {
    min-width: 280px;
    max-width: 420px;
    color: #111;
    background: #fff; /* fundo branco desejado */
    border: 1px solid #e5e5e5;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    border-radius: 8px;
    padding: 12px 14px;
    display: flex;
    align-items: center; /* alinhar ícone, texto e botão no mesmo eixo */
    gap: 10px;
    pointer-events: auto; /* o toast é clicável */
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .2s ease, transform .2s ease;
    font-size: 14px;
    line-height: 1.35;
}

.atlas-toast .message {
    color: #111; /* cor do texto da mensagem */
  }

.atlas-toast.show { opacity: 1; transform: translateY(0); }
  
.atlas-toast .icon {
    width: 18px;
    height: 18px;
    margin-top: 0; /* centralizar verticalmente */
    flex: 0 0 18px;
}
.atlas-toast .icon svg { display: block; }
.atlas-toast .content { flex: 1 1 auto; }
.atlas-toast .title { font-weight: 600; margin-bottom: 2px; }
.atlas-toast .message { margin: 0; }
  
.atlas-toast .close {
    background: transparent;
    border: 0;
    color: #666; /* ícone X visível no fundo branco */
    cursor: pointer;
    padding: 2px 4px;
    font-size: 16px;
    line-height: 1;
    margin-left: auto; /* encostar o X à direita */
}
  
/* Variantes */
.atlas-toast.success { border-left: 4px solid #28a745; }
.atlas-toast.error   { border-left: 4px solid #dc3545; }
.atlas-toast.warning { border-left: 4px solid #ffc107; }
  
/* Dark mode (mantém branco conforme design) */
@media (prefers-color-scheme: dark) {
  .atlas-toast { background: #fff; color: #111; border-color: #e5e5e5; }
  .atlas-toast .close { color: #666; }
}

/* Backdrop para escurecer a tela quando houver toast */
#atlas-toast-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  opacity: 0;
  transition: opacity .2s ease;
  z-index: 1040; /* abaixo do modal bootstrap (~1055) e acima do conteúdo */
  pointer-events: auto; /* bloqueia interações de fundo */
}
#atlas-toast-backdrop.show {
  opacity: 1;
}