/* janela de aviso de conexão — js/ui/aviso-erro.js (modelo: mockups/erro-servidor/) */
.aviso-erro{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:16px;
  background:rgba(3,10,20,.72);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);animation:ae-entra .2s ease}
.aviso-erro.oculto{display:none}
@keyframes ae-entra{from{opacity:0}to{opacity:1}}
.ae-caixa{position:relative;width:min(620px,100%);max-height:calc(100dvh - 32px);overflow:auto;padding:0 28px 24px;border-radius:24px;text-align:center;
  background:linear-gradient(180deg,rgba(9,30,54,.98),rgba(6,20,38,.99));color:#e6f1ff;font-family:var(--mi-fonte,inherit);
  border:2px solid rgba(34,211,238,.75);box-shadow:0 0 0 1px rgba(6,26,48,.9),0 0 28px rgba(34,211,238,.35),0 20px 60px rgba(0,0,0,.65)}
.ae-canto{position:absolute;width:26px;height:10px;background:#22d3ee;box-shadow:0 0 10px rgba(34,211,238,.8);border-radius:2px}
.ae-canto.c1{left:14px;top:14px;transform:skewX(-35deg)}
.ae-canto.c2{right:14px;top:14px;transform:skewX(35deg)}
.ae-canto.c3{left:14px;bottom:14px;transform:skewX(35deg)}
.ae-canto.c4{right:14px;bottom:14px;transform:skewX(-35deg)}
.ae-arte{display:block;width:100%;max-width:500px;margin:6px auto 0;pointer-events:none;user-select:none}
.ae-codigo{font-size:38px;font-weight:900;letter-spacing:1px;line-height:1;margin-top:4px}
.ae-codigo em{font-style:normal;color:#f43f5e;text-shadow:0 0 14px rgba(244,63,94,.7)}
.ae-titulo{font-size:17px;font-weight:800;margin:8px 0 6px}
.ae-texto{font-size:13px;color:#8fb4d8;line-height:1.5;margin:0 0 16px}
.ae-texto b{color:#22d3ee}
.ae-botoes{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ae-botoes.um{grid-template-columns:1fr}
.ae-botoes.oculto{display:none}
.ae-botoes .mi-bt{min-height:46px;font-size:12.5px;letter-spacing:1.3px}
.ae-botoes .mi-bt svg{width:18px;height:18px}
.ae-barra{height:6px;border-radius:99px;background:rgba(4,14,26,.8);border:1px solid rgba(47,127,191,.5);overflow:hidden;margin:2px 0 8px}
.ae-barra.oculto{display:none}
.ae-barra i{display:block;height:100%;width:0;background:linear-gradient(90deg,#22d3ee,#67e8f9);box-shadow:0 0 8px rgba(34,211,238,.8)}
.ae-barra.anda i{transition:width var(--dur,2.5s) linear;width:100%}
@media (max-width:520px){
  .ae-caixa{padding:0 16px 18px;border-radius:18px}
  .ae-codigo{font-size:30px}
  .ae-titulo{font-size:15px}
  .ae-botoes{grid-template-columns:1fr;gap:8px}
}