/* Painel · avisos de lead novo no celular (componentes/notificacoes.js; usa os tokens de admin.css) */

/* faixa discreta no topo do painel */
.notif-aviso{display:flex; align-items:center; flex-wrap:wrap; gap:10px 14px; margin:0 0 18px; padding:12px 14px 12px 16px;
  border-radius:var(--raio); background:var(--surface); border:1px solid var(--gold-line)}
.notif-icone{display:grid; place-items:center; flex:none; width:36px; height:36px; border-radius:50%; color:var(--acento); background:var(--gold-wash)}
.notif-icone svg{width:18px; height:18px}
.notif-texto{flex:1 1 240px; min-width:0; color:var(--ink-2); font-size:14px; line-height:1.45}
.notif-texto strong{color:var(--ink); font-weight:600}
.notif-acoes{display:flex; flex-wrap:wrap; gap:8px; margin-left:auto}

/* cartão de Minha conta */
.notif-cartao{display:flex; flex-direction:column; gap:10px}
.notif-cartao h2{font:600 17px/1.3 var(--sans); color:var(--ink)}
.notif-status{display:flex; align-items:baseline; gap:9px; color:var(--ink-2); font-weight:500}
.notif-ponto{flex:none; width:9px; height:9px; border-radius:50%; background:var(--ink-dim); transform:translateY(-1px)}
.notif-ponto--ok{background:var(--ok)}
.notif-ponto--alerta{background:var(--alerta)}
.notif-ajuda{font-size:13px; color:var(--ink-soft)}
.notif-acoes--cartao{margin:4px 0 0}

/* celular: botões em linha própria, largos e com alvo de 44px */
@media (max-width:560px){
  .notif-aviso{align-items:flex-start; padding:12px}
  .notif-acoes{width:100%; margin-left:0}
  .notif-acoes .botao{flex:1 1 auto; min-height:44px}
}
@media (pointer:coarse){
  .notif-acoes .botao{min-height:44px}
}