/* Carteles de aviso (app/ui/avisos.js): reemplazan el alert() nativo. Centrado, con ícono y color
   según el tipo: listo (cian/verde), no se pudo (rojo) y aviso (azul). */
/* Encima de todas las ventanas de la app, también de la hoja del selector (.sl-bg, 1100): una pregunta
   que llega con la hoja abierta se ve y se contesta primero (ui/atras.js la cierra antes que la hoja).
   --kb es lo que tapa el teclado del celular (app/ui/keyboard.js: iPhone y Chrome de Android lo abren
   encima de la página sin achicarla): el cartel se centra en lo que queda arriba, así en un pedir()
   el campo y los botones no quedan debajo del teclado. */
.av-bg { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 20px 20px calc(20px + var(--kb, 0px));
  background: rgba(0,0,0,.55); opacity: 0; transition: opacity var(--duration-frequent) ease; }
.av-bg.show { opacity: 1; }
/* Al tocar «Entendido» se va al toque: deja pasar los toques mientras se desvanece. */
.av-bg.closing { opacity: 0; pointer-events: none; }
.av-card { --av: var(--gize-blue); width: min(360px, 100%); max-height: 100%; overflow-y: auto; overscroll-behavior: contain; text-align: center; background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-card); padding: 26px 22px 20px; box-shadow: 0 18px 50px rgba(0,0,0,.4);
  transform: translateY(8px) scale(.96); transition: transform var(--duration-standard) var(--ease-drawer); }
.av-bg.show .av-card { transform: none; }
.av-ok { --av: var(--gize-success); }
.av-err { --av: var(--gize-danger); }
.av-ico { width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: var(--av); background: color-mix(in srgb, var(--av) 14%, transparent); border: 1px solid color-mix(in srgb, var(--av) 40%, transparent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--av) 25%, transparent); }
.av-ico svg { width: 26px; height: 26px; }
.av-tit { font-size: 17px; font-weight: 800; color: var(--txt); margin-bottom: 6px; }
.av-txt { font-size: var(--text-body); line-height: 1.45; color: var(--txt-2); overflow-wrap: anywhere; max-height: 50vh; overflow-y: auto; }
.av-txt p { margin: 0 0 8px; }
.av-txt p:last-child { margin-bottom: 0; }
.av-btn { margin-top: 18px; width: 100%; padding: 12px; border: 0; border-radius: var(--r-btn); cursor: pointer; font: inherit; font-weight: 700;
  font-size: var(--text-emphasis); color: #04121a; background: var(--av); }
.av-btn:focus-visible { outline: 2px solid var(--av); outline-offset: 3px; }
/* Confirmar: dos botones; en peligro la acción va en rojo. */
.av-btns { display: flex; gap: 10px; margin-top: 18px; }
.av-btns .av-btn { margin-top: 0; flex: 1; }
.av-sec { background: transparent; color: var(--txt); border: 1px solid var(--border); }
.av-sec:hover { background: color-mix(in srgb, var(--txt) 8%, transparent); }
.av-err .av-go { color: #fff; }
@media (prefers-reduced-motion: reduce) { .av-bg, .av-card { transition: none; } }
.av-in { margin-top: 14px; width: 100%; box-sizing: border-box; padding: 12px; border-radius: var(--r-box); border: 1px solid var(--border);
  background: var(--card-2); color: var(--txt); font: inherit; font-size: var(--text-body); }
.av-in:focus { outline: 2px solid var(--av); outline-offset: 1px; }