/* CONSERVE · el aviso para instalar la app y el de versión nueva.
   Se muestra sobre las dos páginas (plataforma y portal), así que solo usa las variables de
   color de la marca: en tema oscuro se adapta solo. En el teléfono se apoya arriba de la
   barra inferior; en el computador se queda en la esquina. */

.aviso-app {
  position: fixed; z-index: 55;
  left: 12px; right: 12px; bottom: calc(66px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: var(--tarjeta); color: var(--tinta);
  border: 1px solid var(--linea); border-radius: var(--radio);
  box-shadow: 0 2px 6px rgba(11, 59, 52, .1), 0 18px 40px -16px rgba(11, 59, 52, .35);
  opacity: 0; transform: translateY(14px);
  transition: opacity .22s ease-out, transform .22s ease-out;
}

.aviso-app.visible { opacity: 1; transform: none; }

.aviso-app img { width: 34px; height: 34px; flex: none; }

.aviso-app-texto { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.aviso-app-texto b { font-size: 13.5px; font-weight: 650; }
.aviso-app-texto span { font-size: 12.5px; color: var(--tinta-suave); line-height: 1.35; }

.aviso-app-botones { display: flex; gap: 8px; flex: none; }
.aviso-app-botones .btn { padding: 8px 13px; font-size: 12.5px; }

/* En pantallas angostas el texto necesita el ancho completo y los botones bajan debajo. */
@media (max-width: 560px) {
  .aviso-app { flex-wrap: wrap; }
  .aviso-app-texto { flex-basis: calc(100% - 46px); }
  .aviso-app-botones { width: 100%; justify-content: flex-end; }
}

/* En el computador no hay barra inferior: el aviso va a la esquina. */
@media (min-width: 861px) {
  .aviso-app { left: auto; right: 22px; bottom: 22px; width: 420px; }
}

@media (prefers-reduced-motion: reduce) {
  .aviso-app { transition: none; transform: none; }
}

/* Al imprimir un comprobante el aviso estorba. */
@media print {
  .aviso-app { display: none !important; }
}