/* frontend/core/styles/toast.css
   ============================================================
   BLOCK: toast-popup — fonte única para os quatro pontos de
   entrada (login, gestão, docente, aluno).

   Consumido por `validator.showSuccess/showError` em
   `core/utils/utils.js`, que alterna `display` e o modifier
   `--error` sobre o elemento `#app-toast` de cada página.

   Antes esta definição estava duplicada em quatro CSS de portal,
   com divergências que quebravam o portal do aluno. Ajustes
   por portal agora se fazem só pelas variáveis abaixo:

     --toast-offset-bottom  distância do rodapé (padrão 30px)
     --toast-bg             fundo do estado normal
     --toast-bg-error       fundo do estado de erro
   ============================================================ */

.toast-popup {
    /* O JS alterna para `block` ao exibir. Sem esta linha o elemento
       vazio fica visível no carregamento — era o caso no portal do aluno. */
    display: none;
    position: fixed;
    bottom: var(--toast-offset-bottom, 30px);
    left: 50%;
    /* O translateX centraliza; a animação abaixo precisa repeti-lo,
       senão o keyframe sobrescreve o transform e o toast salta para a direita. */
    transform: translateX(-50%);
    /* Acima dos modais dos portais e abaixo do ModalAviso (10200). */
    z-index: 10100;
    max-width: calc(100% - 40px);
    padding: 14px 22px;
    border-radius: 10px;
    background: var(--toast-bg, linear-gradient(135deg, #2b6cb0, #673AB7));
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 700;
    text-align: center;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
    animation: toast-popup-entrada 0.3s ease-out;
}

/* MODIFIER: error — único modifier que o JS aplica. Variantes como
   `--success` ou `--info` não existem do lado do JS; o estado de
   sucesso é o próprio bloco base. */
.toast-popup--error {
    background: var(--toast-bg-error, #E53E3E);
}

@keyframes toast-popup-entrada {
    from { opacity: 0; transform: translateX(-50%) translateY(16px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}