/* Panel 185 · Pantalla de «sin conexión»: ocupa todo y tapa el panel hasta que vuelve internet.
   El panel de debajo no se toca (lo que estuviera escrito se conserva). */
.sin-conexion-pantalla {
  position: fixed; inset: 0; z-index: 3000;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: max(24px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom));
  background: var(--fondo, #F1F6F6); color: var(--texto, #17302F);
  font-family: var(--font-ui, system-ui, -apple-system, "Segoe UI", sans-serif);
  text-align: center;
  animation: sin-conexion-entra .22s ease-out;
}
@keyframes sin-conexion-entra { from { opacity: 0; } to { opacity: 1; } }
.sin-conexion-icono {
  width: 128px; height: 128px; border-radius: 50%;
  display: grid; place-items: center;
  background: color-mix(in oklab, var(--marca, #1B8F8B) 12%, #fff);
  color: var(--marca-oscura, #0E5E5B);
  box-shadow: 0 0 0 14px color-mix(in oklab, var(--marca, #1B8F8B) 7%, transparent);
  margin-bottom: 14px;
}
.sin-conexion-icono svg { width: 68px; height: 68px; }
.sin-conexion-pantalla h2 { margin: 0; font-size: 1.6rem; font-weight: 700; letter-spacing: -.01em; }
.sin-conexion-pantalla p { margin: 0; max-width: 420px; font-size: 1rem; line-height: 1.5; opacity: .78; }
.sin-conexion-boton {
  margin-top: 10px; min-height: 48px; padding: 0 28px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--marca-oscura, #0E5E5B); color: #fff; font: inherit; font-weight: 600;
}
.sin-conexion-boton:disabled { opacity: .6; cursor: progress; }
.sin-conexion-boton:focus-visible { outline: 3px solid var(--accion, #2563eb); outline-offset: 3px; }
.sin-conexion-estado { min-height: 1.3em; font-size: .9rem; opacity: .65; }
html.sin-conexion, html.sin-conexion body { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .sin-conexion-pantalla { animation: none; } }