/* ==========================================================================
   instalar-app.css — Cartel "Instalá la aplicación"
   ==========================================================================
   Lo dibuja assets/js/instalar-app.js. Sirve para los dos lados:

     · Tienda  → .qlapp            (negro y dorado, igual que styles.css)
     · Panel   → .qlapp.qlapp-panel (marrón y dorado, igual que el panel)

   Sobre las animaciones: solo se animan transform y opacity, que el
   navegador resuelve sin repintar. Nada de filtros ni sombras animadas,
   que es lo que traba las PC del local.

   Sobre el z-index: 4800 en la tienda queda POR DEBAJO del visor de fotos
   (5000) y de los avisos de "agregado al carrito" (9999), así el cartel
   nunca tapa algo importante. En el panel, 9500 queda por debajo de los
   modales y del aviso de sesión vencida.
   ========================================================================== */

/* El cartel trae su propio box-sizing: así mide igual en la tienda y en el
   panel, sin depender del reset de cada lado. */
.qlapp, .qlapp *{ box-sizing:border-box; }

.qlapp{
  position:fixed;
  z-index:4800;
  left:12px; right:12px; bottom:12px;
  max-width:none;
  background:linear-gradient(160deg,#191920 0%,#0F0F13 100%);
  border:1px solid rgba(212,175,55,.38);
  border-radius:16px;
  box-shadow:0 18px 50px rgba(0,0,0,.62), 0 0 0 1px rgba(255,255,255,.02) inset;
  color:#F2EEE4;
  font-family:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  padding:16px 16px 14px;
  /* Entra desde abajo. Arranca oculto y sin ocupar el lugar del tacto. */
  opacity:0;
  transform:translateY(22px);
  transition:opacity .34s ease, transform .34s cubic-bezier(.22,.85,.3,1);
  pointer-events:none;
  padding-bottom:calc(14px + env(safe-area-inset-bottom,0px));
}
.qlapp.qlapp-visible{ opacity:1; transform:translateY(0); pointer-events:auto; }

@media (min-width:641px){
  /* En escritorio: tarjeta abajo a la IZQUIERDA, para no chocar con los
     avisos del carrito, que salen abajo a la derecha. */
  .qlapp{ left:24px; right:auto; bottom:24px; width:392px; padding:18px 18px 16px; }
  /* En el panel es al revés: a la izquierda está el menú lateral y taparlo
     molesta; los avisos del panel salen arriba a la derecha, así que abajo
     a la derecha no le pisa nada a nadie. */
  .qlapp.qlapp-panel{ left:auto; right:24px; }
}
@media (prefers-reduced-motion:reduce){
  .qlapp{ transition:none; transform:none; }
}

/* ── Encabezado: ícono + textos ───────────────────────────────────────── */
.qlapp-fila{ display:flex; gap:14px; align-items:flex-start; }

.qlapp-ico{
  width:54px; height:54px; flex:0 0 54px;
  border-radius:14px; display:block;
  box-shadow:0 4px 14px rgba(0,0,0,.5);
}

.qlapp-tit{
  font-family:'Playfair Display',Georgia,serif;
  font-size:1.06rem; font-weight:700; line-height:1.25;
  color:#F0DFA8; margin:1px 0 5px; padding-right:22px;
}
.qlapp-txt{ font-size:.845rem; line-height:1.5; color:#B4ADA0; }

/* ── Botones ──────────────────────────────────────────────────────────── */
.qlapp-botones{ display:flex; gap:10px; margin-top:14px; }

.qlapp-btn{
  font:inherit; font-size:.87rem; font-weight:700; letter-spacing:.3px;
  border:0; cursor:pointer; border-radius:10px; padding:12px 18px;
  transition:transform .16s ease, opacity .16s ease;
}
.qlapp-btn:active{ transform:translateY(1px); }

.qlapp-si{
  flex:1;
  color:#171308;
  background:linear-gradient(135deg,#F0DFA8 0%,#D4AF37 45%,#A9832A 100%);
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
}
.qlapp-si svg{ width:17px; height:17px; flex:0 0 17px; }

.qlapp-no{
  color:#B4ADA0; background:transparent;
  border:1px solid rgba(255,255,255,.14);
}
.qlapp-no:hover{ color:#F2EEE4; border-color:rgba(212,175,55,.42); }

/* ── Cerrar ───────────────────────────────────────────────────────────── */
.qlapp-x{
  position:absolute; top:9px; right:9px;
  width:30px; height:30px; border:0; border-radius:9px; cursor:pointer;
  background:transparent; color:#837C70; font-size:19px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition:color .16s ease, background .16s ease;
}
.qlapp-x:hover{ color:#F0DFA8; background:rgba(255,255,255,.06); }

/* ── Pasos para iPhone (Safari no tiene botón de instalar) ────────────── */
.qlapp-pasos{ display:none; margin-top:14px; }
.qlapp.qlapp-ios-abierto .qlapp-pasos{ display:block; }
.qlapp.qlapp-ios-abierto .qlapp-si{ display:none; }

.qlapp-paso{
  display:flex; align-items:center; gap:11px;
  font-size:.85rem; line-height:1.45; color:#D9D2C4;
  padding:11px 12px; border-radius:11px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(212,175,55,.14);
}
.qlapp-paso + .qlapp-paso{ margin-top:8px; }
.qlapp-paso b{ color:#F0DFA8; font-weight:700; }
.qlapp-paso .qlapp-n{
  flex:0 0 22px; width:22px; height:22px; border-radius:50%;
  background:rgba(212,175,55,.16); color:#F0DFA8;
  font-size:.72rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.qlapp-paso svg{ width:19px; height:19px; flex:0 0 19px; color:#D4AF37; }

/* ── Variante PANEL ───────────────────────────────────────────────────── */
.qlapp.qlapp-panel{
  z-index:9500;
  background:linear-gradient(160deg,#2A251C 0%,#1A1610 100%);
  border-color:rgba(212,175,55,.35);
  color:#F0E3C0;
}
.qlapp.qlapp-panel .qlapp-txt{ color:#A89E8C; }
.qlapp.qlapp-panel .qlapp-no{ color:#A89E8C; border-color:rgba(240,227,192,.16); }
.qlapp.qlapp-panel .qlapp-no:hover{ color:#F0E3C0; }
.qlapp.qlapp-panel .qlapp-paso{ color:#E3D9C4; background:rgba(255,255,255,.04); }

/* ── Enlace "Instalar la app" del pie de página ───────────────────────────
   Nace escondido: lo enciende instalar-app.js solo si el navegador de quien
   está mirando puede instalar de verdad. Mostrarlo siempre sería prometer
   algo que en la mitad de los casos no pasa nada al tocarlo. */
.qlapp-enlace{ display:none; }
.qlapp-enlace.qlapp-enlace-visible{ display:block; }