/* ═══════════════════════════════════════════════════════════════════════════
   pwa.css — Aviso de «Instala la app» (PWA)

   Solo se carga cuando la app instalable está activa. Usa los tokens de color
   compartidos (tokens.css) y el mismo lenguaje visual que el resto del sitio:
   esquinas redondeadas, cristal esmerilado, acento morado.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══ PORTAL DE NAVEGACIÓN (TWA/PWA) ══════════════════════════════════════
   No hay barra de carga. El cambio de vista usa la View Transition API cuando
   el navegador la soporta: una transición corta, sin recargar y sin mover la
   barra ni el reproductor. El historial y la posición se controlan en
   navegacion-app.js para que Atrás/Adelante se comporten como una app. */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 180ms;
    animation-timing-function: cubic-bezier(.22, 1, .36, 1);
  }
  html[data-ws-nav-dir="forward"]::view-transition-old(root) {
    animation-name: ws-nav-fundido-sale;
  }
  html[data-ws-nav-dir="forward"]::view-transition-new(root) {
    animation-name: ws-nav-fundido-entra;
  }
  html[data-ws-nav-dir="back"]::view-transition-old(root) {
    animation-name: ws-nav-fundido-sale;
  }
  html[data-ws-nav-dir="back"]::view-transition-new(root) {
    animation-name: ws-nav-fundido-entra;
  }
}

/* El cambio de menú del escritorio es SOLO un fundido. Antes las dos vistas
   entraban y salían desplazadas 18 px en horizontal; eso se percibía como un
   «salto» al cambiar de una sección a otra. Sin transform, la barra y el
   contenido permanecen exactamente en su sitio. */
@keyframes ws-nav-fundido-sale {
  to { opacity: .65; }
}
@keyframes ws-nav-fundido-entra {
  from { opacity: .65; }
}

.pwa-aviso {
  position: fixed;
  z-index: 4000;              /* por encima del bottom-nav móvil y del carrito */
  left: 50%;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  width: min(460px, calc(100vw - 24px));
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px 12px 14px;
  border-radius: 14px;
  background: rgba(24, 24, 27, 0.96);
  border: 1px solid var(--border, #27272a);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--text, #fafafa);
  font-family: Inter, system-ui, -apple-system, sans-serif;
  animation: pwa-aviso-entra 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes pwa-aviso-entra {
  from { opacity: 0; transform: translate(-50%, 14px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

.pwa-aviso-icono {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  background: linear-gradient(135deg, var(--purple, #a855f7), var(--pink, #f472b6));
  box-shadow: 0 4px 14px rgba(var(--purple-rgb), 0.35);
}

.pwa-aviso-texto {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pwa-aviso-texto strong {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.pwa-aviso-texto span {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--text-muted, #a1a1aa);
}

.pwa-aviso-accion {
  flex-shrink: 0;
  padding: 8px 14px;
  border-radius: 9px;
  border: 0;
  background: var(--purple, #a855f7);
  color: #fff;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s, opacity 0.15s;
  white-space: nowrap;
}
.pwa-aviso-accion:hover { transform: translateY(-1px); }
.pwa-aviso-accion:disabled { opacity: 0.65; cursor: default; transform: none; }

.pwa-aviso-cerrar {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  border: 0;
  background: transparent;
  color: var(--text-muted, #a1a1aa);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.pwa-aviso-cerrar:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text, #fafafa);
}

/* Con el carrito abierto el aviso estorba: se aparta a un lado. */
@media (max-width: 520px) {
  .pwa-aviso {
    left: 12px;
    right: 12px;
    width: auto;
    transform: none;
    padding: 10px 10px 10px 12px;
    gap: 10px;
  }
  @keyframes pwa-aviso-entra {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .pwa-aviso-texto span { font-size: 11px; }
  .pwa-aviso-accion { padding: 7px 11px; font-size: 11.5px; }
}

body.cart-open .pwa-aviso { display: none; }

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

/* ═══ CARTEL «GIRA EL TELÉFONO» (app instalada) ═══════════════════════════
   Solo aparece con la app INSTALADA y el teléfono acostado, cuando el
   navegador no sabe bloquear la orientación (varios iPhone). Es lo que hace
   una app nativa: tapa la pantalla y pide volver a vertical. */
.pwa-girar {
  position: fixed;
  inset: 0;
  z-index: 5000;                 /* por encima de todo, incluso del carrito */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px;
  text-align: center;
  background: var(--bg, #0a0a0a);
}
.pwa-girar-icono {
  font-size: 46px;
  line-height: 1;
  animation: pwa-girar-gira 2.2s ease-in-out infinite;
}
.pwa-girar-texto { display: flex; flex-direction: column; gap: 6px; max-width: 320px; }
.pwa-girar-texto strong { font-size: 16px; font-weight: 700; color: var(--text, #fafafa); }
.pwa-girar-texto span { font-size: 12.5px; color: var(--text-muted, #a1a1aa); line-height: 1.5; }
@keyframes pwa-girar-gira {
  0%, 45%   { transform: rotate(0deg); }
  70%, 100% { transform: rotate(-90deg); }
}
@media (prefers-reduced-motion: reduce) {
  .pwa-girar-icono { animation: none; }
}