/* ==========================================================================
   El cartel de "instalá la aplicación"
   Lo dibuja assets/js/instalar.js. Se carga después de site.css o de
   admin.css: los colores, las tipografías y los botones (.btn) salen de ahí,
   así el cartel no parece pegado de otro sitio.

   Dos variantes:
     .instalar--sitio   web pública
     .instalar--panel   panel

   DÓNDE SE APOYA, QUE ACÁ TIENE HISTORIA. El borde de abajo del sitio está
   ocupado: en el celular hay una barra fija con WhatsApp y "Reservar turno"
   (.barra-movil), y a la derecha vive el asistente —el botón, su invitación
   y el panel de chat—. Por eso el cartel va:

     · en escritorio, abajo a la IZQUIERDA, que es lo único libre;
     · en el celular, por ENCIMA de la barra fija;
     · y nunca al mismo tiempo que la invitación del asistente: eso lo
       resuelve el JS, que espera a que se cierre.

   Movimiento: solo transform y opacity, como el resto del sitio.
   ========================================================================== */

.instalar{
  position:fixed; z-index:76;
  left:12px; right:12px; bottom:12px;
  background:var(--blanco,#fff);
  border:1px solid var(--linea-tibia,#ECE6F6);
  border-radius:var(--r-lg,22px);
  /* El hilo lila del borde: color en hilo, nunca en bloque. */
  box-shadow:var(--sombra-alta,0 34px 64px -26px rgba(26,24,56,.34)),
             0 0 0 1px rgba(169,139,216,.18);
  padding:16px 16px 14px;
  /* Arranca escondido y sin recibir toques, para no tapar nada mientras no
     se lo muestra. */
  opacity:0; transform:translateY(20px); pointer-events:none;
  transition:opacity .3s var(--curva,ease), transform .3s var(--curva,ease);
}
.instalar.on{opacity:1; transform:none; pointer-events:auto}

/* En el celular el borde de abajo tiene tres inquilinos, y cada uno tiene su
   altura fijada en site.css: la barra de WhatsApp / Reservar turno (abajo del
   todo), el botón del asistente (a 92 px) y su invitación (a 150 px). El
   cartel se apoya en ese mismo renglón de 150 px —el de la invitación—, y por
   eso el JS cierra la invitación cuando le toca aparecer: el lugar es uno
   solo y no pueden estar los dos. */
.instalar--sitio{bottom:calc(150px + env(safe-area-inset-bottom,0px))}

@media (min-width:901px){
  .instalar{left:22px; right:auto; bottom:24px; width:390px; padding:18px 18px 16px}
  /* En escritorio ya no hay barra fija: vuelve abajo del todo, a la
     izquierda, lejos del asistente. */
  .instalar--sitio{bottom:24px}
  /* En el panel, a la derecha: a la izquierda está el menú lateral. */
  .instalar--panel{left:auto; right:24px}
}
@media (prefers-reduced-motion:reduce){
  .instalar{transition:none; transform:none}
}

/* ── Ícono y textos ──────────────────────────────────────────────────── */
.instalar__fila{display:flex; gap:14px; align-items:flex-start}

.instalar__ico{width:54px; height:54px; flex:none; border-radius:15px; display:block;
               box-shadow:0 10px 22px -14px rgba(26,24,56,.8), 0 0 0 1px rgba(169,139,216,.22)}

.instalar__tit{font-family:var(--display,Georgia,serif); font-size:1.06rem; font-weight:600;
               line-height:1.25; color:var(--noche,#1A1838); margin:2px 0 5px; padding-right:24px}
.instalar__txt{font-size:.85rem; line-height:1.5; color:var(--carbon-55,rgba(30,29,53,.56))}

/* ── Botones: los del sitio, sin inventar ninguno ────────────────────── */
.instalar__acciones{display:flex; gap:10px; margin-top:14px}
.instalar__acciones .btn{flex:1 1 auto; padding:12px 20px; font-size:.86rem}
/* El tamaño del ícono va sí o sí: un <svg> con viewBox pero sin medidas el
   navegador lo dibuja a 300x150, y el `svg{max-width:100%}` del sitio lo
   estira a todo el ancho del botón. */
.instalar .btn svg{width:18px; height:18px; flex:none}

/* ── Cerrar ──────────────────────────────────────────────────────────── */
.instalar__x{position:absolute; top:9px; right:9px; width:30px; height:30px;
             border:0; border-radius:50%; background:transparent; cursor:pointer;
             color:var(--humo,#6B6985); font-size:20px; line-height:1;
             display:flex; align-items:center; justify-content:center}
.instalar__x:hover{background:var(--lavanda-humo,#F6F4FC); color:var(--noche,#1A1838)}

/* ── Los pasos a mano (en iPhone no hay botón de instalar) ───────────── */
.instalar__pasos{display:none; margin-top:14px}
.instalar.pasos .instalar__pasos{display:block}
.instalar.pasos .instalar__si{display:none}

.instalar__paso{display:flex; align-items:center; gap:11px;
                font-size:.85rem; line-height:1.45; color:var(--carbon,#1E1D35);
                background:var(--lavanda-humo,#F6F4FC);
                border:1px solid var(--linea,#E7E4F2);
                border-radius:12px; padding:11px 13px}
.instalar__paso + .instalar__paso{margin-top:8px}
.instalar__paso b{color:var(--indigo-hondo,#3B4588)}
.instalar__paso svg{width:19px; height:19px; flex:none; color:var(--indigo,#5565A4)}
.instalar__n{flex:none; width:22px; height:22px; border-radius:50%;
             background:var(--noche,#1A1838); color:var(--lavanda,#ECE8FA);
             font-size:.7rem; font-weight:700;
             display:flex; align-items:center; justify-content:center}

/* ── Enlace "Instalar la aplicación" (pie del sitio y menú del panel) ────
   Nace escondido: lo enciende instalar.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 hace nada al tocarlo.

   Ojo con el nombre de la clase: NO puede ser `on`. En el menú del panel
   `.item.on` es "la pantalla en la que estás" y lo pinta de lavanda, así que el
   enlace aparecía encendido como si fuera la página actual. */
.instalarEnlace{display:none}
.instalarEnlace--visible{display:block}
/* En el menú del panel el renglón es flex (ícono + texto): en block, el
   ícono y la palabra se pegarían uno arriba del otro. */
.item.instalarEnlace--visible{display:flex}