/* Os avisos e a confirmação — os mesmos nas três áreas.
   Antes cada tela resolvia do seu jeito: a esteira tinha um toast bonito, o
   plano usava alert() e confirm() do navegador. Duas linguagens no mesmo
   sistema, e a do plano trava a página inteira.
   Usa os tokens de /app.css: se a tela está no escuro, isto também está. */

/* ------------------------------------------------------------------ aviso */
.ui-avisos{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:110;
  display:flex; flex-direction:column; gap:8px; align-items:center;
  width:min(460px,92vw); pointer-events:none;
}
.ui-aviso{
  width:100%; display:flex; gap:10px; align-items:flex-start;
  background:var(--cor-tinta); color:var(--cor-papel);
  padding:11px 15px; border-radius:var(--raio-p); box-shadow:var(--sombra-flutua);
  font-size:14px; font-weight:600; line-height:1.4;
  opacity:0; transform:translateY(10px); transition:opacity .18s, transform .18s;
  pointer-events:auto;
}
.ui-aviso.aparece{opacity:1; transform:none}
.ui-aviso.bom{background:var(--cor-ok); color:#fff}
.ui-aviso.ruim{background:var(--cor-critico); color:#fff}
.ui-aviso .ui-x{
  margin-left:auto; background:none; border:0; color:inherit; opacity:.75;
  font-size:16px; line-height:1; cursor:pointer; padding:0 2px; flex:none;
}
.ui-aviso .ui-x:hover{opacity:1}

/* ----------------------------------------------------------- confirmação */
/* Fica acima de tudo (120) porque costuma ser aberta de dentro de uma gaveta
   ou de um modal — perguntar "apago mesmo?" atrás da janela não serve. */
.ui-veu{
  position:fixed; inset:0; z-index:120; background:var(--cor-veu);
  display:flex; align-items:center; justify-content:center; padding:var(--esp-4);
}
.ui-caixa{
  width:min(440px,100%); background:var(--cor-superficie); color:var(--cor-tinta);
  border-radius:var(--raio-g); padding:22px; box-shadow:var(--sombra-janela);
  display:flex; flex-direction:column; gap:10px; max-height:90dvh; overflow:auto;
}
.ui-caixa h2{margin:0; font-size:18px; font-weight:700; letter-spacing:-.01em}
.ui-caixa p{margin:0; color:var(--cor-tinta-media); font-size:13.5px; line-height:1.5; white-space:pre-line}
.ui-acoes{display:flex; justify-content:flex-end; gap:9px; margin-top:var(--esp-2); flex-wrap:wrap}
.ui-acoes .btn{min-height:42px}
@media (max-width:420px){
  .ui-acoes{flex-direction:column-reverse}
  .ui-acoes .btn{width:100%}
}

.ui-caixa .field{gap:6px}
.ui-erro{min-height:16px; margin:0; color:var(--cor-critico); font-size:12.5px; font-weight:600}