/* ============================================================
   CRM · Ventas Corporativas — Fiat Venezuela
   pwa.css · Pantalla sin conexion e instrucciones de instalacion

   Se carga en index.html, entrar.html y sin-conexion.html. Todo lo de la
   pantalla sin conexion cuelga de body.pagina-sin-conexion para no tocar
   el armazon. Esa pagina no carga los estilos del shell: los valores van
   escritos aqui, sin depender de sus variables.
   ============================================================ */

/* ---------- pantalla sin conexion ---------- */
.pagina-sin-conexion{
  margin:0;
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  padding:
    max(16px, env(safe-area-inset-top, 0px))
    max(16px, env(safe-area-inset-right, 0px))
    max(16px, env(safe-area-inset-bottom, 0px))
    max(16px, env(safe-area-inset-left, 0px));
  background:#0B1B2B;
  color:#14202B;
  font-family:'Source Sans 3',system-ui,-apple-system,'Segoe UI',sans-serif;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
.pagina-sin-conexion *,
.pagina-sin-conexion *::before,
.pagina-sin-conexion *::after{box-sizing:border-box;}

.sin-conexion{
  width:100%;
  max-width:420px;
  padding:24px;
  border-radius:16px;
  background:#FFFFFF;
  box-shadow:0 12px 40px rgba(0,0,0,.28);
}
.sin-conexion__icono{
  display:block;
  width:48px;
  height:48px;
  border-radius:10px;
  margin:0 0 16px;
}
.sin-conexion h1{
  margin:0 0 12px;
  font-family:'Jost','Source Sans 3',system-ui,sans-serif;
  font-size:26px;
  line-height:32px;
  font-weight:600;
  color:#0B1B2B;
}
.sin-conexion p{
  margin:0 0 20px;
  font-size:16px;
  line-height:24px;
}
.sin-conexion__reintentar{
  display:block;
  width:100%;
  min-height:48px;
  padding:0 20px;
  border:0;
  border-radius:10px;
  background:#0B1B2B;
  color:#FFFFFF;
  font:inherit;
  font-size:16px;
  font-weight:600;
  cursor:pointer;
  touch-action:manipulation;
}
.sin-conexion__reintentar:hover{background:#12293E;}
.sin-conexion__reintentar:focus-visible{outline:3px solid #008DD4;outline-offset:3px;}
.sin-conexion .sin-conexion__nota{
  margin:16px 0 0;
  font-size:14px;
  line-height:20px;
  color:#5F6F86;
}
.sin-conexion .sin-conexion__estado{
  margin:12px 0 0;
  font-size:14px;
  line-height:20px;
  font-weight:600;
  color:#217544;
}
.sin-conexion .sin-conexion__estado:empty{display:none;}

/* ---------- instrucciones de iOS (dentro del modal compartido) ---------- */
.pwa-pasos{
  margin:0;
  padding:0 0 0 24px;
  font-size:16px;
  line-height:24px;
}
.pwa-pasos li{padding:6px 0;}
.pwa-pasos__nota{
  margin:12px 0 0;
  font-size:14px;
  line-height:20px;
  color:var(--suave, #5F6F86);
}

@media (prefers-reduced-motion: reduce){
  .sin-conexion__reintentar{transition:none;}
}