/**
 * Mensagens ao usuário — faixa de flash/AJAX (td_msg) e confirmação em faixa (td_confirmar).
 * Porte do padrão wwhats (ww_msg / ww_confirmar) — Fase 0 de
 * tandor-vault/95_to-do/20260806 padrao-mensagens-usuario.md.
 *
 * Consome os tokens semânticos --tandor-ok-*/--tandor-alerta-*/--tandor-erro-* definidos em
 * tandor-theme.css e tandor-theme2.css (achado A4) — nunca cor literal aqui.
 * Carregado em base.html depois do tema.
 */

/* ===== Faixa de mensagem (flash + td_msg AJAX) =============================================
   Três tons soft. Sem auto-dismiss (D2 do plano) — quem fecha é o usuário, no × ou navegando. */
.td-msg-host{
  display:flex;flex-direction:column;align-items:stretch;
  width:100%;margin:0 0 1rem;
}
.td-msg-host:not(:has(.td-msg)){display:none}
.td-msg{
  display:flex;flex-wrap:wrap;align-items:flex-start;gap:.35rem .75rem;
  margin:.4rem 0 .65rem;padding:.6rem .85rem;
  border-radius:var(--tandor-radius-sm);border:1px solid;font-size:.9rem;line-height:1.35;
}
.td-msg--ok{background:var(--tandor-ok-bg);border-color:var(--tandor-ok-texto)}
.td-msg--alerta{background:var(--tandor-alerta-bg);border-color:var(--tandor-alerta-texto)}
.td-msg--erro{background:var(--tandor-erro-bg);border-color:var(--tandor-erro-texto)}
.td-msg--small{font-size:.85rem;padding:.5rem .75rem}
.td-msg-texto{flex:1 1 14rem;min-width:0;color:var(--tandor-text)}
.td-msg-titulo{display:block;color:var(--tandor-text);font-weight:600}
.td-msg-detalhe{display:block;color:var(--tandor-text-2);font-weight:400}
.td-msg-fechar{
  flex-shrink:0;margin-left:auto;border:0;background:transparent;color:var(--tandor-text-3);
  font-size:1.35rem;line-height:1;padding:.1rem .35rem;cursor:pointer;border-radius:6px;
}
.td-msg-fechar:hover{color:var(--tandor-text);background:var(--tandor-border)}

/* ===== Confirmação em faixa (td_confirmar.js) — substitui confirm() nativo ==================
   Caixa em tom "alerta" (momento que pede atenção); o botão de ação é que carrega o tom real
   (perigo = erro, "acao" = ok) — não usamos o verde do WhatsApp aqui (decisão do épico). */
.td-confirmar{
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;flex-shrink:0;
  margin:.4rem 0;padding:.6rem .85rem;
  background:var(--tandor-alerta-bg);border:1px solid var(--tandor-alerta-texto);
  border-radius:var(--tandor-radius-sm);
}
.td-confirmar:focus{outline:none}
.td-confirmar-texto{flex:1 1 18rem;min-width:0;font-size:.9rem;line-height:1.35}
.td-confirmar-pergunta{display:block;color:var(--tandor-text)}
.td-confirmar-detalhe{display:block;color:var(--tandor-text-2);font-weight:400}
.td-confirmar-acoes{display:flex;gap:.4rem;margin-left:auto;flex-shrink:0}
/* 44px de alvo de toque: a confirmação é o último ponto onde errar o dedo custa caro. */
.td-confirmar-acoes .btn{min-height:44px;padding-inline:1rem;border-radius:10px}
.td-confirmar-perigo{
  background:var(--tandor-erro-texto);border:1px solid var(--tandor-erro-texto);color:#fff;font-weight:600;
}
.td-confirmar-perigo:hover,.td-confirmar-perigo:focus{background:#8f1818;border-color:#8f1818;color:#fff}
.td-confirmar-acao{
  background:var(--tandor-ok-texto);border:1px solid var(--tandor-ok-texto);color:#fff;font-weight:600;
}
.td-confirmar-acao:hover,.td-confirmar-acao:focus{background:#0f5c2c;border-color:#0f5c2c;color:#fff}
/* A faixa nasce numa <tr> própria logo abaixo da linha: sem o reset, o zebrado e o hover da
   tabela pintam por baixo dela. */
.td-confirmar-linha>td{background:transparent;padding:.15rem .5rem;border-top:0}
.table-hover>tbody>tr.td-confirmar-linha:hover>td{background:transparent}

/* ===== Flash em modal (SÓ login) ============================================================
   Restaura o overlay que existia antes da Fase 2 (era .login-flash-overlay com Bootstrap
   alert-*), agora sobre os tons td-msg. Exceção consciente ao D2: vale só para a tela de
   login, onde o flash é o único retorno da autenticação. Ver macro td_flashes_modal. */
.td-msg-overlay{
  position:fixed;inset:0;z-index:10050;
  display:flex;align-items:center;justify-content:center;
  padding:24px;background:rgba(15,23,42,.42);
  animation:tdMsgOverlayIn 200ms ease-out;
}
.td-msg-overlay--soft{background:rgba(15,23,42,.20)}
.td-msg--modal{
  max-width:520px;width:100%;margin:0;
  padding:18px 20px;font-size:.95rem;line-height:1.45;
  border-radius:10px;box-shadow:0 12px 40px rgba(0,0,0,.22);
}
.td-msg-rotulo{display:block;margin-bottom:.5rem;font-weight:700;font-size:1rem;color:var(--tandor-text)}
.td-msg--modal.td-msg--ok .td-msg-rotulo{color:var(--tandor-ok-texto)}
.td-msg--modal.td-msg--alerta .td-msg-rotulo{color:var(--tandor-alerta-texto)}
.td-msg--modal.td-msg--erro .td-msg-rotulo{color:var(--tandor-erro-texto)}

@keyframes tdMsgOverlayIn{from{opacity:0}to{opacity:1}}

@media (max-width:768px){
  .td-msg-overlay{padding:16px}
  .td-msg--modal{font-size:.9rem}
}