/* =========================================================
   TOAST — mensagens de retorno de acao
   =========================================================
   Um unico toast no sistema, e SO aqui (unificacao de 13/09/2026: antes
   cada tela repetia um toast Bootstrap `.toast-dark` no proprio HTML/CSS):

   showToast() de js/utils.js (global window.showToast)
        .toast-container > .toast-notification.toast-<tipo> > .toast-content
                           > .toast-icon + .toast-message + .toast-close

   Usa apenas tokens de css/variables.css, logo funciona nos dois temas sem
   bloco [data-theme="light"].

   POR QUE ESTE ARQUIVO EXISTE (2026-09-12)
   ---------------------------------------------------------
   O estilo do toast morava em css/utils.css, e NENHUMA tela do sistema
   carregava esse arquivo. Resultado: `.toast-notification` ficava com
   `position: static` e largura zero — toda mensagem de "salvo com sucesso"
   ou "erro ao salvar" era montada no DOM e NUNCA aparecia, em 18 telas.

   Nao da para simplesmente passar a carregar o utils.css: ele e quase todo
   classes utilitarias com os MESMOS nomes do Bootstrap (.d-flex, .mb-3,
   .w-100, .text-center...). Carregado depois do Bootstrap, ele sobrescreveria
   as definicoes dele e mexeria no layout das telas inteiras.

   Por isso o toast foi extraido para ca: e o minimo necessario, nao colide
   com nada, e pode ser carregado em qualquer tela com seguranca.
   ========================================================= */

/* ---------------------------------------------------------
   ONDE A MENSAGEM APARECE — RODAPE, canto inferior direito

   Era no ALTO, a direita. Saiu de la em 15/09/2026: e exatamente onde
   mora o indicador "Ganhos de hoje", e como toda acao que gera ganho
   tambem mostra um toast de sucesso, a mensagem cobria a animacao do
   valor subindo em 100% das vezes — nao era caso de borda.

   `:not(.position-fixed)`: o Bootstrap 5 tambem chama de `.toast-container`
   o container dos toasts DELE, e as telas que o usam o marcam com
   `position-fixed bottom-0 end-0`. Sem este escopo esta regra vencia la e o
   container esticava de ponta a ponta — o toast do Bootstrap aparecia no
   canto errado e, no celular, a 100% da largura (auditoria de 13/09/2026).
   O nosso container nunca leva `position-fixed`.
--------------------------------------------------------- */
.toast-container:not(.position-fixed) {
  position: fixed;
  /* `top: auto` e explicito: o Bootstrap tambem estiliza `.toast-container`,
     e sem zerar o topo o container ficaria esticado de cima a baixo. */
  top: auto;
  bottom: calc(var(--space-md) + env(safe-area-inset-bottom, 0px));
  right: var(--space-md);
  left: auto;
  /* Acima de modal do Bootstrap (1055) e do .confirm-overlay (10500): um erro
     disparado com o dialogo aberto precisa aparecer por cima dele. */
  z-index: 11000;
  /* `width: auto` explicito: o `.toast-container` do proprio Bootstrap 5.3
     vem com `width: max-content`, e com ele a caixa se mede pelo TEXTO em
     vez de obedecer ao par left/right. No celular isso a fazia sair pela
     direita (medido em 15/09/2026: 407px numa janela de 375px, nas telas
     com `.page-header`). Era o mesmo defeito que o envios.css corrigia so
     para o modulo dele; agora a correcao vale para todas as telas. */
  width: auto;
  display: flex;
  /* `column` com o container ancorado embaixo: `showToast` faz appendChild,
     entao a mensagem NOVA nasce no fim da lista — ou seja, colada no canto,
     onde o olho ja esta — e as anteriores sobem. A pilha cresce de baixo
     para cima, que e o que se espera de um canto inferior. */
  flex-direction: column;
  /* `stretch` e nao `flex-end`: com cada mensagem do tamanho do proprio
     texto, uma pilha de tres nascia com as bordas esquerdas em degrau.
     Esticando todas a largura do container (que ja e o do texto mais
     longo, limitado pelo max-width), a pilha vira um bloco so. */
  align-items: stretch;
  gap: var(--space-sm);
  max-width: min(420px, calc(100vw - 32px));
  /* So a mensagem recebe toque; a faixa em volta dela continua atravessavel. */
  pointer-events: none;
}

/* ---------------------------------------------------------
   DESVIO DAS BARRAS FIXAS DE BAIXO

   O canto inferior direito ja e casa de tres componentes fixos:
     `.env-fab`        botao redondo de novo pedido (60px, z 1035)
     `.env-rodape`     barra de acoes do detalhe de um envio (z 1030)
     `.cart-mobile-bar` barra do carrinho no catalogo (z 1030)
   Descer a mensagem sem olhar para eles trocaria um defeito por outro: a
   mensagem nasceria em cima do botao que a pessoa vai tocar em seguida.

   120px vem de MEDICAO, nao de estimativa. A mais alta das tres e a
   `.env-rodape` do detalhe de um envio quando ha duas acoes (a variante
   `--duplo`): 103px em 1280px e em 375px, medidos em 15/09/2026 — a
   primeira tentativa usou 88px, calculados a partir do FAB, e a mensagem
   cobria a barra nas quatro combinacoes. 103 + 17 de respiro = 120.

   Um valor so para as tres barras, de proposito. Sobre a barra curta
   sobra folga, e folga a mais e so ar entre a mensagem e a barra —
   enquanto folga a menos cobre o botao que a pessoa vai tocar.

   `:has()` porque a presenca dessas barras e dinamica (`hidden` entra e
   sai conforme a tela) — e o projeto ja usa `:has()` em css/cadastro.css.
   Em navegador sem suporte a regra inteira e ignorada e a mensagem fica
   nos 16px do canto: continua visivel, so mais perto da barra.
--------------------------------------------------------- */
body:has(.env-fab:not([hidden])) .toast-container:not(.position-fixed),
body:has(.env-rodape:not([hidden])) .toast-container:not(.position-fixed) {
  bottom: calc(120px + env(safe-area-inset-bottom, 0px));
}

/* O Bootstrap 5.3 tambem define .toast-container (com width: max-content).
   Esta regra vem depois e recupera o comportamento esperado no celular.

   LARGURA CHEIA NO CELULAR, mantida de propósito: a mensagem costuma ser
   uma frase inteira ("Pedido enviado ao estoque com sucesso") e, espremida
   em 60% de 375px, ela vira quatro linhas. O risco de cobrir area de toque,
   que existiria com ela colada embaixo, e resolvido de outro jeito — pela
   regra de desvio acima (a mensagem sobe acima da barra de acoes) e pelo
   `pointer-events: none` do container, que deixa passar o toque em tudo o
   que nao for a propria mensagem. Some sozinha em 3 segundos. */
@media (max-width: 575.98px) {
  .toast-container:not(.position-fixed) {
    left: var(--space-sm);
    right: var(--space-sm);
    max-width: none;
    align-items: stretch;
  }

  /* A barra do carrinho so existe no celular. */
  body:has(.cart-mobile-bar) .toast-container:not(.position-fixed) {
    bottom: calc(120px + env(safe-area-inset-bottom, 0px));
  }
}

/* ---------------------------------------------------------
   A MENSAGEM

   Ganhou peso em 15/09/2026 ("as mensagens precisam ter um pouco mais de
   destaque"): no rodape ela passava despercebida. O ganho veio de
   TAMANHO, TIPOGRAFIA, SOMBRA e de um icone que virou selo — nunca de
   mais tempo em tela. Quem ve essas mensagens dezenas de vezes por dia
   nao quer uma que demore a sair.

   `--toast-cor` guarda a cor do ESTADO. A faixa da esquerda e o selo do
   icone bebem dela, entao cada tipo declara a cor UMA vez so.
--------------------------------------------------------- */
.toast-notification {
  --toast-cor: var(--color-text-link);
  /* Duas camadas: o TOM do tipo por cima da superficie solida. Assim o fundo
     fica colorido sem virar transparencia sobre o que estiver atras, e o
     texto continua legivel nos dois temas. */
  background-color: var(--color-surface);
  background-image: linear-gradient(var(--color-info-bg), var(--color-info-bg));
  color: var(--color-text-primary);
  border: 1px solid var(--color-info-border);
  /* 6px: a faixa e o sinal de estado que se le de longe. */
  border-left: 6px solid var(--toast-cor);
  border-radius: var(--radius-md);
  /* Sombra longa: no rodape, sobre cards claros, a sombra media de antes
     nao descolava a mensagem do fundo. */
  box-shadow: var(--shadow-lg);
  padding: 14px 16px;
  font-size: var(--font-size-md);
  /* Mensagem curta ("Salvo.") tambem precisa ter presenca; sem largura
     minima ela virava uma etiqueta perdida no canto. */
  min-width: min(300px, calc(100vw - 32px));
  pointer-events: auto;
  animation: toastEntra .28s cubic-bezier(.2, .9, .3, 1.15);
}

/* O tipo aparece no FUNDO, na faixa e no icone — nao so numa listra fina:
   "salvo com sucesso" tem de se anunciar como sucesso antes da leitura
   (13/09/2026).

   A COR DA FAIXA mudou de familia em 15/09/2026, medindo: as cores de
   BORDA (`--color-success`, `--color-danger`, `--color-primary`) foram
   feitas para contornar caixa, nao para se destacar. `--color-primary`
   (#1D4B9B) na mensagem informativa do tema escuro dava 1,76:1 contra o
   fundo composto (#1d293f) — abaixo do minimo de 3:1 do WCAG 1.4.11 para
   componente de interface. As cores da familia `--color-text-*` ja sao
   afinadas por tema e passam com folga nos oito casos (o pior fica em
   5,23:1; o melhor, 8,42:1). */
.toast-notification.toast-success {
  --toast-cor: var(--color-text-success);
  background-image: linear-gradient(var(--color-success-bg), var(--color-success-bg));
  border-color: var(--color-success-border);
  border-left-color: var(--toast-cor);
}

.toast-notification.toast-error {
  --toast-cor: var(--color-text-error);
  background-image: linear-gradient(var(--color-danger-bg), var(--color-danger-bg));
  border-color: var(--color-danger-border);
  border-left-color: var(--toast-cor);
}

.toast-notification.toast-warning {
  --toast-cor: var(--color-text-warning);
  background-image: linear-gradient(var(--color-warning-bg), var(--color-warning-bg));
  border-color: var(--color-warning-border);
  border-left-color: var(--toast-cor);
}

/* ---------------------------------------------------------
   SELO DO ESTADO

   O desenho ja era diferente por tipo (certo, X, triangulo, "i" — em
   js/utils.js), o que ja atende o WCAG 1.4.1: a informacao nao depende
   so da cor. O que faltava era PESO — num icone de 20px solto ao lado do
   texto, quem olhava de relance so via a cor. Virou um selo de 34px com
   contorno proprio, que se distingue pela FORMA a um metro da tela.
--------------------------------------------------------- */
.toast-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-full);
  /* Superficie solida por baixo: o disco se separa do tom do fundo. */
  background: var(--color-surface);
  border: 2px solid var(--toast-cor);
  color: var(--toast-cor);
}

.toast-icon svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.toast-content {
  display: flex;
  /* `center` e nao `flex-start`: com o selo de 34px ao lado de uma linha
     de texto, alinhar pelo topo deixava o disco "pendurado". Em mensagem
     de duas linhas o selo fica no meio, que tambem le bem. */
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}

.toast-message {
  flex: 1 1 auto;
  min-width: 0;
  /* 600: a frase e o conteudo da mensagem e precisa pesar mais do que o
     texto corrido da tela atras dela. */
  font-weight: 600;
  line-height: 1.4;
  /* Mensagem longa quebra em vez de vazar para fora da tela. */
  overflow-wrap: anywhere;
}

.toast-close {
  flex: 0 0 auto;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--color-text-secondary);
  font-size: 20px;
  line-height: 1;
  /* Alvo de toque confortavel no celular. */
  min-width: 32px;
  min-height: 32px;
}

.toast-close:hover,
.toast-close:focus-visible {
  color: var(--color-text-primary);
}

.toast-close:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

@media (max-width: 768px) {
  .toast-close {
    min-width: 40px;
    min-height: 40px;
  }
}

/* Sai por baixo, pelo mesmo caminho por onde entrou. */
.toast-notification.fade-out {
  opacity: 0;
  transform: translateY(10px) scale(.98);
  transition: opacity .3s ease, transform .3s ease;
}

/* ENTRADA: sobe do rodape com um leve crescimento. Vinha deslizando da
   direita, que era coerente com o canto superior direito; vindo de baixo,
   o movimento aponta para onde a mensagem agora mora e o olho a encontra
   sem procurar. Curto (0,28s) de proposito — destaque e peso visual, nao
   tempo de espera. */
@keyframes toastEntra {
  from { opacity: 0; transform: translateY(16px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Quem pediu menos movimento recebe a mensagem sem deslize e sem
   crescimento — ela simplesmente esta la. O destaque nao depende da
   animacao: o tamanho, o selo, a faixa e a sombra continuam iguais. */
@media (prefers-reduced-motion: reduce) {
  .toast-notification { animation: none; }
  .toast-notification.fade-out { transition: none; }
}