/* Instalar app (PWA) — línea del login, tarjeta del área y modal de pasos.
   Usa los tokens de estilo.css. No inventa colores. */

/* --- línea discreta bajo el formulario de login --------------------------- */
.inst-linea{
  display:flex; align-items:center; gap:var(--e3);
  width:100%; margin-top:var(--e4); padding:10px var(--e3);
  background:var(--crema); border:1px solid var(--borde); border-radius:var(--r2);
  color:var(--tinta-suave); font-family:var(--f-sans); font-size:.88rem;
  text-align:left; cursor:pointer;
  transition:border-color .18s, background .18s;
}
.inst-linea:hover{ border-color:var(--salvia); background:var(--blanco) }
.inst-linea img{ width:30px; height:30px; border-radius:8px; flex:none }
.inst-linea span{ flex:1 }
.inst-linea b{ color:var(--tinta); font-weight:600 }
.inst-linea-flecha{ flex:none !important; color:var(--salvia); font-size:1rem }

/* --- tarjeta dentro del área de miembros ---------------------------------- */
.inst-tarjeta{
  position:relative;
  display:flex; align-items:center; gap:var(--e4); flex-wrap:wrap;
  margin:var(--e6) 0 calc(-1 * var(--e2));
  padding:var(--e5) var(--e6);
  background:linear-gradient(135deg,var(--bosque-1),var(--bosque-3));
  border-radius:var(--r4); box-shadow:var(--sombra-m);
  color:var(--blanco);
}
.inst-icono{
  width:56px; height:56px; border-radius:var(--r2); flex:none;
  box-shadow:0 4px 14px rgba(0,0,0,.25);
}
.inst-texto{ flex:1 1 220px; min-width:0 }
.inst-texto b{
  display:block; font-family:var(--f-serif); font-weight:600;
  font-size:1.08rem; margin-bottom:2px;
}
.inst-texto span{
  display:block; font-size:.88rem; line-height:1.5;
  color:rgba(255,255,255,.82);
}
.inst-btn{
  flex:none; padding:12px var(--e6);
  background:var(--dorado-suave); color:var(--bosque-1);
  border:none; border-radius:var(--r2);
  font-family:var(--f-sans); font-weight:600; font-size:.92rem; cursor:pointer;
  transition:background .18s, transform .12s;
}
.inst-btn:hover{ background:#fff }
.inst-btn:active{ transform:translateY(1px) }
.inst-btn:disabled{ opacity:.6; cursor:default; transform:none }
.inst-x{
  position:absolute; top:var(--e2); right:var(--e2);
  width:28px; height:28px; border:none; border-radius:var(--r-pill);
  background:rgba(255,255,255,.12); color:rgba(255,255,255,.75);
  font-size:12px; line-height:1; cursor:pointer;
}
.inst-x:hover{ background:rgba(255,255,255,.22); color:#fff }

@media (max-width:560px){
  .inst-tarjeta{ padding:var(--e5) }
  .inst-btn{ width:100% }
}

/* --- modal de instrucciones (iPhone, navegador embebido, escritorio) ------ */
.inst-fondo{
  position:fixed; inset:0; z-index:70;
  background:rgba(46,42,36,.55);
  display:flex; align-items:flex-end; justify-content:center;
  padding:var(--e4);
  animation:inst-entra .16s ease-out;
}
@media (min-width:600px){ .inst-fondo{ align-items:center } }
.inst-fondo.oculto{ display:none }
@keyframes inst-entra{ from{opacity:0} to{opacity:1} }

.inst-modal{
  position:relative; width:100%; max-width:420px;
  background:var(--blanco); border:1px solid var(--borde);
  border-radius:var(--r4); box-shadow:var(--sombra-l);
  padding:var(--e7) var(--e6) var(--e6);
  text-align:center; max-height:88vh; overflow-y:auto;
  animation:inst-sube .2s cubic-bezier(.2,.8,.3,1);
}
@keyframes inst-sube{ from{transform:translateY(14px)} to{transform:none} }

.inst-x-modal{
  position:absolute; top:var(--e3); right:var(--e3);
  width:34px; height:34px; border:none; border-radius:var(--r-pill);
  background:var(--crema); color:var(--tinta-suave);
  font-size:15px; line-height:1; cursor:pointer;
}
.inst-x-modal:hover{ background:var(--crema-2) }

.inst-modal-icono{
  width:60px; height:60px; border-radius:var(--r2);
  margin:0 auto var(--e4); display:block; box-shadow:var(--sombra-s);
}
.inst-modal h3{
  font-family:var(--f-serif); font-weight:600;
  font-size:1.2rem; color:var(--tinta); margin:0 0 var(--e2);
}
.inst-modal-nota{
  font-size:.9rem; color:var(--tinta-suave);
  margin:0 0 var(--e5); line-height:1.5;
}
.inst-pasos{
  margin:0; padding:0; list-style:none;
  text-align:left; counter-reset:paso;
}
.inst-pasos li{
  counter-increment:paso;
  position:relative; padding:var(--e3) 0 var(--e3) 40px;
  font-size:.94rem; line-height:1.5; color:var(--tinta);
  border-top:1px solid var(--borde);
}
.inst-pasos li:first-child{ border-top:none }
.inst-pasos li::before{
  content:counter(paso);
  position:absolute; left:0; top:calc(var(--e3) - 1px);
  width:26px; height:26px; border-radius:var(--r-pill);
  background:var(--salvia-velo); color:var(--salvia);
  font-size:.8rem; font-weight:600;
  display:flex; align-items:center; justify-content:center;
}
.inst-pasos b{ font-weight:600; color:var(--tinta) }
.inst-pasos svg{
  width:17px; height:17px; vertical-align:-3px;
  stroke:var(--salvia); fill:none; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round;
}
.inst-pasos svg circle{ fill:var(--salvia); stroke:none }