/* PrestoInventario — PWA UI layer (install prompt, update toast, app-mode polish).
 * Everything here is opt-in: the install chip and update toast are hidden until
 * pwa.js reveals them, and the app-like tweaks only apply to the INSTALLED app
 * (display-mode: standalone). The website in a normal browser is unchanged. */

:root {
  --pwa-brown: #7B3F00;
  --pwa-brown-dark: #5a3921;
  --pwa-gold: #F5A623;
}

/* ---------- Install chip (discreet, bottom-left) ---------- */
.pwa-install {
  position: fixed;
  left: max(16px, env(safe-area-inset-left));
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 1030;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px 6px 6px 10px;
  background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(123, 63, 0, .18);
  border-radius: 999px;
  box-shadow: 0 10px 28px rgba(42, 26, 10, .22);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: pwa-rise .35s cubic-bezier(.2, .7, .2, 1) both;
}
.pwa-install[hidden] { display: none; }

.pwa-install__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  background: transparent;
  color: var(--pwa-brown-dark);
  font: 600 .92rem/1 inherit;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 999px;
  transition: color .15s ease, transform .12s ease;
}
.pwa-install__cta img { border-radius: 7px; display: block; }
.pwa-install__cta:hover { color: var(--pwa-brown); }
.pwa-install__cta:active { transform: scale(.98); }

.pwa-install__close {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #9a8675;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.pwa-install__close:hover { background: rgba(123, 63, 0, .1); color: var(--pwa-brown); }

/* ---------- Update toast (bottom-center) ---------- */
.pwa-update {
  position: fixed;
  left: 50%;
  bottom: calc(20px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 1040;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: calc(100% - 32px);
  padding: 12px 14px 12px 18px;
  background: #1f1f1f;
  color: #fff;
  border-radius: 14px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .4);
  animation: pwa-rise .35s cubic-bezier(.2, .7, .2, 1) both;
}
.pwa-update[hidden] { display: none; }
.pwa-update__text { font-size: .92rem; }
.pwa-update__btn {
  border: 0;
  background: var(--pwa-gold);
  color: #2a1a0a;
  font-weight: 700;
  font-size: .9rem;
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: filter .12s ease, transform .12s ease;
}
.pwa-update__btn:hover { filter: brightness(1.05); }
.pwa-update__btn:active { transform: scale(.98); }

@keyframes pwa-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.pwa-update { /* keep the centering transform after the rise animation */
  animation-name: pwa-rise-center;
}
@keyframes pwa-rise-center {
  from { opacity: 0; transform: translate(-50%, 14px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .pwa-install, .pwa-update { animation: none; }
}

/* ---------- Installed-app polish (only when launched standalone) ---------- */
@media all and (display-mode: standalone) {
  /* Respect iPhone safe areas so the brand chrome looks native. */
  header { padding-top: env(safe-area-inset-top); }
  footer { padding-bottom: calc(env(safe-area-inset-bottom) + 8px); }
  main.container {
    padding-left: max(.75rem, env(safe-area-inset-left));
    padding-right: max(.75rem, env(safe-area-inset-right));
  }
  /* App-like scrolling: no rubber-band reveal of the page chrome. */
  body { overscroll-behavior-y: contain; }
  /* No need to advertise install inside the installed app. */
  .pwa-install { display: none !important; }
}