/* ═══════════════════════════════════════════════════════════════════════════
   O AVISO DA CASA — uma definição, o sistema inteiro e o site público

   É o mesmo aviso que aparece ao entrar e sair do modo de simulação de cargo:
   cartão que entra deslizando pela direita, ícone, texto, "×" e a barrinha de
   tempo correndo embaixo.

   ── POR QUE ELE SAIU DE DENTRO DO base.html ────────────────────────────────

   Vivia embutido em `global_navigation/templates/home/base.html`, que é o base
   do sistema INTERNO. O site público não o enxergava.

   Em 14/09/2026 o dono pediu, olhando o print do aviso: "quero que ele apareça
   com o mesmo código de quando saímos do modo de visão do cargo". Copiar para o
   site público seriam duas definições do mesmo aviso divergindo na primeira
   correção — é o mesmo motivo pelo qual a caixa de "tem certeza?" saiu do
   `pipeline.js` e virou `confirmar_exclusao.css`.

   Mexer aqui muda o sistema interno e o site público no mesmo instante, que é o
   comportamento certo: o aviso é o mesmo nos dois lugares.

   Anda junto com static/js/bhq_toast.js.
   ═══════════════════════════════════════════════════════════════════════════ */

#toast-container {
  position: fixed;
  top: 76px;
  right: 20px;
  z-index: 9990;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 420px;
  width: calc(100vw - 40px);
}
.bhq-toast {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px 18px;
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,.14), 0 2px 8px rgba(0,0,0,.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid transparent;
  position: relative;
  overflow: hidden;
  animation: toastIn .38s cubic-bezier(0.34,1.56,0.64,1) both;
  cursor: default;
}
@keyframes toastIn {
  from { opacity:0; transform: translateX(48px) scale(.94); }
  to   { opacity:1; transform: translateX(0)    scale(1);   }
}
.bhq-toast-success {
  background: rgba(220,252,231,.96);
  border-color: rgba(34,197,94,.25);
  color: #14532d;
}
.bhq-toast-error, .bhq-toast-danger {
  background: rgba(254,226,226,.96);
  border-color: rgba(239,68,68,.25);
  color: #7f1d1d;
}
.bhq-toast-warning {
  background: rgba(254,243,199,.96);
  border-color: rgba(245,158,11,.25);
  color: #78350f;
}
.bhq-toast-info, .bhq-toast- {
  background: rgba(219,234,254,.96);
  border-color: rgba(59,130,246,.25);
  color: #1e3a5f;
}
.bhq-toast-icon {
  font-size: 1.35rem;
  flex-shrink: 0;
  line-height: 1;
}
.bhq-toast-success .bhq-toast-icon  { color: #16a34a; }
.bhq-toast-error   .bhq-toast-icon,
.bhq-toast-danger  .bhq-toast-icon  { color: #dc2626; }
.bhq-toast-warning .bhq-toast-icon  { color: #d97706; }
.bhq-toast-info    .bhq-toast-icon,
.bhq-toast-        .bhq-toast-icon  { color: #2563eb; }
.bhq-toast-body {
  flex: 1;
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.45;
}
.bhq-toast-close {
  background: none;
  border: none;
  padding: 2px 4px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1rem;
  opacity: .45;
  transition: opacity .15s, background .15s;
  color: inherit;
  flex-shrink: 0;
  line-height: 1;
}
.bhq-toast-close:hover { opacity: 1; background: rgba(0,0,0,.08); }
/* O botão de ação do aviso — "Desfazer" e afins.
   Fica ANTES do X e depois do texto, na ordem em que se lê: o que aconteceu,
   o que dá para fazer, e só então como dispensar. */
.bhq-toast-acao {
  flex: 0 0 auto;
  margin-left: auto;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 700;
  font-size: .82rem;
  padding: 5px 12px;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  opacity: .85;
  transition: opacity .12s, background .12s;
}
.bhq-toast-acao:hover { opacity: 1; background: rgba(0,0,0,.07); }
/* Barra de progresso */
.bhq-toast-progress {
  position: absolute;
  bottom: 0; left: 0;
  height: 3px;
  width: 100%;
  border-radius: 0 0 14px 14px;
  transform-origin: left;
  animation: toastProgress linear both;
}
.bhq-toast-success .bhq-toast-progress  { background: #16a34a; }
.bhq-toast-error   .bhq-toast-progress,
.bhq-toast-danger  .bhq-toast-progress  { background: #dc2626; }
.bhq-toast-warning .bhq-toast-progress  { background: #d97706; }
.bhq-toast-info    .bhq-toast-progress,
.bhq-toast-        .bhq-toast-progress  { background: #2563eb; }
@keyframes toastProgress {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}
/* Dark mode */
html[data-theme="dark"] .bhq-toast-success {
  background: rgba(20,83,45,.92);
  border-color: rgba(34,197,94,.3);
  color: #bbf7d0;
}
html[data-theme="dark"] .bhq-toast-error,
html[data-theme="dark"] .bhq-toast-danger {
  background: rgba(127,29,29,.92);
  border-color: rgba(239,68,68,.3);
  color: #fecaca;
}
html[data-theme="dark"] .bhq-toast-warning {
  background: rgba(120,53,15,.92);
  border-color: rgba(245,158,11,.3);
  color: #fde68a;
}
html[data-theme="dark"] .bhq-toast-info,
html[data-theme="dark"] .bhq-toast- {
  background: rgba(30,58,138,.92);
  border-color: rgba(59,130,246,.3);
  color: #bfdbfe;
}


/* ── OS ATALHOS ────────────────────────────────────────────────────────────
   O aviso nasceu com UM botão de ação ("Desfazer"). O balão de ajuda do site
   público precisa de três — preços, catálogo e contato —, e três botões não
   cabem na mesma linha do texto num cartão de 420px.

   Então eles descem para uma linha própria. `flex-basis: 100%` num contêiner
   com `flex-wrap` é o que faz a quebra sem mexer no que já existia: um aviso
   sem atalhos continua exatamente com o desenho de antes. */
.bhq-toast {
    flex-wrap: wrap;
}

.bhq-toast-acoes {
    flex: 0 0 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 2px;

    /* Alinhado com o texto, e não com o ícone: o recuo é a largura do ícone
       (1.35rem) mais o respiro de 12px da linha de cima. */
    padding-left: calc(1.35rem + 12px);
}

.bhq-toast-atalho {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid currentColor;
    background: rgba(255, 255, 255, .55);
    color: inherit;
    font: inherit;
    font-size: .8rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, transform .15s ease;
}

.bhq-toast-atalho:hover {
    background: #fff;
    transform: translateY(-1px);
}

.bhq-toast-atalho:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .35);
}

html[data-theme="dark"] .bhq-toast-atalho {
    background: rgba(255, 255, 255, .10);
}

html[data-theme="dark"] .bhq-toast-atalho:hover {
    background: rgba(255, 255, 255, .18);
}