/* Boton "Instalar como app" y cartel con los pasos (06/10/2026, pedido de Fabio).
   Fondo propio azul noche: la barra de arriba es un degradé que termina en celeste claro
   y el blanco sobre ese celeste no se lee (2,3:1). Asi se lee en cualquier punto de la
   barra y en los dos temas (blanco sobre #04486a = 10:1). */
.instalar-app{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;background:#04486a;color:#fff;
  border:1px solid rgba(255,255,255,.6);border-radius:999px;padding:5px 12px;font:inherit;font-size:13px;
  font-weight:700;line-height:1.2;cursor:pointer;white-space:nowrap}
.instalar-app:hover{background:#06618c}
.instalar-app:focus-visible{outline:3px solid #ffa54d;outline-offset:2px}
.instalar-app[hidden]{display:none !important}
.instalar-app .ia-ic{width:16px;height:16px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
/* ADENTRO, en el celular: el renglon del usuario (nombre, Clave, Salir, tema) ya va justo y
   el boton lo hacia saltar de renglon o empujaba el de tema fuera de la pantalla. Ahi va
   solo el icono, arriba a la derecha, en el renglon del titulo (que tiene lugar), y se le
   reserva ese lugar al titulo solo mientras el boton se ve.
   En el INGRESO la barra esta vacia y el boton va con el texto completo, en su lugar. */
@media (max-width:760px){
  .topb-in{position:relative}
  .instalar-app:not(.ia-ingreso){position:absolute;top:10px;right:12px;padding:6px 8px}
  .instalar-app:not(.ia-ingreso) .ia-txt{display:none}
  .topb-in:has(#instalar-app:not(.ia-ingreso):not([hidden])) .marca{margin-right:44px}
}

/* cartel con los pasos (cuando el navegador no ofrece instalar solo) */
.ia-fondo{position:fixed;inset:0;z-index:9999;background:rgba(5,15,25,.62);display:flex;
  align-items:center;justify-content:center;padding:16px}
.ia-dlg{background:#1f2329;color:#e7eaee;border:1px solid #3a424c;border-radius:14px;width:100%;max-width:440px;
  max-height:90vh;overflow:auto;padding:20px 22px;box-shadow:0 18px 50px rgba(0,0,0,.5);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-size:15px;line-height:1.5;text-align:left}
.ia-dlg h2{margin:0 0 4px;font-size:19px;line-height:1.3;color:#fff}
.ia-dlg .ia-bajada{margin:0 0 12px;color:#b9c2cc;font-size:14px}
.ia-dlg ol{margin:0 0 16px;padding-left:22px}
.ia-dlg li{margin:7px 0}
.ia-dlg p{margin:0 0 10px}
.ia-dlg b{color:#fff}
.ia-ok{display:block;width:100%;margin-top:6px;background:#33b6ea;color:#06202c;border:0;border-radius:10px;
  padding:11px;font:inherit;font-weight:700;cursor:pointer}
.ia-ok:focus-visible{outline:3px solid #ffa54d;outline-offset:2px}
html[data-tema="claro"] .ia-dlg{background:#fff;color:#16212e;border-color:#d8dee4;box-shadow:0 18px 50px rgba(10,30,50,.3)}
html[data-tema="claro"] .ia-dlg h2,html[data-tema="claro"] .ia-dlg b{color:#06202c}
html[data-tema="claro"] .ia-dlg .ia-bajada{color:#4a5763}
html[data-tema="claro"] .ia-ok{background:#0b6f9f;color:#fff}