/* ============================================================
   Aviso (10-09-2026): modal de mensajes de cara al cliente (sitio
   publico y aula del suscriptor). Reemplaza los toast de consola en
   los flujos de pago. Paleta del sitio: azul #003450, cian #0FEFD9.
   Se apila por encima del checkout de Culqi (#culqi-js, z 99999) y
   de blockUI (1000003). Lo usa Js/util/aviso.js.
   ============================================================ */
.aviso {
  position: fixed; inset: 0; z-index: 1000010;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  font-family: Montserrat, system-ui, -apple-system, "Segoe UI", sans-serif;
  opacity: 0; transition: opacity .18s ease;
}
.aviso *, .aviso *::before, .aviso *::after { box-sizing: border-box; }
.aviso--visible { opacity: 1; }
.aviso__fondo { position: absolute; inset: 0; background: rgba(0, 18, 29, .62); backdrop-filter: blur(2px); }
.aviso__caja {
  position: relative; width: 100%; max-width: 420px;
  padding: 30px 28px 26px; border-radius: 18px; background: #fff; color: #003450;
  text-align: center; line-height: 1.5;
  box-shadow: 0 24px 60px -20px rgba(0, 52, 80, .45);
  transform: translateY(8px) scale(.98); transition: transform .18s ease;
}
.aviso--visible .aviso__caja { transform: none; }
.aviso__ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%; margin: 0 0 14px;
}
.aviso__ico svg { width: 28px; height: 28px; display: block; }
.aviso--error .aviso__ico { background: #fdf1ec; color: #b4400c; }
.aviso--exito .aviso__ico { background: #d9fcf5; color: #04756a; }
.aviso--info .aviso__ico { background: #e8f3f8; color: #165a7f; }
.aviso__tit { margin: 0; font-family: inherit; font-size: 19px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; color: #003450; }
.aviso__txt { margin: 10px 0 0; font-size: 14.5px; color: #4a7089; }
.aviso__txt b { color: #003450; }
.aviso__btn {
  margin-top: 22px; height: 44px; padding: 0 26px; border: 0; border-radius: 12px;
  background: #003450; color: #fff; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
  transition: background-color .16s, transform .16s;
}
.aviso__btn:hover { background: #0d4972; transform: translateY(-1px); }
.aviso__btn:focus-visible { outline: 2px solid #06b8a6; outline-offset: 2px; }
.aviso--exito .aviso__btn { background: linear-gradient(90deg, #0FEFD9, #73f4e5); color: #001f30; }
.aviso--exito .aviso__btn:hover { background: linear-gradient(90deg, #73f4e5, #aef4e9); }

/* Espera (cargando): sin boton, no se cierra con clic ni con Escape */
.aviso__spin {
  width: 46px; height: 46px; margin: 0 auto 14px; border-radius: 50%;
  border: 4px solid #d9fcf5; border-top-color: #04756a;
  animation: aviso-giro .8s linear infinite;
}
@keyframes aviso-giro { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .aviso, .aviso__caja { transition: none; }
  .aviso__spin { animation-duration: 1.6s; }
}
@media (max-width: 480px) {
  .aviso__caja { padding: 26px 20px 22px; border-radius: 16px; }
}