/* Mi Asistente · el acuse al centro · para producción — 13/09/2026
   Va con `panel-acuse.js`. Archivos nuevos, no reemplazan nada.

   `position:fixed`, NUNCA `absolute`. Montado sobre `.panel` —que en Inicio
   mide más de 2.000 px— un `absolute` con `inset:0` centra el acuse en el
   DOCUMENTO, no en la ventana: queda cientos de píxeles abajo del fold y no se
   ve. Medido una vez así: el acuse se abría correctamente y el emprendedor no
   veía nada. «En el medio» quiere decir en el medio de lo que se ve.

   `z-index:200` para quedar por ENCIMA de los cajones (120): hay rutas que
   muestran el acuse sin cerrarlos, y ahí quedaba tapado. */
/* 14-sep-2026 (Dev, "la ventana de notificación sigue lenta y fea"): sin
   transition -- `display:none→flex` no se puede animar, aparecía y
   desaparecía de un salto. Es el mismo bug, byte a byte, que tenía
   `.acuse-ov`/`.acuse` en panel.html (dos implementaciones del mismo
   componente, escritas por separado el mismo 13-sep). Mismo arreglo acá:
   el patrón que ya usa `.modal-ov`/`.modal` -- mismo color, mismo
   tamaño, mismos 180ms, sólo se agrega el fundido. */
.ma-acuse-ov{position:fixed;inset:0;z-index:200;display:flex;align-items:center;
  justify-content:center;padding:24px;background:rgba(11,10,9,.55);
  opacity:0;pointer-events:none;transition:opacity 70ms}
.ma-acuse-ov.open{opacity:1;pointer-events:auto}

.ma-acuse{width:100%;max-width:330px;display:flex;flex-direction:column;align-items:center;
  text-align:center;gap:10px;padding:26px 22px 20px;border-radius:16px;
  background:var(--graphite-950);border:1px solid var(--graphite-700);
  box-shadow:0 18px 60px rgba(0,0,0,.5);
  transform:translateY(10px);transition:transform 90ms cubic-bezier(0,0,.2,1)}
.ma-acuse-ov.open .ma-acuse{transform:none}
.ma-acuse .ic{width:46px;height:46px;border-radius:99px;display:flex;align-items:center;
  justify-content:center;font-size:19px}
.ma-acuse.t-ok .ic{color:var(--green-live);background:var(--green-soft);
  border:1px solid var(--green-border)}
.ma-acuse.t-vio .ic{color:var(--violet-text);background:var(--violet-soft);
  border:1px solid var(--violet-border)}
.ma-acuse.t-amb .ic{color:var(--gold);background:var(--gold-soft);
  border:1px solid rgba(232,184,76,.30)}
.ma-acuse.t-mal .ic{color:var(--coral);background:var(--coral-soft);
  border:1px solid var(--coral-border)}
.ma-acuse b{font-size:15px;font-weight:600;color:var(--cloud-100);line-height:1.3}
/* El detalle sólo ocupa lugar si hay: un párrafo vacío deja un hueco raro
   debajo del título en los avisos de una sola frase. */
.ma-acuse p{margin:0;font-size:12.5px;line-height:1.55;color:var(--cloud-500);text-wrap:pretty}
.ma-acuse p:empty{display:none}
.ma-acuse button{margin-top:6px;min-height:40px;padding:0 22px;border-radius:11px;
  border:1px solid var(--violet-700);background:var(--violet-700);color:#fff;
  font-family:var(--sans);font-size:13px;font-weight:600;cursor:pointer}
.ma-acuse button:hover{background:var(--violet-800);border-color:var(--violet-800)}

/* ── En la mini-app ────────────────────────────────────────────────────────
   Se apoya abajo, que es donde cae el pulgar y donde Telegram pone sus propias
   hojas — arriba en el medio obliga a estirar la mano. El botón a todo el
   ancho y 44 px: con el pulgar no se apunta a uno de 40 centrado.
   Tope de 390 px, que es el ancho del teléfono: con `max-width:100%` la hoja
   se estira a lo que mida la ventana en la vista de escritorio. */
html.tg-mode .ma-acuse-ov{align-items:flex-end;padding:0}
html.tg-mode .ma-acuse{max-width:390px;border-radius:20px 20px 0 0;
  padding:24px 20px calc(20px + env(safe-area-inset-bottom,0px));
  border-bottom:0;box-shadow:0 -12px 40px rgba(0,0,0,.45)}
html.tg-mode .ma-acuse button{width:100%;min-height:44px;margin-top:10px}