/* assets/css/ios-install.css - Aviso de instalación para iPhone/iPad (ver assets/js/ui/ios-install.js). */

.ios-install {
  position: fixed; z-index: 1200;
  left: max(1rem, env(safe-area-inset-left)); right: max(1rem, env(safe-area-inset-right));
  bottom: calc(var(--ios-install-lift, 0px) + max(1rem, env(safe-area-inset-bottom)));
  max-width: 28rem; margin-inline: auto;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 0.2rem 0.85rem;
  padding: 0.95rem 0.6rem 0.95rem 0.95rem;
  border-radius: 1.5rem;
  color: #12161c; background: rgb(255 255 255 / 0.78); border: 1px solid rgb(255 255 255 / 0.6);
  -webkit-backdrop-filter: saturate(1.6) blur(24px); backdrop-filter: saturate(1.6) blur(24px);
  box-shadow: 0 0 0 1px rgb(15 23 42 / 0.06), 0 18px 40px -12px rgb(15 23 42 / 0.35);
  opacity: 0; transform: translateY(1.25rem) scale(0.98);
  transition: opacity 0.35s var(--ease-out, ease-out), transform 0.45s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}
.ios-install.is-in { opacity: 1; transform: none; }

:root[data-theme="dark"] .ios-install, .dark .ios-install {
  color: #f1f3f6; background: rgb(24 28 34 / 0.78); border-color: rgb(255 255 255 / 0.1);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.05), 0 18px 40px -12px rgb(0 0 0 / 0.7);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not(.light) .ios-install { color: #f1f3f6; background: rgb(24 28 34 / 0.78); border-color: rgb(255 255 255 / 0.1); box-shadow: 0 0 0 1px rgb(255 255 255 / 0.05), 0 18px 40px -12px rgb(0 0 0 / 0.7); }
}

.ios-install__icon { width: 3rem; height: 3rem; border-radius: 0.8rem; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.08), 0 4px 10px -4px rgb(0 0 0 / 0.35); }
.ios-install__body { min-width: 0; padding-top: 0.1rem; }
.ios-install__title { margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; }
.ios-install__sub { margin: 0.1rem 0 0; font-size: 0.86rem; line-height: 1.35; opacity: 0.7; }

/* La instrucción: línea con los iconos del gesto (Compartir → Añadir a pantalla de inicio) */
.ios-install__steps {
  grid-column: 1 / -1; display: block; margin: 0.45rem 0.35rem 0 0; padding: 0.65rem 0.8rem;
  border-radius: 0.9rem; background: rgb(15 23 42 / 0.06); font-size: 0.88rem; line-height: 1.9;
}
:root[data-theme="dark"] .ios-install__steps, .dark .ios-install__steps { background: rgb(255 255 255 / 0.08); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not(.light) .ios-install__steps { background: rgb(255 255 255 / 0.08); } }
.ios-install__steps strong { font-weight: 700; }
.ios-install__glyph { display: inline-block; vertical-align: -0.32rem; margin-inline: 0.15rem; padding: 0.15rem; width: 1.55rem; height: 1.55rem; border-radius: 0.45rem; color: #0a84ff; background: rgb(10 132 255 / 0.12); }

.ios-install__close {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin: -0.35rem 0 0; padding: 0;
  border: 0; border-radius: 9999px; color: inherit; background: transparent; opacity: 0.55; cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: opacity 0.15s, background-color 0.15s;
}
.ios-install__close:hover, .ios-install__close:focus-visible { opacity: 1; background: rgb(127 127 127 / 0.16); outline: none; }
.ios-install__close:active { opacity: 1; background: rgb(127 127 127 / 0.26); }

@media (prefers-reduced-motion: reduce) {
  .ios-install { transform: none; transition: opacity 0.2s linear; }
}
@media print { .ios-install { display: none; } }